纯css布局实现努力工作的动画效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现努力工作的动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* Reset */ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; transform-style: preserve-3d; } /* Generic */ body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #0F1316; } .main { position: relative; width: 55vmax; height: 45vmax; background-size: cover; } /**/ .human { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: absolute; bottom: 2.5vmax; left: 27.5%; width: 21vmax; height: 30vmax; z-index: 1000; } .human__head { position: relative; display: flex; justify-content: center; width: 25%; height: 6vmax; z-index: 6000; } .human__head::before { content: ''; position: absolute; width: .2vmax; height: .4vmax; bottom: 13%; border-radius: 50%; background-color: #2E2250; z-index: 2000; } .human__hair-b { position: absolute; top: -4%; width: 7vmax; height: 6vmax; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 40%; border-bottom-right-radius: 40%; background-color: #2E2250; } .human__hair-b::before, .human__hair-b::after { content: ''; position: absolute; width: 7vmax; height: 7vmax; border-top-left-radius: 40%; border-top-right-radius: 40%; border-bottom-left-radius: 30%; border-bottom-right-radius: 30%; background-color: #2E2250; border-left: 1vmax solid #423352; animation: hair 1s infinite alternate; } .human__hair-b::before { transform: rotateZ(-20deg); } .human__hair-b::after { transform: rotateZ(20deg); } .human__hair-c { position: absolute; top: -5%; z-index: -1; width: 110%; height: 1.5vmax; overflow: hidden; border-radius: 50%; } .human__hair { width: 100%; height: 3vmax; background-color: #2E2250; border-radius: 50%; } .human__face { position: absolute; display: flex; justify-content: center; top: 7%; height: 90%; width: 65%; border-radius: 45%; background-color: #FFC4C5; border-bottom: 0.6vmax solid #2E2250; border-left: 0.15vmax solid #2E2250; border-right: 0.15vmax solid #2E2250; } .human__eye-l, .human__eye-r { position: absolute; top: 45%; width: .3vmax; height: .5vmax; background-color: #2E2250; border-radius: 50%; animation: eye 4s infinite alternate; } .human__eye-l { left: 22%; } .human__eye-r { right: 22%; } .human__nose { position: absolute; width: .5vmax; height: 1.5vmax; bottom: 20%; border-radius: 50%; background-color: #FFA0A5; } .human__cheeks-l, .human__cheeks-r { position: absolute; bottom: 8%; width: .8vmax; height: .9vmax; background-color: #FFB1B4; border-radius: 50%; } .human__cheeks-l { left: 10%; } .human__cheeks-r { right: 10%; } .human__mouth { position: absolute; bottom: 10%; width: .8vmax; height: 1vmax; border-bottom: 0.15vmax solid #600004; border-radius: 50%; } .human__eyebrow-l, .human__eyebrow-r { position: absolute; top: 30%; width: 1vmax; height: .8vmax; border-top: 0.15vmax solid #2E2250; border-radius: 50%; } .human__eyebrow-l { left: 10%; } .human__eyebrow-r { right: 10%; } .human__ears { position: absolute; justify-content: space-between; top: 8%; width: 21%; } .human__ear-l, .human__ear-r { position: absolute; top: 30%; width: 1vmax; height: 1vmax; border-radius: 50%; background-color: #FFA0A5; } .human__ear-l { left: 0%; } .human__ear-r { right: 0%; } .human__body-c { display: flex; justify-content: center; position: absolute; top: 17%; width: 100%; height: 11vmax; overflow: hidden; z-index: -1; } .human__body { position: relative; display: flex; justify-content: center; width: 96%; height: 22vmax; border-radius: 50%; border-left: 0.9vmax solid #FF9B5A; border-right: 1vmax solid #FF4624; background: linear-gradient(135deg, #FF4624 25%, transparent 25%) -1vmax 0, linear-gradient(225deg, #FF4624 25%, transparent 25%) -1vmax 0, linear-gradient(315deg, #FF4624 25%, transparent 25%), linear-gradient(45deg, #FF4624.........完整代码请登录后点击上方下载按钮下载查看
网友评论0