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)
}
}
先给背景设置了渐变颜色并且旋转一定角度，实现斜着的渐变效果。接下来把背景放大500%，然后设置了一个15秒的动画，动画infinite无限循环。
动画部分就是对背景进行一个定位，实现渐变颜色的动态切换。
html结构
css样式
gitee地址： siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)
