求大神幫我查錯！感謝
我是按照老師一步步來的。可是發現兩個問題：1，遮罩層很小，而且偏左上。2，border無法實現過度旋轉效果。求大神幫我改改。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset=utf-8>
? ? <meta name=description content="css3">
? ? <meta name=viewport content="width=device-width, initial-scale=1">
<title>css3 hover</title>
<style type="text/css">
? ? ? ?.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>
? ? <a href="#" class="demo">
? ? <div class="img" style="background-image: url(http://f10.topitme.com/o/201101/26/12960352758915.jpg)"></div>
? ? <div class="mask">
? ? <div class="info">
? ? <h3>beautiful day</h3>
? ? <p>description goes here</p>
? ? </div>
? ? </div>
? ? <div class="border"></div>
? ? </a>
</body>
</html>
2017-01-26
樓上的沒用啊
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>