航海王_html_css3_旋转效果demo
【摘要】
航海王_html_css3_旋转效果demo
海贼王_html_css3_旋转效果demo
效果如下图：
下载地址与图片资源：
【航海王_html_css3_旋转效果demo-网页制作文档类资源-CSDN下载】
部分编码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM...
航海王_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>
文章来源: laoshifu.blog.csdn.net，作者：红目香薰，版权归原作者所有，如需转载，请联系作者。
原文链接：laoshifu.blog.csdn.net/article/details/122617076
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）