CSS3 Hover 动画特效

浏览数：30 / 时间：2015年06月09日

根据奇舞团：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">文字</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‘;
        }
        //监听 transition 运动完成 触发的事件
        oMask.addEventListener("transitionend", myFunction);

        function myFunction(){
            oBox.className = ‘ ‘;
        }
        
    }
    </script>
</head>
<body>
    <div id="box" >
        <div class="img" style="background-image:url(1.jpg)"></div>
        <div class="mask">
            <div class="info">文字</div>
        </div>
    </div>
</body>
</html>

待解决的问题：想用伪类的选择器解决,但还是有点问题

<!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>