div+css实现蓝天白云大风车鸟儿飞翔动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现蓝天白云大风车鸟儿飞翔动画效果代码
代码标签: div css 蓝天 白云 大风车 鸟儿 飞翔 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } *, *:after, *:before { box-sizing: border-box; } .wrapper { padding: 20px; background-color: #fff; min-height: 100vh; } .card { width: 700px; height: 525px; position: relative; margin: 0px auto; border-radius: 5px; overflow: hidden; box-shadow: 0 20px 20px -5px rgba(0, 0, 0, 0.3); } picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: 1; overflow: hidden; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#354d8b, #daa85f); } .background:after { content: ""; position: absolute; display: block; top: 10%; height: 90%; width: 110%; left: -5%; transform: rotate(2deg); background: linear-gradient(transparent 1%, rgba(235, 178, 109, 0.1) 10%, rgba(235, 178, 109, 0.4) 100%); } .background:before { content: ""; position: absolute; display: block; top: 40%; height: 60%; width: 110%; left: -5%; transform: rotate(-2deg); background: linear-gradient(transparent 1%, rgba(235, 178, 109, 0.1) 10%, rgba(235, 178, 109, 0.4) 100%); } .mill { position: absolute; z-index: 2; bottom: 14%; left: 44%; width: 24%; height: 50%; } .mill-main { position: absolute; bottom: 0; width: 100%; left: 0; height: 83%; z-index: 2; } .mill-main-base { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-clip-path: polygon(19% 0%, 85% 0%, 99% 100%, 0% 100%); clip-path: polygon(19% 0%, 85% 0%, 99% 100%, 0% 100%); } .mill-main-base:after { content: ""; display: block; position: absolute; top: 10%; left: 0; width: 100%; height: 100%; background: linear-gradient(-85deg, #fcb281, #f3c9b0, #f3c9b0, #f6ba9e); -webkit-clip-path: polygon(14.8% 8%, 85% 8%, 99% 100%, 0% 100%); clip-path: polygon(14.8% 8%, 85% 8%, 99% 100%, 0% 100%); } .mill-main-base-shadow { background-color: #8f8190; position: absolute; top: 10%; left: 0; width: 100%; height: 100%; z-index: 3; -webkit-clip-path: polygon(71.7% 8%, 82% 6%, 86% 8%, 100% 100%, 83% 100%, 78% 15%, 71.7% 13%); clip-path: polygon(71.7% 8%, 82% 6%, 86% 8%, 100% 100%, 83% 100%, 78% 15%, 71.7% 13%); } .mill-main-base-shadow:after { content: ""; display: block; position: absolute; bottom: 0%; right: 0%; width: 5%; height: 30%; background-color: #40465c; border-radius: 50% 0 0 0; transform: rotate(-8deg); } .mill-main-base-shadow:before { content: ""; display: block; position: absolute; right: 3%; bottom: 32%; width: 3%; height: 3%; background-color: #04071a; border-radius: 50%; transform: rotate(-9deg) rotateY(50deg); } .mill-main-base-circle { content: ""; display: block; position: absolute; top: 12%; left: 15%; width: 71%; border-radius: 50%; height: 13%; background: linear-gradient(-85deg, #fcb281, #f3c9b0, #f3c9b0, #f6ba9e); transform: rotate(1deg); overflow: hidden; } .mill-main-base-circle:before { content: ""; display: block; position: absolute; top: 0; right: 0; width: 20%; height: 100%; background-color: #8f8190; } .mill-main-window { position: absolute; top: 0; left: 0; background-color: black; z-index: 2; border-radius: 10px 10px 0 0; overflow: hidden; } .mill-main-window:after { content: ""; display: block; position: absolute; top: 30%; left: 0; height: 40%; width: 100%; border-top: 1px solid #323a53; border-bottom: 1px solid #323a53; } .mill-main-window:before { content: ""; display: block; position: absolute; top: 0; left: 25%; height: 100%; width: 50%; border-left: 1px solid #323a53; border-right: 1px solid #323a53; } .mill-main-window__1 { top: 17%; left: 21%; width: 5%; height: 9%; transform: skewY(-14deg) rotate(5deg); background: linear-gradient(140deg, #935b38, #30150e); } .mill-main-window__2 { top: 37%; left: 22%; width: 7%; height: 10%; transform: skewY(-10deg) rotate(5deg); background: linear-gradient(140deg, #935b38, #30150e); } .mill-main-window__3 { top: 70%; left: 7%; width: 3%; height: 10%; transform: skewY(-10deg) rotate(7deg); background: linear-gradient(140deg, #935b38, #30150e); } .mill-main-window__4 { top: 68%; left: 46%; width: 9%; height: 11%; background: linear-gradient(140deg, #935b38, #30150e 40%); } .mill-main-window__5 { top: 18%; left: 73%; width: 5%; height: 9%; transform: skewY(10deg) rotate(-2deg); background: #030303; } .mill-main-window__5:before, .mill-main-window__5:after { display: none; } .mill-main-window__6 { top: 38%; left: 77%; width: 5%; height: 10%; transform: skewY(10deg) rotate(-2deg); background: #030303; } .mill-main-window__6:before, .mill-main-window__6:after { display: none; } .mill-head { position: absolute; top: 0; left: 0; width: 100%; height: 31%; z-index: 1; } .mill-head-bottom { position: absolute; z-index: 2; position: absolute; height: 40%; width: 67%; left: 17%; bottom: 0; } .mill-head-bottom:before { content: ""; display: block; position: absolute; bottom: 0; left: 0%; width: 100%; height: 60%; z-index: 1; background: linear-gradient(to right, #8b1919, #07080c); } .mill-head-bottom:after { content: ""; display: block; position: absolute; top: 0; left: 0%; z-index: 2; border-radius: 50%; width: 100%; height: 80%; background: linear-gradient(to right, #8b1919, #07080c); } .mill-head-bottom-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: linear-gradient(to right, transparent, transparent 90%, #010506 30%, #010506); background-size: 3%; } .mill-head-bottom-lines:after { position: absolute; content: ""; display: block; height: 130%; width: 3%; left: 15%; top: -55%; transform: rotate(3deg); background: linear-gradient(-260deg, #8e231d, #00070c); } .mill-head-bottom-lines:before { position: absolute; content: ""; display: block; height: 130%; width: 3%; left: 70%; top: -64%; transform: rotate(-3deg); background: #0e0e1a; } .mill-head-top { z-index: 1; position: absolute; z-index: 1; position: absolute; height: 85%; width: 100%; left: 0%; top: 0; } .mill-head-top-bottom { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .mill-head-top-bottom:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #230703, #020400); -webkit-clip-path: polygon(17% 45%, 70% 40%, 100% 70%, 98% 85%, 83% 100%, 20% 95%, 4% 80%); clip-path: polygon(17% 45%, 70% 40%, 100% 70%, 98% 85%, 83% 100%, 20% 95%, 4% 80%); } .mill-head-top-top { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .mill-head-top-top:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: linear-gradient(90deg, #3c2144, #f08d64); -webkit-clip-path: polygon(16% 44%, 52% 10%, 100% 70%, 98% 85%, 83% 100%, 20% 95%, 3% 80%); clip-path: polygon(16% 44%, 52% 10%, 100% 70%, 98% 85%, 83% 100%, 20% 95%, 3% 80%); } .mill-head-top-top:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; background: #9e3f47; -webkit-clip-path: polygon(52% 10%, 100% 70%, 93% 80%); clip-path: polygon(52% 10%, 100% 70%, 93% 80%); } .mill-head-top-top-items { position: absolute; width: 100%; height: 100%; z-index: 1; } .mill-head-top-top-items-item { position: absolute; } .mill-head-top-top-items-item__1 { top: 38%; right: 17%; width: 3%; height: 20%; } .mill-head-top-top-items-item__1:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #010000; } .mill-head-top-top-items-item__1:after { content: ""; display: block; position: absolute; width: 40%; height: 70%; top: -45%; left: 35%; border-radius: 20%; background-color: #010000; transform: rotate(95deg); } .mill-head-top-top-items-item__2 { top: -26%; border-radius: 20%; left: 51%; width: 2%; height: 100%; } .mill-head-top-top-items-item__2:after { content: ""; display: block; position: absolute; width: 40%; height: 70%; top: 0; left: 35%; border-radius: 20%; background-color: #5d1c0a; } .mill-blades { position: absolute; top: 6%; left: 34%; width: 18%; padding-top: 18%; z-index: 3; background-color: #130907; border-radius: 50%; transform: perspective(400px) rotateY(-20deg) translateZ(0); } .mill-blades-base { position: absolute; top: 2%; left: 25%; width: 30%; height: 30%; } .mill-blades-base:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(to right, #8c1c0e, #1e0a0b); } .mill-blades-base:after { content: ""; display: block; position: absolute; top: 28%; left: 20%; width: 50%; height: 50%; background-color: #6a626f; border-radius: 50%; } .mill-blades-rotator { position: absolute; top: 0; left: 0; width: 100%; height: 100%; left: -9%; top: -31%; -webkit-animation: rotate 10s infinite linear; animation: rotate 10s infinite linear; } .mill-blades .mill-blade { width: 500%; height: 100%; position: absolute; top: 0; right: 100%; } .mill-blades .mill-blade:before { content: ""; display: block; position: absolute; top: 50%; left: -7%; width: 73%; height: 6%; transform: translateY(-50%); background-color: #000100; } .mill-blades .mill-blade:nth-child(1) { transform: rotate(180deg); } .mill-blades .mill-blade:nth-child(2) { right: auto; left: 100%; } .mill-blades .mill-blade:nth-child(3) { right: auto; top: 0%; transform: rotate(90deg); transform-origin: 0% 100%; } .mill-blades .mill-blade:nth-child(4) { top: 0; left: 0; transform: rotate(270deg); transform-origin: 0% 0; } .mill-blades .mill-blade div { background-color: transparent; border: 2px solid #000100; position: absolute; top: 50%; transform: translateY(-50%); left: 15%; width: 17%; height: 77%; } .mill-blades .mill-blade div:nth-child(1):after { content: ""; display: block; position: absolute; top: 0; left: 50%; background-color: #000100; width: 2px; margin-left: -1px; height: 100%; } .mill-blades .mill-blade div:nth-child(2) { left: 32%; margin-left: -2px; } .mill-blades .mill-blade div:nth-child(3) { left: 49%; margin-left: -4px; } .mill-blades .mill-blade div:nth-child(4) { left: 66%; margin-left: -6px; } .mill-blades .mill-blade div:nth-child(5) { left: 83%; margin-left: -8px; } .mill-blades__shadow { top: -15%; left: 40%; background-color: transparent; z-index: 10; filter: blur(1px); transform: scale(1.2); } .mill-blades__shadow .mill-blades-base { display: none; } .mill-blades__shadow .mill-blade div { border-color: rgba(0, 0, 0, 0.5); } .layout { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .layout__back { z-index: 1; } .layout__front { z-index: 3; } .ground-front { position: absolute; height: 16%; width: 100%; bottom: 0; left: 0; } .ground-front div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .ground-front div:nth-child(1) { z-index: 1; } .ground-front div:nth-child(1):before { content: ""; display: block; position: absolute; z-index: 2; top: 7%; left: -5%; width: 110%; height: 150%; transform: rotate(4deg); background: linear-gradient(20deg, #94801d, #e0b21e); -webkit-clip-path: ellipse(60% 50% at 50% 50%); clip-path: ellipse(60% 50% at 50% 50%); } .ground-front div:nth-child(2) { z-index: 2; } .ground-front div:nth-child(2):before { content: ""; display: block; position: absolute; z-index: 2; top: 5%; left: -5%; width: 110%; height: 150%; transform: rotate(0deg); background: linear-gradient(170deg, #5e611c, #122923, #12130e); -webkit-clip-path: ellipse(60% 50% at 50% 50%); clip-path: ellipse(60% 50% at 50% 50%); } .ground-front div:nth-child(2):after { content: ""; display: block; position: absolute; top: 40%; left: -5%; width: 110%; height: 140%; transform: rotate(-10deg); background: linear-gradient(#465720 10%, #0a2e2e 40%); -webkit-clip-path: ellipse(60% 50% at 50% 50%); clip-path: ellipse(60% 50% at 50% 50%); z-index: 1; } .ground-front div:nth-child(3) { z-index: 3; } .ground-front div:nth-child(3):before { content: ""; display: block; position: absolute; top: 90%; left: -5%; width: 110%; height: 100%; transform: rotate(-8deg); background: linear-gradient(#111308 10%, #040507 40%); -webkit-clip-path: ellipse(60% 50% at 50% 50%); clip-path: ellipse(60% 50% at 50% 50%); z-index: 1; } .tree { position: absolute; bottom: 8%; left: 8%; width: 20%; height: 25%; z-index: 2; } .tree-trunk { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -webkit-animation: tree-wind 3s infinite linear; animation: tree-wind 3s infinite linear; } .tree-trunk:before { content: ""; display: block; position: absolute; bottom: 9%; left: 6%; width: 65%; height: 10%; border-radius: 0 50% 50% 0; background: linear-gradient(to right, transparent, #011315); transform: rotate(-6deg); } .tree-trunk-base { width: 30%; height: 30%; border-left: 6px solid #0c0608; border-radius: 30% 40%/90% 0%; position: absolute; bottom: 18%; right: 30%; transform: rotateX(40deg) rotate(-40deg); } .tree-trunk-base:after { content: ""; display: block; position: absolute; bottom: -10%; left: -13%; width: 35%; height: 20%; background-color: #0c0608; transform: rotate(40deg); -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%); clip-path: polygon(0% 0%, 100% 100%, 0% 100%); } .tree-trunk-base-branch { position: absolute; border-radius: 50%; border: 2px solid #0c0608; border-top-color: transparent; border-right-color: transparent; width: 100%; height: 100%; top: -37%; left: -35%; transform: rotate(-25deg); } .tree-trunk-base-branch:before { content: ""; display: block; position: absolute; left: -33%; top: -22%; width: 80%; height: 80%; border: 1px solid #0c0608; border-top-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(50deg); } .tree-leaves { position: absolute; top: 0; left: 0; width: 90%; height: 70%; z-index: 2; -webkit-animation: tree-wind 3s infinite linear; animation: tree-wind 3s infinite linear; } .tree-leaves div { position: absolute; z-index: 2; top: 0; left: 0; width: 0; width: 100%; height: 100%; } .tree-leaves div:before { content: ""; display: block; position: absolute; top: 22%; left: -4%; width: 90%; height: 40%; border-radius: 50%; background: linear-gradient(to right, #01040d, #515d39); transform: rotate(-35deg) rotateX(30deg); border-bottom: 4px solid #071e18; box-shadow: 0 -2px 0 0 #f1a52e; z-index: 1; } .tree-leaves div:after { content: ""; display: block; position: absolute; bottom: 1%; left: 1%; width: 100%; height: 60%; border-radius: 50%; background: linear-gradient(to right, #01040d, #515d39); transform: rotate(-25deg) rotateX(30deg); border-bottom: 4px solid #071e18; z-index: 2; } .tree-leaves:before { content: ""; display: block; z-index: 1; position: absolute; top: 60%; left: 2%; width: 24%; height: 46%; background-color: #01040d; border-radius: 50%; } .tree .leaves { z-index: 3; } .birds { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .birds div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .birds div:before, .birds div:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 3%; height: 1.5%; background-color: #000507; -webkit-animation: bird 0.3s infinite linear; animation: bird 0.3s infinite linear; -webkit-animation-direction: normal; animation-direction: normal; transform: rotate(10deg); -webkit-clip-path: polygon(0% 0%, 25% 25%, 50% 50%, 75% 25%, 100% 0%, 70% 60%, 50% 100%, 25% 60%); clip-path: polygon(0% 0%, 25% 25%, 50% 50%, 75% 25%, 100% 0%, 70% 60%, 50% 100%, 25% 60%); } .birds__back { -webkit-animation: bird-layout 10s infinite linear; animation: bird-layout 10s infinite linear; } .birds__back div:before { top: 39%; left: 33%; width: 2%; height: 1%; } .birds__back div:after { width: 2%; height: 1%; top: 49%; left: 40%; } .birds__front { -webkit-animation: bird-layout 8s infinite linear; animation: bird-layout 8s infinite linear; } .birds__front div:before { top: 44%; left: 20%; } .birds__front div:after { width: 3.6%; height: 1.8%; top: 44%; left: 15%; } .leaves { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .leaves div { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .leaves div:before, .leaves div:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 3%; height: 3%; background-color: #000507; -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 0%); clip-path: polygon(0% 0%, 100% 100%, 100% 0%); transform: rotate(10deg); } .leaves__tree div { opacity: 0; -webkit-animation: leaves 3s infinite linear; animation: leaves 3s infinite linear; -webkit-animation-direction: normal; animation-direction: normal; } .leaves__tree div:after, .leaves__tree div:before { transform: rotate(0); } .leaves__tree div:nth-child(1) { -webkit-animation-delay: 1s; animation-delay: 1s; } .leaves__tree div:nth-child(1):after { top: 35%; left: 5%; transform: rotate(-30deg); } .leaves__tree div:nth-child(1):before { top: 50%; left: 50%; transform: rotate(20deg); } .leaves__tree div:nth-child(2) { -webkit-animation-delay: 2s; animation-delay: 2s; } .leaves__tree div:nth-child(2):after { top: 30%; left: 30%; transform: rotate(90deg); } .leaves__tree div:nth-child(2):before { top: 14%; left: 36%; transform: rotate(40deg); } .leaves__tree div:nth-child(3) { -webkit-animation-delay: 3s; animation-delay: 3s; } .leaves__tree div:nth-child(3):after { top: 0%; left: 37%; background-color: #ce7134; transform: rotate(20deg); } .leaves__tree div:nth-child(3):before { top: 15%; left: 75%; } .mauntains { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mauntains:before, .mauntains:after { content: ""; display: block; position: absolute; top: 72%; left: -17%; width: 70%; height: 97%; background: linear-gradient(170deg, #c49977 0%, #48679e 20%, #48679d 100%); border-radius: 50%; } .mauntains:after { left: auto; width: 20%; height: 0; padding-top: 20%; right: -10%; top: 77%; background: linear-gradient(to right, #c49977 0%, #48679e 40%, #48679d 100%); } .clouds { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-animation: clouds-layout 30s infinite linear; animation: clouds-layout 30s infinite linear; } .clouds:before, .clouds:after { content: ""; display: block; position: absolute; top: 24%; left: -30%; width: 90%; height: 3%; border-radius: 50%; transform: rotate(1deg); background-color: rgba(255, 255, 255, 0.1); } .clouds:after { left: 30%; top: 40%; } .trees { width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; } .trees div { position: absolute; bottom: 15.5%; left: 35.5%; height: 5%; width: 1%; } .trees div:before, .trees div:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#423e4f, #100f21); -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .trees div:nth-child(1):after { left: -330%; top: 45%; } .trees div:nth-child(2) { left: 29%; bottom: 13%; } .trees div:nth-child(2):after { left: -400%; top: 10%; } .trees div:nth-child(3) { left: 21%; bottom: 12%; } .trees div:nth-child(4) { left: auto; right: 3%; bottom: 16%; } .trees div:nth-child(4):after { left: 180%; top: 25%; } .trees div:nth-child(5) { left: auto; right: 0%; bottom: 14%; } .houses { position: absolute; top: 66%; left: 38%; height: 20%; width: 60%; } .house { position: absolute; bottom: 0; right: 1%; width: 43%; height: 95%; z-index: 3; } .house-walls { position: absolute; bottom: 0; left: 8%; width: 84%; height: 44%; } .house-wall__first { position: absolute; bottom: 0; left: 0; height: 100%; width: 56%; background: linear-gradient(to right, #e8c8bd, #c3b7b7); } .house-wall__first:before { content: ""; display: block; position: absolute; top: 0; width: 100%; height: 23%; background: linear-gradient(to right, #b5b7c4, #9099a8); } .h.........完整代码请登录后点击上方下载按钮下载查看
网友评论0