css3制作的背景渐变动画效果

  发布时间:2021-04-07 16:58:25   作者:lKBaJ   我要评论
这篇文章主要介绍了css3实现的加载动画效果,帮助大家更好的利用css3制作网页,感兴趣的朋友可以了解下

实现效果

实现代码

html

<h1 class="text-light">Pure CSS Animated Gradient Background</h1>

<div class="btn-group mt-2 mb-4" role="group" aria-label="actionButtons">
	<a href="https://codepen-api-export-production.s3.us-west-2.amazonaws.com/zip/PEN/pyBNzX/1578778289271/pure-css-gradient-background-animation.zip" class="d-block btn btn-outline-light" download><i class="fas fa-file-download mr-2"></i>Download Source</a>
	<a href="https://manuelpinto.in" target="_blank" class="d-block btn btn-outline-light">Visit my Website<i class="fas fa-external-link-square-alt ml-2"></i></a>
</div>

<h6 class="text-light small font-weight-bold"><i class="fas fa-code"></i> with <i class="fas fa-heart"></i> by Manuel Pinto</h6>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" integrity="sha256-qM7QTJSlvtPSxVRjVWNM2OfTAz/3k5ovHOKmKXuYMO4=" crossorigin="anonymous"></script>

css3

body {
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

以上就是css3实现的加载动画效果的详细内容,更多关于css3 加载动画的资料请关注脚本之家其它相关文章!

相关文章

  • css3实现背景图片半透明内容不透明的方法示例

    这篇文章主要介绍了css3实现背景图片半透明内容不透明的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小
    2021-04-13
  • css3实现背景图片颜色修改的多种方式

    这篇文章主要介绍了css3实现背景图片颜色修改的多种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2021-04-13
  • CSS3实现模糊背景的三种效果示例

    这篇文章主要介绍了CSS3实现模糊背景的三种效果示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2021-03-29
  • CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

    这篇文章主要介绍了CSS3 菱形拼图实现只旋转div 背景图片不旋转功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-29
  • CSS3只让背景图片旋转180度的实现示例

    这篇文章主要介绍了CSS3只让背景图片旋转180度的实现示例。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一
    2021-03-09
  • 基于css3制作的圆形透明画中画视频播放特效

    圆形透明画中画视频播放特效是一款基于css3制作的创意透明圆形层mp4视频播放特效代码。
    2020-12-17
  • JS+CSS3文章内容背景黑白切换特效代码

    JS+CSS3文章内容背景黑白切换特效代码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
    2020-11-27
  • css3实现简单的白云飘动背景特效

    这篇文章主要介绍了css3实现简单的白云飘动背景特效的示例,帮助大家制作网页特效,美化自己的网站,感兴趣的朋友可以了解下
    2020-10-28
  • CSS3 实现的动态星空背景

    这篇文章主要介绍了CSS3 实现的动态星空背景的示例代码,帮助大家更好的理解和学习制作CSS3特效,感兴趣的朋友可以了解下
    2021-04-22

最新评论