好Q啼的头像,说好的波浪捏,浪到哪里去了,别急,静静欣赏动态效果:链接:https://pan.baidu.com/s/1gfAM3y7 密码:wxn6
技术:
1、css water wave 实现波浪效果
2、css translateY 实现上下移动
3、css rotate 实现左右滚动
4、你可以根据时间不同设定不同速度,自由选择
@keyframes move_wave {
0% {
transform: translateX(0) translateZ(0) scaleY(1)
}
50% {
transform: translateX(-25%) translateZ(0) scaleY(0.55)
}
100% {
transform: translateX(-50%) translateZ(0) scaleY(1)
}
}
.waveAnimation .waveTop {
animation: move-wave 3s;
-webkit-animation: move-wave 3s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
@-webkit-keyframes bounce-down {
25% {
-webkit-transform: translateY(-10px);
}
50%, 100% {
-webkit-transform: translateY(0);
}
75% {
-webkit-transform: translateY(10px);
}
}
@keyframes bounce-down {
25% {
transform: translateY(-10px);
}
50%, 100% {
transform: translateY(0);
}
75% {
transform: translateY(10px);
}
}
.animate-bounce-down{
-webkit-animation: bounce-down 2.3s linear infinite;
animation: bounce-down 2.3s linear infinite;
}
@keyframes bounce-rotate {
25% {
transform:rotate(-25deg);
}
50%, 100% {
transform:rotate(-0deg);
}
75% {
transform:rotate(75deg);
}
}
.animate-bounce-rotate{
animation: bounce-rotate 8.3s linear infinite;
}
需要所有源代码,可加QQ490647751回复‘CSS3高仿百度外卖头像波浪效果’获取。