图案拉长字体发光

最新推荐文章于 2024-05-09 16:38:49 发布

JSHeng@

最新推荐文章于 2024-05-09 16:38:49 发布

阅读量341

点赞数

分类专栏： css css字体发光拉长发光

本文链接：https://blog.csdn.net/jiaosheng1/article/details/78127904

版权

css 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

css字体发光

2 篇文章 0 订阅

订阅专栏

拉长发光

1 篇文章 0 订阅

订阅专栏

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
            <style>
                @-webkit-keyframes 'wobble' {
                 0% {
                    margin-left: 100px;
                    background: green;
                 }
                 40% {
                    margin-left: 250px;
                    background: orange;
                 }
                 60% {
                    margin-left: 350px;
                    background: blue;
                 }
                 100% {
                    margin-left: 1000px;
                    background: red;
                 }
              }

              .demo1 {
                 width: 50px;
                 height: 50px;
                 margin-left: 100px;
                 background: blue;
                 -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
                 -webkit-animation-duration: 2s;/*动画持续时间*/
                 -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
                 -webkit-animation-delay: 2s;/*动画延迟时间*/
                 -webkit-animation-iteration-count: 3;/*定义循环资料，infinite为无限次*/
                 -webkit-animation-direction: alternate;/*定义动画方式*/
              }
            </style>
        </head>

        <body>
            <div class="demo1">

            </div>
        </body>
        </html>