纯css实现动态渐变背景

纯css实现动态渐变背景先看看最终效果这个效果非常简单,只要看完实现原理应该就是有思路了。原理规定好容器尺寸设置渐变背景: background: linear-gra

大家好,欢迎来到IT知识分享网。

先看看最终效果

纯css实现动态渐变背景

这个效果非常简单,只要看完实现原理应该就是有思路了。

原理

纯css实现动态渐变背景

  1. 规定好容器尺寸
  2. 设置渐变背景: background: linear-gradient(…) 自己设置角度和颜色吧
  3. 设置背景尺寸比容器大几倍:background-size: 600% 600%;
  4. 搞个循环动画,控制背景移动:background-position

动手实现

直接上代码,对照着 『原理』注释 相信你一定能学废。

<!-- 容器 -->
<div class="gradient"></div>

<style>
.gradient {
    /* 设置容器尺寸 - 原理1 */
    width: 400px;
	height: 400px;
    /* 背景渐变色 - 原理2 */
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	/* 背景尺寸 - 原理3 */
    background-size: 600% 600%;
    /* 循环动画 - 原理4 */
	animation: gradientBG 5s ease infinite;
  }

  /* 动画,控制背景 background-position */
  @keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
</style>

奇思妙想

本例如果不用动画自动播放,可以结合鼠标移动做交互参考系。

通过鼠标当前所在位置控制背景色的渐变效果。

这大概也是视差效果的一种吧,可以结合《视差特效的原理和实现方法》 的原理实现。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/54402.html

(0)
上一篇 2024-04-30 18:17
下一篇 2024-05-07 07:33

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信