css实现一个大风车旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个大风车旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}:root { --sun-color: #FFBB10; --sky-color-1: #FBD788; --sky-color-2: #FFEFC0; --sky-color-3: #E8BF62; --land-color-1: #62B144; --land-color-2: #3D9339; --grass-color-1: #37913B; --grass-color-2: #8BC435; --brick-color-1: #D58256; --brick-color-2: #CD7555; --wood-color-1: #623B39; --wood-color-2: #472A2A; --wood-color-3: #2E1D1D; --wood-color-4: #000000; --window-color-1: #E3E1E1; --window-color-2: #000000; --window-color-3: #FFFFFF; --mill-top-color: #C0C0C0; --mill-bottom-color-1: #8F3C31; --mill-bottom-color-2: #9C4B3D; --dome-color: #FFFFFF; --blade-color-1: #FD903D; --blade-color-2: #BE684F; --window-move-time: 2s; --land-slide-time: 2s; --blades-spin-time: 6s; } @-webkit-keyframes window-move { 0% { top: 47%; } 100% { top: 53%; } } @keyframes window-move { 0% { top: 47%; } 100% { top: 53%; } } @-webkit-keyframes window-bottom-move { 0% { -webkit-transform: scale(1); transform: scale(1); top: 0px; } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); top: -10px; } } @keyframes window-bottom-move { 0% { -webkit-transform: scale(1); transform: scale(1); top: 0px; } 100% { -webkit-transform: scale(1.1); transform: scale(1.1); top: -10px; } } @-webkit-keyframes blades-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes blades-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes land-slide { 0% { -webkit-transform: translateX(-50%) scale(0.95); transform: translateX(-50%) scale(0.95); } 100% { -webkit-transform: translateX(-50%) scale(1.05); transform: translateX(-50%) scale(1.05); } } @keyframes land-slide { 0% { -webkit-transform: translateX(-50%) scale(0.95); transform: translateX(-50%) scale(0.95); } 100% { -webkit-transform: translateX(-50%) scale(1.05); transform: translateX(-50%) scale(1.05); } } body { width: 100vw; height: 100vh; margin: 0; } * { position: absolute; box-sizing: border-box; } *::before, *::after { content: ''; position: inherit; box-sizing: inherit; } .window { width: 540px; height: 540px; left: 50%; top: 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); border-radius: 50%; background: radial-gradient(farthest-side at 135px 340px, var(--sky-color-2) 135px, transparent 135px), radial-gradient(farthest-side at 405px 300px, var(--sky-color-1) 140px, transparent 135px), linear-gradient(to bottom, var(--sky-color-1) 320px, var(--sky-color-2) 320px); -webkit-animation: window-move var(--window-move-time) ease-in-out infinite alternate; animation: window-move var(--window-move-time) ease-in-out infinite alternate; } .window::before { bottom: 0; left: 0; top: 0; right: 0; background: linear-gradient(to bottom, transparent 490px, var(--sky-color-3) 490px, var(--sky-color-3) 510px, var(--sky-color-1) 510px); border-radius: 50%; -webkit-animation: window-bottom-move var(--window-move-time) ease-in-out infinite alternate; animation: window-bottom-move var(--window-move-time) ease-in-out infinite alternate; } .land { width: 460px; height: 40px; background: var(--land-color-1); bottom: 40px; left: 50%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); border-radius: 20px 20px 5px 5px; border-bottom: 5px solid var(--land-color-2); z-index: 2; -webkit-animation: land-slide var(--land-slide-time) ease-in-out infinite alternate; animation: land-slide var(--land-slide-time) ease-in-out infinite alternate; } .grass { background: transparent; bottom: 80px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .grass-1 { z-index: 1; width: 60px; height: 30px; border-radius: 30px 30px 0 0; } .grass-2 { z-index: 2; width: 40px; height: 20px; border-radius: 20px 20px 0 0; } .grass-1 { box-shadow: -90px 0 0 0 var(--grass-color-1), -130px 4px 0 -4px var(--grass-color-1), -165px 8px 0 -8px var(--grass-color-1), 90px 0 0 0 var(--grass-color-1), 140px 4px 0 -4px var(--grass-color-1), 165px 8px 0 -8px var(--grass-color-1); } .grass-2 { box-shadow: -90px 0 0 0 var(--grass-color-2), -60px 2px 0 -2px var(--grass-color-2), -35px 5px 0 -5px var(--grass-color-2), 90px 0 0 0 var(--grass-color-2), 60px 2px 0 -2px var(--grass-color-2), 35px 5px 0 -5px var(--grass-color-2); } .windmill { width: 180px; height: 280px; left: 50%; bottom: 80px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; } .windmill::before { top: 0px; background: var(--mill-top-color); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 130px; height: 30px; border-radius: 0 0 20px 20px / 0 0 45px 45px; } .windmill::after { bottom: 0px; background: linear-gradient(to bottom, var(--mill-bottom-color-1) 25px, var(--mill-bottom-color-2) 25px, var(--mill-bottom-color-2) 45px, var(--mill-bottom-color-1) 45px); width: 100%; height: 50px; } .windmill-window { left: 50%; top: 38%; -webkit-transform: translate(-50%, -50%) scale(0.85, 0.95); transform: translate(-50%, -50%) scale(0.85, 0.95); width: 8px; height: 8px; background: transparent; box-shadow: 5px 25px 0 0 var(--window-color-2), -5px 25px 0 0 var(--window-color-2), 5px 35px 0 0 var(--window-color-2), -5px 35px 0 0 var(--window-color-2), 0 30px 0 5px var(--window-color-1), 0 30px 0 8px var(--window-color-3), 5px -25px 0 0 var(--window-color-2), -5px -25px 0 0 var(--window-color-2), 5px -35px 0 0 var(--window-color-2), -5px -35px 0 0 var(--window-color-2), 0 -30px 0 5px var(--window-color-1), 0 -30px 0 8px var(--window-color-3); } .pillar { background-image: linear-gradient(335deg, var(--brick-color-2) 6px, transparent 6px), linear-gradient(155deg, var(--brick-color-2) 6px, transparent 6px), linear-gradient(335deg, var(--brick-color-2) 6px, transparent 6px), linear-gradient(155deg, var(--brick-color-2) 6px, transparent 6px).........完整代码请登录后点击上方下载按钮下载查看
网友评论0