纯css实现程序员的闭关修行动画
代码语言:html
所属分类:动画
代码描述:纯css实现程序员的闭关修行动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; } .container { background: #ffb02f; position: relative; width: 100%; height: 56.25vw; } .container div { background: black; position: absolute; transform-origin: 0 50%; } .container .lcd-light { border-radius: 0; left: 18.23vw; top: 19.79vw; width: 10.42vw; height: 18.75vw; background: radial-gradient(at center left, white, transparent 75%); background: -moz-radial-gradient(center left, white, transparent 75%); background: -webkit-radial-gradient(center left, white, transparent 75%); transform: rotate(-10deg); animation: monitorFlash 0.08s steps(2) infinite alternate; } .container .lcd-light::before, .container .lcd-light::after { border: 0; content: ""; display: block; position: absolute; } .container .lcd-light::before { border-bottom: 6.25vw solid transparent; border-left: 10.42vw solid #ffb02f; } .container .lcd-light::after { border-top: 3.65vw solid transparent; border-left: 9.38vw solid #ffb02f; bottom: 0; } .container .monitor { border-radius: 1.04vw; left: 16.67vw; top: 23.96vw; width: 11.46vw; height: 2.08vw; transform: rotate(80deg); } .container .monitor-neck { border-radius: 0; left: 14.58vw; top: 35.42vw; width: 3.65vw; height: 1.04vw; transform: rotate(-40deg); } .container .monitor-base { border-radius: 3.13vw 3.13vw 0 0; left: 11.46vw; top: 35.42vw; width: 6.25vw; height: 3.13vw; } .container .desk { border-radius: 2.08vw; left: 8.33vw; top: 38.02vw; width: 18.23vw; height: 3.13vw; } .container .tower { border-radius: 1.04vw; left: 8.33vw; top: 42.19vw; width: 15.63vw; height: 9.9vw; } .container .tower::before { background-color: #ffb02f; background-image: repeating-linear-gradient(transparent, transparent 0.52vw, black 0.52vw, black 1.04vw), repeating-linear-gradient(90deg, transparent, transparent 0.52vw, black 0.52vw, black 1.04vw); content: ""; display: block; position: absolute; top: 2.08vw; right: 2.08vw; width: 3.65vw; height: 2.6vw; } .container .chair-back { border-radius: 2.08vw; left: 38.54vw; top: 40.63vw; width: 9.9vw; height: 3.13vw; transform: rotate(-80deg); } .container .chair-bottom { border-radius: 2.08vw; left: 29.69vw; top: 43.23vw; width: 9.9vw; height: 3.13vw; } .container .clock { border-radius: 50%; left: 44.79vw; top: 6.25vw; width: 8.85vw; height: 8.85vw; background: white; border: 1.82vw solid black; } .container .hour, .container .minute { will-change: transform; } .container .hour { border-radius: 1.04vw; left: 3.65vw; top: 1.56vw; width: 1.56vw; height: 3.65vw; transform-origin: 0.78vw 2.86vw; transform: rotate(135deg); animation: hrHand 4s linear infinite; } .container .minute { border-radius: 1.04vw; left: 3.65vw; top: 0.78vw; width: 1.56vw; height: 4.43vw; transform-origin: 0.78vw 3.65vw; animation: minHand 0.3333333333s linear infinite; } .container .pillow { border-radius: 2.08vw; left: 85.94vw; top: 40.63vw; width: 8.33vw; height: 3.13vw; transform: rotate(-35deg); } .container .bed { border-radius: 2.08vw 2.08vw 0.52vw 0.52vw; left: 54.69vw; top: 43.23vw; width: 29.69vw; height: 5.21vw; background: transparent; border-top: 3.13vw solid black; border-right: 3.13vw solid black; border-left: 3.13vw solid black; } .container .human-wrapper { transform: translate(68.75vw, 23.44vw); will-change: transform; animation: bodyMove 8s linear infinite; } .container .human { background: transparent; border-radius: 0; left: 0; top: 0; width: 6.25vw; height: 20.31vw; transform-origin: 3.13vw 17.71vw; transform: rotate(90deg); animation: bodyRotate 8s linear infinite; } .container .human div { will-change: transform; } .container .head { border-radius: 50%; left: 0; top: 0; width: 6.25vw; height: 6.25vw; transform: translate(-2.86vw, 0.78vw); animation: headMove 8s linear infinite; } .container .eyes { background: transparent; width: 3.13vw; height: 1.04vw; top: 2.08vw; left: 2.34vw; transform-origin: 50% 50%; transform: rotate(-55deg); anima.........完整代码请登录后点击上方下载按钮下载查看
网友评论0