背景颜色呼吸效果

最新推荐文章于 2025-03-17 10:43:51 发布

A孙大壮

最新推荐文章于 2025-03-17 10:43:51 发布

阅读量549

点赞数

文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/sunxiaobai1/article/details/122862699

版权

该博客演示了一个使用CSS实现的背景动画效果，通过`linear-gradient`和`background-position`配合`@keyframes`动画，创建了一个从左到右的背景颜色平移效果。代码中展示了如何设置背景颜色、大小、重复方式以及动画的定义，适用于网页动态背景设计。

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

1.演示地址

https://animista.net/play/background/bg-pan

2.代码

.bg-pan-left {
    background-image: linear-gradient( 
90deg,#3e91cc,#2dcca7);
    background-size: 200%;
    background-repeat: repeat;
    animation: bg-pan-right 1.2s infinite both;
    animation-direction: alternate;
}
@keyframes bg-pan-left {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}