css3滑鼠懸停動畫特效
阿新 • • 發佈:2018-12-22
<div class="block"> <img src="img/1.jpg" alt=""/> <div class="ceng"> <div>HEADING</br>HERE</div> <span></span> <P>description goes here</P> </div> </div> <div class="block1par"> <div class="ceng1"> <div>HEADING</br>HERE</div> <span></span> <P>description goes here</P> </div> <div class="block1"> <img src="img/2.jpg" alt=""/> </div> </div> <div class="block2par"> <div class="ceng2"> <div>HEADING</br>HERE</div> <span></span> <P>description goes here</P> </div> <div class="block2"> <img src="img/3.jpg" alt=""/> </div> </div> <div class="block3par"> <div class="ceng3"> <div>HEADING</br>HERE</div> <span></span> <P>description goes here</P> </div> <div class="block3"> <img src="img/4.jpg" alt=""/> </div> </div> <div class="block4par"> <div class="ceng4"> <div>HEADING</br>HERE</div> <span></span> <P>description goes here</P> </div> <div class="block4"> <img src="img/5.jpg" alt=""/> </div> </div> <div class="block5par"> <div class="ceng5"> <div>HEADING</br>HERE</div> <span></span> <P>description goes here</P> </div> <div class="block5"> <img src="img/6.jpg" alt=""/> </div> </div> <div class="block6par"> <div class="ceng6"> <div>HEADING</br>HERE</div> <span></span> <P>description goes here</P> </div> <div class="block6"> <img src="img/7.jpg" alt=""/> </div> </div> <div class="block7par"> <div class="ceng7"> <div>HEADING</br>HERE</div> <span></span> <P>description goes here</P> </div> <div class="block7"> <img src="img/8.jpg" alt=""/> </div> </div> <div class="block8par"> <div class="ceng8"> <div>HEADING</br>HERE</div> <span></span> <P>description goes here</P> </div> <div class="block8"> <img src="img/1.jpg" alt=""/> </div> </div>
上面是是HTML程式碼部分,下面是css程式碼
*{ margin:0; padding:0; } /*特效一*/ .block{ width:200px; height:200px; border-radius: 50%; overflow: hidden; margin:20px auto; position:relative; } .block:before{ content:""; width:180px; height:180px; border-radius: 50%; border:10px solid; border-color: orange green green orange; position:absolute; z-index:2; transition: all 0.5s linear; } .block:hover::before{ transform: rotatez(180deg); } .block>img{ width:200px; height:200px; position: absolute; } .ceng{ position:absolute; z-index:1; width: 200px; height: 200px; border-radius: 50%; text-align: center; transition: all 0.5s linear; background-color: rgba(0, 0, 0, 0.51); opacity:0; } .block:hover .ceng{ opacity: 1; } .ceng>div{ font-size: 30px; padding-top:40px; color:white; } .ceng>span{ display:block; width:170px; margin: 10px 15px; border-top:1px solid white; } .ceng>p{ font-size:small; color:white; } /*特效二*/ .block1par{ width:200px; height:200px; border-radius: 50%; margin:10px auto; position:relative; } .block1{ width:200px; height:200px; border-radius: 50%; overflow: hidden; margin:20px auto; position:relative; } .block1:before{ content:""; width:180px; height:180px; border-radius: 50%; border:10px solid; border-color: rgba(192, 192, 192, 0.53); position:absolute; z-index:2; } .block1:hover img{ transform: rotatez(-90deg); } .block1>img{ width:200px; height:200px; border-radius: 50%; position: absolute; transition: all 0.5s linear; } .ceng1{ position:absolute; z-index:1; left:-300px; /*right:-300px;*/ opacity:0; width: 200px; height: 200px; border-radius: 50%; text-align: center; transition: all 0.5s linear; background-color: rgba(0, 0, 0, 0.51); pointer-events: none; } .block1par:hover .ceng1{ opacity: 1; left:0; /*right:0;*/ } .ceng1>div{ font-size: 30px; padding-top:40px; color:white; } .ceng1>span{ display:block; width:170px; margin: 10px 15px; border-top:1px solid white; } .ceng1>p{ font-size:small; color:white; } /*特效三*/ .block2par{ width:200px; height:200px; border-radius: 50%; margin:10px auto; position:relative; } .block2{ width:200px; height:200px; border-radius: 50%; margin:20px auto; position:relative; transition: all 0.3s linear; /*z-index:3;*/ } .block2:before{ content:""; width:180px; height:180px; border-radius: 50%; border:10px solid; border-color: rgba(192, 192, 192, 0.53); position:absolute; z-index:2; } .block2par:hover .block2{ transform:scale(0.5); left:90px; } .block2>img{ width:200px; height:200px; border-radius: 50%; position: absolute; /*transition: all 0.4s linear;*/ } .ceng2{ position:absolute; z-index:1; left:-300px; opacity:0; width: 200px; height: 200px; border-radius: 50%; text-align: center; transition: all 0.4s linear; background-color: rgba(0, 0, 0, 0.51); pointer-events: none; } .block2par:hover .ceng2{ opacity: 1; left:0; } .ceng2>div{ font-size: 30px; padding-top:40px; color:white; } .ceng2>span{ display:block; width:170px; margin: 10px 15px; border-top:1px solid white; } .ceng2>p{ font-size:small; color:white; } /*特效四*/ .block3par{ width:200px; height:200px; border-radius: 50%; margin:10px auto; position:relative; } .block3{ width:200px; height:200px; border-radius: 50%; /*overflow: hidden;*/ margin:20px auto; position:relative; transition: all 0.2s 0.15s linear; z-index:3; opacity:1; } .block3:before{ content:""; width:180px; height:180px; border-radius: 50%; border:10px solid; border-color: rgba(192, 192, 192, 0.53); position:absolute; z-index:2; } .block3par:hover .block3{ left:250px; opacity:0; } .block3>img{ width:200px; height:200px; border-radius: 50%; position: absolute; } .ceng3{ position:absolute; z-index:1; left:-300px; opacity:0; width: 200px; height: 200px; border-radius: 50%; text-align: center; transition: all 0.2s linear; background-color: rgba(0, 0, 0, 0.51); pointer-events: none; } .block3par:hover .ceng3{ opacity: 1; left:0; } .ceng3>div{ font-size: 30px; padding-top:40px; color:white; } .ceng3>span{ display:block; width:170px; margin: 10px 15px; border-top:1px solid white; } .ceng3>p{ font-size:small; color:white; } /*特效五*/ .block4par{ width:200px; height:200px; border-radius: 50%; margin:10px auto; position:relative; } .block4{ width:200px; height:200px; border-radius: 50%; margin:20px auto; position:relative; transition: all 0.2s linear; } .block4:before{ content:""; width:180px; height:180px; border-radius: 50%; border:10px solid; border-color: rgba(192, 192, 192, 0.53); position:absolute; z-index:2; } .block4>img{ width:200px; height:200px; border-radius: 50%; position: absolute; } .ceng4{ position:absolute; z-index:1; width: 200px; height: 200px; border-radius: 50%; text-align: center; transform:rotatey(90deg); transition: all 0.2s linear; background-color: rgba(0, 0, 0, 0.51); opacity: 0; pointer-events: none; } .block4par:hover .ceng4{ opacity: 0.5; transform: rotatey(0deg); } .ceng4>div{ font-size: 30px; padding-top:40px; color:white; } .ceng4>span{ display:block; width:170px; margin: 10px 15px; border-top:1px solid white; } .ceng4>p{ font-size:small; color:white; } /*特效六*/ .block5par{ width:200px; height:200px; border-radius: 50%; margin:10px auto; position:relative; } .block5{ width:200px; height:200px; border-radius: 50%; margin:20px auto; position:relative; transition: all 0.2s linear; z-index:3; opacity:1; } .block5:before{ content:""; width:180px; height:180px; border-radius: 50%; border:10px solid; border-color: rgba(192, 192, 192, 0.53); position:absolute; z-index:2; } .block5par:hover .block5{ transform: scale(1.5); opacity:0; } .block5>img{ width:200px; height:200px; border-radius: 50%; position: absolute; } .ceng5{ position:absolute; z-index:1; opacity:0; width: 200px; height: 200px; border-radius: 50%; text-align: center; transition: all 0.2s linear; background-color: rgba(0, 0, 0, 0.51); pointer-events: none; } .block5par:hover .ceng5{ opacity: 1; } .ceng5>div{ font-size: 30px; padding-top:40px; color:white; } .ceng5>span{ display:block; width:170px; margin: 10px 15px; border-top:1px solid white; } .ceng5>p{ font-size:small; color:white; } /*特效七*/ .block6par{ width:200px; height:200px; border-radius: 50%; margin:10px auto; position:relative; } .block6{ width:200px; height:200px; border-radius: 50%; margin:20px auto; position:relative; transition: all 0.2s linear; z-index:3; opacity:1; } .block6:before{ content:""; width:180px; height:180px; border-radius: 50%; border:10px solid; border-color: rgba(192, 192, 192, 0.53); position:absolute; z-index:2; } .block6par:hover .block6{ transform:scale(0.5); opacity:0; } .block6>img{ width:200px; height:200px; border-radius: 50%; position: absolute; } .ceng6{ position:absolute; z-index:1; opacity:0; left:-200px; width: 200px; height: 200px; border-radius: 50%; text-align: center; transition: all 0.2s linear; background-color: rgba(0, 0, 0, 0.51); pointer-events: none; } .block6par:hover .ceng6{ left:0; opacity: 1; } .ceng6>div{ font-size: 30px; padding-top:40px; color:white; } .ceng6>span{ display:block; width:170px; margin: 10px 15px; border-top:1px solid white; } .ceng6>p{ font-size:small; color:white; } /*特效八*/ .block7par{ width:200px; height:200px; border-radius: 50%; margin:10px auto; position:relative; } .block7{ width:200px; height:200px; border-radius: 50%; margin:20px auto; position:relative; left:0; transition: all 0.2s 0.15s linear; z-index:3; opacity:1; } .block7:before{ content:""; width:180px; height:180px; border-radius: 50%; border:10px solid; border-color: rgba(192, 192, 192, 0.53); position:absolute; z-index:2; } .block7par:hover .block7{ transform:scale(0.5); left:-200px; opacity:0; } .block7>img{ width:200px; height:200px; border-radius: 50%; position: absolute; } .ceng7{ position:absolute; z-index:1; opacity:0; right:-300px; width: 200px; height: 200px; border-radius: 50%; text-align: center; transition: all 0.2s 0.15s linear; background-color: rgba(0, 0, 0, 0.51); pointer-events: none; } .block7par:hover .ceng7{ right:0; opacity: 1; } .ceng7>div{ font-size: 30px; padding-top:40px; color:white; } .ceng7>span{ display:block; width:170px; margin: 10px 15px; border-top:1px solid white; } .ceng7>p{ font-size:small; color:white; } /*特效九*/ .block8par{ width:200px; height:200px; border-radius: 50%; margin:10px auto; position:relative; } .block8{ width:200px; height:200px; border-radius: 50%; margin:20px auto; position:relative; right:0; transition: all 0.4s linear; z-index:3; opacity:1; } .block8:before{ content:""; width:180px; height:180px; border-radius: 50%; border:10px solid; border-color: rgba(192, 192, 192, 0.53); position:absolute; z-index:2; pointer-events: none; } .block8par:hover .block8{ transform:rotatez(180deg); right:-300px; opacity:0; } .block8>img{ width:200px; height:200px; border-radius: 50%; position: absolute; } .ceng8{ position:absolute; z-index:1; opacity:0; right:-300px; width: 200px; height: 200px; border-radius: 50%; text-align: center; transition: all 0.2s 0.15s linear; background-color: rgba(0, 0, 0, 0.51); pointer-events: none; } .block8par:hover .ceng8{ right:0; opacity: 1; } .ceng8>div{ font-size: 30px; padding-top:40px; color:white; } .ceng8>span{ display:block; width:170px; margin: 10px 15px; border-top:1px solid white; } .ceng8>p{ font-size:small; color:white; }