模仿世纪佳缘网站PC端的首页效果

最新推荐文章于 2021-07-12 19:54:20 发布

转载最新推荐文章于 2021-07-12 19:54:20 发布 · 156 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/liuhao-web/p/6379432.html

本文介绍了一种使用HTML和CSS实现图片从极小尺寸逐渐放大到指定尺寸的动画效果。通过定义关键帧动画，所有具备特定类名的图片都将展现出统一的动态变化过程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;font-size: 0}
        .img{
            animation-name: ani_bottom_item;
            animation-duration: 4s;
            width: 390px;height:390px;
        }
        @-webkit-keyframes ani_bottom_item {
            0%   { width: 20px;height:20px; }
            100% { width: 390px;height:390px;}
        }
    </style>
</head>
<body>
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
<img src="img/1.jpg" class="img">
<img src="img/2.jpg" class="img">
<img src="img/3.jpg" class="img">
<img src="img/4.jpg" class="img">
<img src="img/5.jpg" class="img">
</body>
</html>

转载于:https://www.cnblogs.com/liuhao-web/p/6379432.html