css 雪人动画
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { background: lightblue; display: flex; flex-direction: column; justify-content: center; align-items: center; flex: 1 1 100%; } .hat { position: relative; z-index: 1; background: black; width: 80px; height: 60px; transform: rotate(25deg); margin-left: 45px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; } .hat .border { background: black; width: 120px; height: 20px; } .circle { position: relative; background: white; border-radius: 50%; margin-top: -30px; } .circle.-head { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; } .circle.-body { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .circle.-legs { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; } .circle.-legs .button + .button { margin-top: 20px; } .circle .arm { background: white; border-radius: 50%; width: 50px; height: 50px; animation: shakeArms 2s linear 0s infinite alternate; position: absolute; transform: translateY(-50%); } .circle .arm:first-of-type { left: -40px; } .circle .arm:last-of-type { right: -40px; animation-delay: -2s; } @keyframes shakeArms { 0% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0