css实现电风扇动画效果
代码语言:html
所属分类:动画
代码描述:css实现电风扇动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; } body { -webkit-box-align: center; align-items: center; background: #CBE6F2; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; } .fan { height: 200px; position: relative; width: 160px; } .head { -webkit-box-align: center; align-items: center; -webkit-animation-name: rotateHead; animation-name: rotateHead; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; border: 3px solid black; border-radius: 50%; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; height: 160px; position: relative; -webkit-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 160px; z-index: 1; } .head::before, .head::after { border: 3px solid #333; border-radius: 50%; content: ''; height: 100%; position: absolute; -webkit-transform: scale(0.9, 0.9) translateZ(-5px); transform: scale(0.9, 0.9) translateZ(-5px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; } .head::after { border: 3px solid #555; -webkit-transform: scale(0.8, 0.8) translateZ(-10px); transform: scale(0.8, 0.8) translateZ(-10px); } .blades { -webkit-animation-name: rotateBlades; animation-name: rotateBlades; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; height: 80%; position: relative; width: 80%; } .blades::before, .blades::after { background: black; box-shadow: inset -4px -12px 2px 2px #444; border-radius: 50%; content: ''; height: 50%; position: absolute; width: 25%; } .blades::after { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .blades::before { right: 50%; -webkit-transform: rotate(240deg) translate(-20%, 20%); transform: rotate(240deg) translate(-20%, 20%); -webkit-transform-origin: bottom; transform-origin: bottom; } .blades .blade-inner::before { background: black; border-radius: 50%; box-shadow: 0 0 0 5px #CBE6F2; content: ''; height: 15%; left: 50%; position: absolute; top: 50%; -webkit-tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0