css实现甩尾巴的小猫咪动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现甩尾巴的小猫咪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <style> @keyframes tail { 6.6666666667% { transform:rotate(0); } 10% { transform:rotate(10deg); } 16.6666666667% { transform:rotate(-5deg); } 20% { transform:rotate(30deg); } 26.6666666667% { transform:rotate(-2deg); } 46.6666666667% { transform:rotate(10deg); } 53.3333333333% { transform:rotate(-5deg); } 56.6666666667% { transform:rotate(10deg); } }@keyframes body { 6.6666666667% { transform:scaleY(1); } 10% { transform:scaleY(1.15); } 16.6666666667% { transform:scaleY(1); } 20% { transform:scaleY(1.25); } 26.6666666667% { transform:scaleY(1); } 46.6666666667% { transform:scaleY(1.15); } 53.3333333333% { transform:scaleY(1); } 56.6666666667% { transform:scaleY(1.15); } }@keyframes left-whisker { 6.6666666667% { transform:rotate(0); } 10% { transform:rotate(0deg); } 16.6666666667% { transform:rotate(-5deg); } 20% { transform:rotate(0deg); } 26.6666666667% { transform:rotate(0deg); } 46.6666666667% { transform:rotate(10deg); } 53.3333333333% { transform:rotate(-5deg); } 56.6666666667% { transform:rotate(10deg); } }@keyframes right-whisker { 6.6666666667% { transform:rotate(180deg); } 10% { transform:rotate(190deg); } 16.6666666667% { transform:rotate(180deg); } 20% { transform:rotate(175deg); } 26.6666666667% { transform:rotate(190deg); } 46.6666666667% { transform:rotate(180deg); } 53.3333333333% { transform:rotate(185deg); } 56.6666666667% { transform:rotate(175deg); } }@keyframes left-ear { 0% { transform:rotate(-20deg); } 6.6666666667% { transform:rotate(-6deg); } 13.3333333333% { transform:rotate(-15deg); } 26.6666666667% { transform:rotate(-15deg); } 33.3333333333% { transform:rotate(-30deg); } 40% { transform:rotate(-30deg); } 46.6666666667% { transform:rotate(0deg); } 53.3333333333% { transform:rotate(0deg); } 60% { transform:rotate(-15deg); } 80% { transform:rotate(-15deg); } 93.3333333333% { transform:rotate(-6deg); } 100% { transform:rotateZ(-6deg); } }@keyframes right-ear { 0% { transform:rotateZ(-16deg); } 6.6666666667% { transform:rotateZ(-16deg); } 13.3333333333% { transform:rotateZ(-19deg); } 26.6666666667% { transform:rotateZ(-19deg); } 33.3333333333% { transform:rotateZ(-30deg); } 36.6666666667% { transform:rotateZ(-19deg); } 37.3333333333% { transform:rotateZ(-30deg); } 38% { transform:rotateZ(-19deg); } 40% { transform:rotateZ(-19deg); } 40.6666666667% { transform:rotateZ(-30deg); } 41.3333333333% { transform:rotateZ(-19deg); } 46.6666666667% { transform:rotateZ(-9deg); } 53.3333333333% { transform:rotateZ(-9deg); } 60% { transform:rotateZ(-19deg); } 60.6666666667% { transform:rotateZ(-30deg); } 61.3333333333% { transform:rotateZ(-19deg); } 62.6666666667% { transform:rotateZ(-19deg); } 63.3333333333% { transform:rotateZ(-30deg); } 64% { transform:rotateZ(-19deg); } 80% { transform:rotateZ(-19deg); } 93.3333333333% { transform:rotateZ(-16deg); } 100% { transform:rotateZ(-16deg); } }body { background-color:#abe7db; display:flex; justify-content:center; align-items:center; height:100vh; } .main { height:400px; width:400px; position:relative; } .main .stand { position:absolute; top:50%; left:50%; transform:translate(-50%); height:20px; width:200px; border-radius:20px; background-color:#fd6e72; z-index:2; } .main .stand::after { content:""; position:absolute; bottom:-10px; left:50%; transform:translate(-50%); height:10px; width:50px; border-radius:20px; background-color:#fdf9de; box-shadow:0 10px 0 #fdf9de,0 20px 0 #fdf9de,0 30px 0 #fdf9de,0 40px 0 #fdf9de,0 50px 0 #fdf9de,0 60px 0 #fdf9de,0 70px 0 #fdf9de,0 80px 0 #fdf9de,0 90px 0 #fdf9de,0 100px 0 #fdf9de,0 110px 0 #fdf9de,0 120px 0 #fdf9de,0 130px 0 #fdf9de,0 140px 0 #fdf9de,0 150px 0 #fdf9de,0 160px 0 #fdf9de,0 17.........完整代码请登录后点击上方下载按钮下载查看
网友评论0