css实现小黄鸭鸭子跳舞动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现小黄鸭鸭子跳舞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ overflow:hidden; animation: colorChange 3.6s infinite linear both; } @keyframes colorChange{ 0%{ background-color: #ddf08b; } 20%{ background-color: #edb272; } 40%{ background-color: #ed8272; } 60%{ background-color: #e0a6d2; } 80%{ background-color: #a2aceb; } 100%{ background-color: #a2ebcb; } } .container{ width:100vw; height:100vh; display: flex; justify-content: center; align-items: center; } .chick{ display: flex; flex-direction:column; justify-content: center; align-items: center; position: relative; } .face{ width:40vmin; height:35vmin; border-radius:50%; background-color: #f6f350; border-top:1vmin solid #974549; border-left:1vmin solid #974549; border-right:1vmin solid #974549; position: relative; animation: dance 0.6s infinite both; } .face:after{ content:""; width:42vmin; height:25vmin; border-radius:40% 40% 50% 50%; background-color: #f6f350; border-bottom:1vmin solid #974549; border-left:1vmin solid #974549; border-right:1vmin solid #974549; position: absolute; bottom:-10vmin; left:-3vmin; } .l-face-cover{ width:20vmin; height:12vmin; background-color: #f6f350; position: absolute; top:12vmin; left:1vmin; z-index: 2; } .r-face-cover{ width:20vmin; height:12vmin; background-color: #f6f350; position: absolute; top:12vmin; right:1vmin; z-index: 2; } .l-eye, .r-eye{ width:3vmin; height:6vmin; border-radius:50%; background-color: #86252d; position: absolute; top:18vmin; z-index: 3; } .l-eye{ left:13vmin; } .r-eye{ right:13vmin; } .beak{ width:10vmin; height:8vmin; border-radius:49% 51% 49% 51% / 75% 77% 23% 25% ; border:1vmin solid #974549; background-color: #d4ae41; position: absolute; top:25vmin; left:14vmin; z-index: 2; } .l-feather, .r-feather{ width:3vmin; height:10vmin; border-radius:50% 50% 0 0; background-color: #f1ed51; border:0.5vmin solid #974549; position: absolute; top:-10vmin; } .l-feather{ left:15vmin; } .r-feather{ right:17.3vmin; } .body{ width:40vmin; height:25vmin; border-radius:50%; background-color: #f6f350; border:1vmin solid #9d4e3d; position: relative; top:3vmin; z-index: -1; animation: bodyMoves 0.6s alternate 0.3s infinite linear both; } .l-leg, .r-leg{ width:5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0