网页中的一些小特效css3

qq_Achen

于 2019-10-16 14:38:07 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

分类专栏：网页

本文链接：https://blog.youkuaiyun.com/qq_26173001/article/details/102585180

网页专栏收录该内容

16 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>