航海王_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）