html+css 动态渐变背景

html-css017

html+css 动态渐变背景,第1张

先给背景设置了渐变颜色并且旋转一定角度,实现斜着的渐变效果。

接下来把背景放大500%,然后设置了一个15秒的动画,动画infinite无限循环。

动画部分就是对背景进行一个定位,实现渐变颜色的动态切换。

html结构

css样式

gitee地址: siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)

1.渐变动画背景

body {

background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)

background-size: 400% 400%

animation: gradient 15s ease infinite

height: 100vh

}

@keyframes gradient {

0% {

background-position: 0% 50%

}

50% {

background-position: 100% 50%

}

100% {

background-position: 0% 50%

}

}

2.浮动动画效果

div {

box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6)

transform: translatey(0px)

animation: float 6s ease-in-out infinite

}

@keyframes float {

0% {

box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6)

transform: translatey(0px)

}

50% {

box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2)

transform: translatey(-20px)

}

100% {

box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6)

transform: translatey(0px)

}

}

<div class="change">

</div>

<style>

.change {

animation: change 9s steps(1) infinite

background-repeat: no-repeat

background-position: center center

background-size: 100% auto

width: 200px

height: 100px

}

@keyframes change {

0% {

background-image: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png)

}

33% {

background-image: url(https://www.duhongwei.site/img/201809/s1.png)

}

66% {

background-image: url(https://p4.ssl.qhimg.com/t01fcaa9d8a4d24b5f1.png)

}

}

</style>

纯 css 每3秒播一张图片。9s是总共时间,如果是4张图片这里写 12s