css缓慢放大加载缓入动画

来源:赵克立博客分类: HTML5 标签：css 动画发布时间:2019-12-30 23:18:30最后更新:2022-04-16 13:45:44浏览:769

本文为博主原创文章，转载请声明原文链接...谢谢。o_0。

原文链接:

http://www.zhaokeli.com /article/8617.html

更新时间：

2022-04-16 13:45:44

温馨提示：

学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>标题</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
</head>

<body>
    <!-- 页头 -->
    <div class="header">
        <div class="header-inner"></div>
    </div>
    <!-- 正文 -->
    <div class="container">
        <img class="zoom" src="https://www.zhaokeli.com/public/blog/images/touxiang.jpg">
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <div class="footer-inner"></div>
    </div>
    <style type="text/css">
    .zoom {
        animation: zoom .5s cubic-bezier(.075, .82, .165, 1);
    }

    @keyframes zoom {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0)
        }

        to {
            -webkit-transform: scale(1);
            transform: scale(1)
        }
    }
    </style>
</body>

</html>