css缓慢放大加载缓入动画

来源:赵克立博客 分类: HTML5 标签:动画css发布时间:2019-12-30 23:18:30最后更新:2019-12-31 09:06:16浏览:84
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
温馨提示:
技术类文章有它的时效性,请留意文章更新时间以及软件的版本
更新时间:
2019-12-31 09:06:16
<!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/asset/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>



微信号:kelicom QQ群:215861553 紧急求助须知
点击更换验证码
Win32/PHP/JS/Android/Python