CSS3 Hover 动画特效
根据 奇舞团：http://www.75team.com/archives/807 做的demo
根据视频中跟着做的 demo1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;} .box,.mask,.img,.border{ width: 200px; height: 200px;border-radius:50%; cursor:pointer;} .box{position:relative; } .mask,.border{position:absolute;left:0;top:0;} .border{border:10px solid red;border-bottom-color:green;border-right-color: green;transition:all 0.5s ease-in; box-sizing:border-box;} .mask{ background:rgba(0,0,0,0.2); opacity: 0;color:rgba(255,255,255,0);transition:all 0.5s ease-in;} .info{ text-align:center; font-size: 24px; margin-top:50%; transform: translateY(-50%);} .img{ background-size:cover; background-position: 50% 50%;} .box:hover .border{ transform:rotateZ(90deg);} .box:hover .mask{ opacity:1;color:rgba(255,255,255,1);} </style> </head> <body> <div class="box"> <div class="img" style="background-image:url(1.jpg)"></div> <div class="mask"> <div class="info">小S</div> </div> <div class="border"></div> </div> </body> </html>
跟着 做 “举一反三” 例子： demo2:
发现一个小问题 .mask 的 transform 平移出没有透明度的其实鼠标还是能够hover上 触发box 的 hover,直接导致 hover 区域变大不准 ，最开始想直接 给 box 一个 overflow:hidden 后发现这个效果没用了，再想用伪类解决也没解决了，最后用js 在 #box mouseover时加个class 让他取消到hidden 同时 监听 .mask transition 结束时去掉 #box 上的class 始终保持#box 上hideen;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;} #box,.mask,.img{ width: 200px; height: 200px;border-radius:50%; cursor:pointer;} #box{position:relative; overflow:hidden; } #box.active{ overflow:visible;} .mask{position:absolute;left:0;top:0;} .border{border:10px solid red;border-bottom-color:green;border-right-color: green;transition:all 0.5s ease-in; box-sizing:border-box;} .mask{ transform:translateX(200px); background:rgba(0,0,0,0.2); opacity: 0;color:rgba(255,255,255,0);transition:all 0.3s ease-in;} .info{ text-align:center; font-size: 24px; margin-top:50%; transform: translateY(-50%);} .img{ background-size:cover; background-position: 50% 50%;transition:all 0.5s ease-in;} .img:after{ display:block; width:200px; height:200px; content:'';border-radius:50%; box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);} #box:hover {} #box:hover .img{ transform:rotateZ(30deg);} #box:hover .mask{ opacity:1;color:rgba(255,255,255,1);transform:translateX(0px);} </style> <script> window.onload = function(){ var oBox = document.querySelector('#box'), oMask = document.querySelector('.mask'); oBox.onmouseover = function(){ this.className = 'active'; } oBox.onmouseout = function(){ this.className = 'active'; } oMask.addEventListener("transitionend", myFunction); function myFunction(){ oBox.className = ' '; } } </script> </head> <body> <div id="box" > <div class="img" style="background-image:url(http://g.hiphotos.baidu.com/image/pic/item/29381f30e924b899b787b0166c061d950a7bf661.jpg)"></div> <div class="mask"> <div class="info">文字</div> </div> </div> </body> </html>
演示：demo2
待解决的问题： 想用伪类的选择器解决,但还是有点问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;} .box,.mask,.img,.test{ width: 200px; height: 200px;border-radius:50%; cursor:pointer;} .box{position:relative; } .mask,.test{position:absolute;left:0;top:0;} .border{border:10px solid red;border-bottom-color:green;border-right-color: green;transition:all 0.5s ease-in; box-sizing:border-box;} .mask{ transform:translateX(200px); background:rgba(0,0,0,0.2); opacity: 0;color:rgba(255,255,255,0);transition:all 0.3s ease-in;} .info{ text-align:center; font-size: 24px; margin-top:50%; transform: translateY(-50%);} .img{ background-size:cover; background-position: 50% 50%;transition:all 0.5s ease-in;} .img:after{ display:block; width:200px; height:200px; content:'';border-radius:50%; box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);} .test:hover { } .test:hover .img{ transform:rotateZ(30deg);} .test:hover + .mask{ opacity:1;color:rgba(255,255,255,1);transform:translateX(0px);} </style> </head> <body> <div class="box"> <div class="img" style="background-image:url(1.jpg)"></div> <div class="test"></div> <div class="mask"> <div class="info">文字</div> </div> </div> </body> </html>