帧动画和过渡动画

来源：互联网发布：怎么与淘宝达人合作编辑：程序博客网时间：2024/05/20 11:26

帧动画

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>帧动画</title>        <!--            使用            1.定义帧            2.使用            开始红色            中间是黄色            最后是绿色        -->        <style type="text/css">            .zhen{                background: red;                width: 60px;                height: 60px;            }            @-webkit-keyframes demo{                from{                    background: red;                }                20%{                    background: blue;                }                50%{                    background: yellow;                }                to{                    background: green;                }            }            .zhen:hover{                animation: 2s demo;            }        </style>    </head>    <body>        <div class="zhen">        </div>    </body></html>

过渡动画

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>过渡动画</title>        <!--            作者：offline            描述：如果只用形变，效果比较生硬            怎么吧，使用过渡动画使效果柔和一点            ransition: 属性 时间  速度效果;        -->        <style type="text/css">        *{            margin: 0 auto;            padding: 0;        }            .logo:hover{                transform: rotate(360deg) scale(2);            }            .logo{                transition: all 3s ease-in-out;                margin: 0 auto;                width: 200px;                height: 300px;                margin-left: 500px;            }            ul{                float: left;                width: 100%;                height: 400px;                list-style: none;            }            ul li{                width: 200px;                height: 300px;                float: left;                padding-left: 10px;            }            img{                transition: all 2s ease;            }            img:hover{                transform: rotate(360deg);            }        </style>    </head>    <body>        <!--自己随便设置一个图片就可以显示效果-->        <img src="img/a8.jpg" class="logo"/>        <ul>            <li><img src="img/a8.jpg"/></li>            <li><img src="img/a8.jpg"/></li>            <li><img src="img/a8.jpg"/></li>            <li><img src="img/a8.jpg"/></li>            <li><img src="img/a8.jpg"/></li>        </ul>        <ul>            <li><img src="img/a8.jpg"/></li>            <li><img src="img/a8.jpg"/></li>            <li><img src="img/a8.jpg"/></li>            <li><img src="img/a8.jpg"/></li>            <li><img src="img/a8.jpg" style=""/></li>        </ul>    </body></html>

阅读全文

0 0