网页中的一些小特效css3

最新推荐文章于 2023-05-23 15:41:35 发布

原创最新推荐文章于 2023-05-23 15:41:35 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

网页专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用CSS实现的颜色渐变效果，通过linear-gradient属性从左到右渐变并结合@keyframes动画实现流动视觉效果。示例中展示了如何设置div元素背景渐变色及动画参数。

1、颜色从左到右渐变且有流动效果

<div class="part tx-one"></div>
<style>
.part{height:50px; width:200px; border:1px solid #333;margin:50px auto;}
.tx-one{background-image: linear-gradient(to right, #ff4167, #ff4454, #ff4a30, #ff4167);
    animation: rainbow-border 1.5s linear 0.2s infinite;}
</style>