纯css动画图片相册

最新推荐文章于 2024-05-23 22:54:35 发布

蚂蚁小草

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量1k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/yueruitao/article/details/69396443

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #7CFC00;
margin: 0;
padding: 0;
animation:myfirst 15s;
-moz-animation:myfirst 15s; /* Firefox */
-webkit-animation:myfirst 15s; /* Safari and Chrome */
-o-animation:myfirst 15s; /* Opera */
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
75% {background:hotpink;}
100% {background:green;}
}

.container{
position: relative;
margin: 30px auto;
padding: 5px 20px;
}
img{
position: absolute;
width: 100px;
height: 100px;
-webkit-transition: width 3s, height 3s, -webkit-transform 3s; /* For Safari 3.1 to 6.0 */
transition: width 3s, height 3s, transform 3s;
}
img:hover{
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
-webkit-animation: A 15s;
z-index: 1;
}
a:nth-child(1) img{
top: 380px;
left: 900px;
transform: rotateY(80deg);
-ms-transform: rotateY(100deg); /*IE 9*/
-webkit-transform: rotate(120deg);/*Safari ++ Chrome*/
}
a:nth-child(2) img{
top: 350px;
left: 620px;
transform: rotate(-30deg);
-ms-transform: rotate(-30deg); /*IE 9*/
-webkit-transform: rotate(-30deg);/*Safari ++ Chrome*/
}
a:nth-child(3) img{
top: 470px;
left: 650px;
transform: rotate(-10deg);
-ms-transform: rotate(-10deg); /*IE 9*/
-webkit-transform: rotate(-10deg);/*Safari ++ Chrome*/
}
a:nth-child(4) img{
top: 540px;
left: 1000px;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /*IE 9*/
-webkit-transform: rotate(45deg);/*Safari ++ Chrome*/
}
a:nth-child(5) img{
top: 330px;
left: 800px;
transform: rotate(-25deg);
-ms-transform: rotate(-25deg); /*IE 9*/
-webkit-transform: rotate(-25deg);/*Safari ++ Chrome*/
}
a:nth-child(6) img{
top: 460px;
left: 990px;
transform: rotate(10deg);
-ms-transform: rotate(10deg); /*IE 9*/
-webkit-transform: rotate(10deg);/*Safari ++ Chrome*/
}
a:nth-child(7) img{
top: 240px;
left: 900px;
transform: rotate(20deg);
-ms-transform: rotate(20deg); /*IE 9*/
-webkit-transform: rotate(20deg);/*Safari ++ Chrome*/
}
a:nth-child(8) img{
top: 280px;
left: 980px;
transform: rotate(-60deg);
-ms-transform: rotate(-60deg); /*IE 9*/
-webkit-transform: rotate(-60deg);/*Safari ++ Chrome*/
}
a:nth-child(9) img{
top: 340px;
left: 1080px;
transform: rotate(-20deg);
-ms-transform: rotate(-20deg); /*IE 9*/
-webkit-transform: rotate(-20deg);/*Safari ++ Chrome*/
}
a:nth-child(10) img{
top: 460px;
left: 800px;
transform: rotate(50deg);
-ms-transform: rotate(50deg); /*IE 9*/
-webkit-transform: rotate(50deg);/*Safari ++ Chrome*/
}
a:nth-child(11) img{
top: 559px;
left: 900px;
transform: rotate(24deg);
-ms-transform: rotate(24deg); /*IE 9*/
-webkit-transform: rotate(24deg);/*Safari ++ Chrome*/
}
a:nth-child(12) img{
top: 580px;
left: 800px;
transform: rotate(26deg);
-ms-transform: rotate(26deg); /*IE 9*/
-webkit-transform: rotate(26deg);/*Safari ++ Chrome*/
}
a:nth-child(13) img{
top: 280px;
left: 700px;
transform: rotate(-25deg);
-ms-transform: rotate(-25deg); /*IE 9*/
-webkit-transform: rotate(-25deg);/*Safari ++ Chrome*/
}
a:nth-child(14) img{
top: 580px;
left: 600px;
transform: rotate(-25deg);
-ms-transform: rotate(-25deg); /*IE 9*/
-webkit-transform: rotate(-25deg);/*Safari ++ Chrome*/
}
a:nth-child(15) img{
top: 460px;
left: 1130px;
transform: rotate(-25deg);
-ms-transform: rotate(-25deg); /*IE 9*/
-webkit-transform: rotate(-25deg);/*Safari ++ Chrome*/
}
a:nth-child(16) img{
top: 580px;
left: 700px;
transform: rotate(-25deg);
-ms-transform: rotate(-25deg); /*IE 9*/
-webkit-transform: rotate(-25deg);/*Safari ++ Chrome*/
}
@-webkit-keyframes A{
0% {-webkit-transform: scale(1,1);}
10% {-webkit-transform: rotate(15deg) scale(2,3);}
50% {-webkit-transform: rotate(90deg) scale(3,4);}
80% {-webkit-transform: rotate(180deg) scale(4,5);}
100% {-webkit-transform: rotate(360deg) scale(5,5);}
50% {-webkit-transform: rotate(360deg) scale(3,4);}
20% {-webkit-transform: rotate(180deg) scale(3,3);}
}
</style>
</head>
<body>
<div class="container">
<a href="1.jpg"><img src="1.jpg" alt="图片 1" /></a>
<a href="2.jpg"><img src="2.jpg" alt="图片 2" /></a>
<a href="3.jpg"><img src="3.jpg" alt="图片 3" /></a>
<a href="4.jpg"><img src="4.jpg" alt="图片 4" /></a>
<a href="5.jpg"><img src="5.jpg" alt="图片 5" /></a>
<a href="6.jpg"><img src="6.jpg" alt="图片 6" /></a>
<a href="7.jpg"><img src="7.jpg" alt="图片 7" /></a>
<a href="8.jpg"><img src="8.jpg" alt="图片 8" /></a>
<a href="9.jpg"><img src="9.jpg" alt="图片 9" /></a>
<a href="10.jpg"><img src="10.jpg" alt="图片 10" /></a>
<a href="11.jpg"><img src="11.jpg" alt="图片 11" /></a>
<a href="12.jpg"><img src="12.jpg" alt="图片 12" /></a>
<a href="13.jpg"><img src="13.jpg" alt="图片 13" /></a>
<a href="14.jpg"><img src="14.jpg" alt="图片 14" /></a>
<a href="15.jpg"><img src="15.jpg" alt="图片 15" /></a>
<a href="16.jpg"><img src="16.jpg" alt="图片 16" /></a>
</div>
</body>
</html>

蚂蚁小草

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css动画图片相册

body{background-color: #7CFC00;margin: 0;padding: 0;animation:myfirst 15s;-moz-animation:myfirst 15s; /* Firefox */-webkit-animation:myfirst 15s; /* Safari and Chrome */-o-animation:myfi
复制链接

扫一扫