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 实现定价表的示例代码,帮助大家更好的理解和学习使用css3,感兴趣的朋友可以了解下
    2021-04-06
  • 纯CSS3精美3D卡片翻转动画特效

    这是一个纯CSS3卡片翻转动画,点击切换按钮时,卡片就会以翻转的动画效果进行切换,同时卡片上的装饰物也会以淡入淡出和飞入飞出的动画进行切换,简单唯美,欢迎下载
    2021-03-30
  • css3 filter属性的使用简介

    这篇文章主要介绍了css3 filter属性的使用简介,帮助大家更好的理解和学习使用css3,感兴趣的朋友可以了解下
    2021-03-30
  • CSS3点击按钮圆形进度打钩效果的实现代码

    这篇文章主要介绍了CSS3点击按钮圆形进度打钩效果的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-30
  • CSS3实现模糊背景的三种效果示例

    这篇文章主要介绍了CSS3实现模糊背景的三种效果示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2021-03-29
  • CSS3通过var()和calc()函数实现动画特效

    这篇文章主要介绍了CSS3通过var()和calc()函数实现动画特效,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-29
  • CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

    这篇文章主要介绍了CSS3 菱形拼图实现只旋转div 背景图片不旋转功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-29
  • CSS3实现的六边形波纹加载动画特效源码

    是一段基于CSS3实现的扁平的六边形波纹图形加载动画效果代码,同时还带有LOADING字样,是一种非常新鲜的页面加载特效,欢迎有兴趣的朋友前来下载使用
    2021-03-26
  • 基于js+css3文章列表喜欢点赞按钮特效源码

    基于css3文章列表喜欢点赞按钮特效源码简单的js css3制作文章列表点击按钮喜欢或收藏功能。爱心点赞按钮数量累计特效,非常不错,喜欢的朋友快来下载吧
    2021-03-24

最新评论