div+css实现纸质风车旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现纸质风车旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; overflow: hidden; } @keyframes wind { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .container:after { width: 10px; height: 50vh; background-color: orange; position: absolute; content: ""; left: 0; right: 0; top: 50%; margin: auto; z-index: 0; } .pinwheel { display: flex; flex-wrap: wrap; height: 100vh; transform-origin: center; animation: wind 2.5s linear infinite; z-index: 99; position: relative; } .pinwheel:before { position: absolute; content: ""; width: 30px; height: 30px; left: 0; right: 0; top: 0; bottom: 0; z-index: 10; margin: auto; border-radius: 100%; background-color: navy; } .pinwheel > div { width: 50%; height: 50vh; position: relative; } .pinwheel > div span { position: absolute; width: 0; height: 0; z-index: 1; border: 0 solid transparent; } .pinwheel > div:first-child span:first-child { border-bottom-width: 88px; border-top-width: 88px; border-right: 50px solid #3874b8; bottom: 0; right: 0; transform-origin: bottom right; transform: rotate(-30.5deg); } .pinwheel > div:first-child span:last-child { border-bottom-width: 150px; border-top-width: 110px; border-right: 90px solid #4eaceb; bottom: 0; right: 0; } .pinwheel > div:nth-child(2) span:first-child { border-bottom-width: 88px; border-top-width: 88px; border-right: 50px solid #.........完整代码请登录后点击上方下载按钮下载查看
网友评论0