网站建设之渐变背景有动画效果css3来实现

WP网站建设利用css背景渐变来做动画,很多动画效果有个不好的地方就是体积很大,很影响网页的打开速度,渲染程度比较高,很慢,这个动画效果就很轻巧,很好用;WP网站建设极力推荐。 Gradient Background Animation 动画效果原地址 html代码 Pure CSS3 Animated Gr WP网站建设

WordPress网站建设

WordPress网站建设利用css背景渐变来做动画,很多动画效果有个不好的地方就是体积很大,很影响网页的打开速度,渲染程度比较高,很慢,这个动画效果就很轻巧,很好用;WordPress网站建设极力推荐。

Gradient Background Animation 动画效果原地址

html代码

<h1>Pure CSS3 Animated Gradient Background</h1>

 

css代码

body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}

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

h1,
h6 {
font-family: 'Open Sans';
font-weight: 300;
text-align: center;
position: absolute;
top: 45%;
right: 0;
left: 0;
}

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/11189

发表评论

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