【每日一练】64—CSS实现彩虹文字的动画效果

最新推荐文章于 2023-05-27 09:51:55 发布

web前端开发V

最新推荐文章于 2023-05-27 09:51:55 发布

阅读量468

点赞数

文章标签： css html 编程语言 css3 python

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649132248&idx=2&sn=63c53074d1160d97095d8fb370c13c6e&chksm=be58ab75892f22631529eeb56694e1d1c42ad48c620fb6d2b37a2562d0eab7474036dbc6a51e&scene=126&&sessionid=0

版权

写在前面

最近有好几个小伙伴来问我，说【每日一练】里的gif动画是用什么软件录制的，在这里，我统一说一下，我录gif动画的工具是，LICEcap，录出来的文件，是默认为gif格式的。

在这里，我也把这个gif录屏软件分享给大家，如果有需要的小伙伴，请自行下载获取：

下载地址： https://url81.ctfile.com/f/21793581-671158336-3e11c7?p=2698

密码: 2698

说完了软件，我们再一起来看看今天的练习案例，我们今天练习的这个案例是一个文本动画效果，可以无限循环的动画效果，动画的快慢可以自行设置，我这里设置的是3s，如果想快一点或者慢一点，可以通过以下代码来修改它的速度。

animation: swing 3s infinite;

现在，我们一起来看一下它的最终效果：

看完了效果，我们再一起来看一下，它们的实现代码。

HTML代码：

<htm>
    <head> 
        <meta charset="UTF-8"> 
        <title>【每日一练】64-CSS实现彩虹文字的动画效果</title> 
    </head>
    <body>
        <h1 data-text= "web前端开发">web前端开发</h1>   
    </body>
</htm>

CSS代码：

h1{
    font-family:sans-serif;
    text-transform: lowercase;
    font-size: 12rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    position: relative;
    background: #333;
    color: #000;
  }
  
  h1:before{
    content: attr(data-text);
    position: absolute;
    background: linear-gradient( #9b5de5, #f15bb5, #fee440,#00bbf9, #00f5d4,#9b5de5);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 90%;
    line-height: 1.2;
    clip-path: ellipse(150px 150px at -2.54% -9.25%);
    animation: swing 3s infinite;
    animation-direction: alternate;
  }
  @keyframes swing{
    0%{
       -webkit-clip-path: ellipse(150px 150px at -2.54% -9.25%)
      clip-path: ellipse(150px 150px at -2.54% -9.25%)
    }
    50%{
      -webkit-clip-path: ellipse(150px 150px at 49.66% 64.36%);
      clip-path: ellipse(150px 150px at 49.66% 64.36%);
  
    }
    100%{
       -webkit-clip-path: ellipse(150px 150px at 102.62% -1.61%;);
      clip-path: ellipse(150px 150px at 102.62% -1.61%);
    }
  }
  p{
    color:#222;
    text-align:center;
    font-size:22px;


  }

写在最后

以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

PS：关于这个文本动画的效果，我在视频号上也分享了一些，还没有关注我视频号的小伙伴，请记得一点要去关注一下，以免错过我的每一期案例分享。

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】64—CSS实现彩虹文字的动画效果

写在前面最近有好几个小伙伴来问我，说【每日一练】里的gif动画是用什么软件录制的，在这里，我统一说一下，我录gif动画的工具是，LICEcap，录出来的文件，是默认为gif格式的。在这里，我也把这个gif录屏软件分享给大家，如果有需要的小伙伴，请自行下载获取：下载地址：https://url81.ctfile.com/f/21793581-671158336-3e11c7?p=2698密码: ...
复制链接

扫一扫