求大神帮我查错！感谢

我是按照老师一步步来的。可是发现两个问题：1，遮罩层很小，而且偏左上。2，border无法实现过度旋转效果。求大神帮我改改。

<!DOCTYPE html>

<html>

<head>

<title>css3 hover</title>

.demo,.img,.border{

width:300px;

height:300px;

border-radius:50%;

}

.demo{

position: relative;

display: block;

}

.img{

background-size: cover;

background-position: 50% 50%;

}

.mask,.border{

position: absolute;

left:0;

top:0;

}

.mask{

text-align: center;

color:rgba(255,255,255,0);

border-radius: 50%;

-webkit-transform: all 0.5s ease-in;

-moz-transform: all 0.5s ease-in;

-ms-transform: all 0.5s ease-in;

-o-transform: all 0.5s ease-in;

transform: all 0.5s ease-in;

}

.info{

margin-top: 50%;

-webkit-transform: translateX(25%);

-moz-transform: translateX(25%);

-ms-transform: translateX(25%);

-o-transform: translateX(25%);

transform: translateX(25%);

}

.border{

border:10px solid #072256;

border-left-color: #e07514;

border-top-color:#e07514;

box-sizing: border-box;

-webkit-transform: all 0.5s ease-in;

-moz-transform: all 0.5s ease-in;

-ms-transform: all 0.5s ease-in;

-o-transform: all 0.5s ease-in;

transform: all 0.5s ease-in;

}

.demo:hover .mask{

background-color:rgba(0,0,0,0.5);

color:rgba(255,255,255,1);

}

.demo:hover .border{

-webkit-transform:rotate(180deg);

transform:rotate(180deg);

}

</style>

</head>

<body>

<h3>beautiful day</h3>

<p>description goes here</p>

</div>

</a>

</body>

</html>

Yvonne_D

2015-10-31

源自：CSS动画实用技巧 4-3

关注问题我要回答

1038

操作

收起

2 回答

慕斯卡5617878
2017-01-26

楼上的没用啊

0 回复有任何疑惑可以回复我~

收起回答

pardon110
2015-10-31

改了下你的代码，关键点定位，变形。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3 Hover</title>
    <style type="text/css">
        .demo,.img,.border,.mask{
            width: 300px;
            height: 300px;
            border-radius: 50%;
        }
        
        .demo{
            display: block;
            position: relative;
        }
        .img{
             background-size: cover;
            background-position: 50% 50%;
        }
        .border{
            border: 10px solid #072256;
            border-left-color:#E07514;
            border-top-color:#E07514;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
        }
        .mask{
            color:rgba(255,255,255,0);
        }
        .border,.mask{
            position: absolute;top: 0; left: 0; 
            -webkit-transition:all .5s ease-in;
            transition:all .5s ease-in;
        }
        .demo:hover .mask{
            background-color:rgba(0,0,0,0.5);
            color:rgba(255,255,255,1);
        }
        .demo:hover .border{
            -webkit-transform:rotate(180deg);
            transform:rotate(180deg);

        }
        .info{
            position: absolute;
            width: 100%;
            top: 50%;
            left: 0;
            text-align: center;
            -webkit-transform:translateY(-50%);
        }

    </style>

</head>
<body>
    <a href="#">
        <div style="background-image:url(http://f10.topitme.com/o/201101/26/12960352758915.jpg)"></div>
        <div>
            <div>
                <h3>beautiful day</h3>
                <p>description goes here</p>
            </div>
        </div>
        <div></div>
    </a>
</body>
</html>