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)
}
}
创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（如hover）时才能获取样式，这样就会产生过渡动画。
