海王_html_css3_旋转效果demo
海贼王_html_css3_旋转效果demo
效果如下图：
下载地址与图片资源：
【航海王_html_css3_旋转效果demo-网页制作文档类资源-CSDN下载】
部分编码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>通缉令</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> * { margin: 0px; padding: 0px; /*通配一下*/ } #bgbox { width: 1250px; height: 740px; background: url("img/女帝.jpg"); margin: 0px auto; /*确定背景大小及位置,居中*/ } #left_box { width: 590px; float: left; margin-top: 30px; margin-left: 5px; padding: 10px; } #left_box li { list-style: none; width:161px; height:170px; float:left; padding: 10px; } .img1 img { border-radius: 12px; width: 161px; height: 170px; float: left; padding: 6px; border: 3px solid #cccccc; margin: 5px 2px auto; cursor: pointer; /*鼠标形状*/ box-shadow: 2px 3px 3px #a1a1a1, -1px -1px 3px #7e7e7e; /*阴影部分*/ } li:HOVER { transform: rotate(360deg); /*旋转*/ transition: all 800ms ease; /*旋转时间*/ /*中心点*/ transform:origin(50%,50%)； } li:HOVER img{ transform: scale(2.5);/*方法倍数*/ transition: all 1000ms ease;/*运行时间*/ border-radius: 12px; /*圆角*/ } </style> </head> <body> <div id="bgbox"> <div id="left_box"> <ul> <li class="img1"> <img src="img/图片1.jpg" /> </li> <li class="img1"> <img src="img/图片2.jpg" /> </li> <li class="img1"> <img src="img/图片3.jpg" /> </li> <li class="img1"> <img src="img/图片4.jpg" /> </li> <li class="img1"> <img src="img/图片5.jpg" /> </li> <li class="img1"> <img src="img/图片6.jpg" /> </li> <li class="img1"> <img src="img/图片7.jpg" /> </li> <li class="img1"> <img src="img/图片8.jpg" /> </li> <li class="img1"> <img src="img/图片9.jpg" /> </li> </ul> </div> </div> </body> </html>
