css实现一个三维旗帜迎风飘扬动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个三维旗帜迎风飘扬动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Orelega+One&display=swap"); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { font-family: "Orelega One", cursive; background-image: linear-gradient(#ccc, #999); color: #fffc; min-height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 20px; perspective: 20em; } .flag { position: relative; width: 0; height: 16em; background-color: #fff; transform: translateX(-6em) rotateX(-30deg) rotateY(15deg); transform-style: preserve-3d; } .flap { position: absolute; top: 0; left: calc(100% - 1px); width: calc(1em + 1px); height: 9em; box-shadow: 0px 0px 1em #0003 inset; transform-style: preserve-3d; transform-origin: left; -webkit-animation: flap 3s infinite ease-in-out; animation: flap 3s infinite ease-in-out; } .flap { -webkit-animation-delay: 0s; animation-delay: 0s; background-image: linear-gradient(90deg, #2d862d, #2d863c); --v: 0deg; } .flap .content::before { left: 0em; } .flap .content::after { left: 0em; } .flap > .flap { -webkit-animation-delay: -0.375s; animation-delay: -0.375s; background-image: linear-gradient(90deg, #2d863c, #2d864a); --v: 2.5deg; } .flap > .flap .content::before { left: -0.25em; } .flap > .flap .content::after { left: -0.5em; } .flap > .flap > .flap { -webkit-animation-delay: -0.75s; animation-delay: -0.75s; background-image: linear-gradient(90deg, #2d864a, #2d8659); --v: 5deg; } .flap > .flap > .flap .content::before { left: -0.5em; } .flap > .flap > .flap .content::after { left: -1em; } .flap > .flap > .flap > .flap { -webkit-animation-delay: -1.125s; animation-delay: -1.125s; background-image: linear-gradient(90deg, #2d8659, #2d8668); --v: 7.5deg; } .flap > .flap > .flap > .flap .content::before { left: -0.75em; } .flap > .flap > .flap > .flap .content::after { left: -1.5em; } .flap > .flap > .flap > .flap > .flap { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; background-image: linear-gradient(90deg, #2d8668, #2d8677); --v: 10deg; } .flap > .flap > .flap > .flap > .flap .content::before { left: -1em; } .flap > .flap > .flap > .flap > .flap .content::after { left: -2em; } .flap > .flap > .flap > .flap > .flap > .flap { -webkit-animation-delay: -1.875s; animation-delay: -1.875s; background-image: linear-gradient(90deg, #2d8677, #2d8686); --v: 12.5deg; } .flap > .flap > .flap > .flap > .flap > .flap .content::before { left: -1.25em; } .flap > .flap > .flap > .flap > .flap > .flap .content::after { left: -2.5em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap { -webkit-animation-delay: -2.25s; animation-delay: -2.25s; background-image: linear-gradient(90deg, #2d8686, #2d7786); --v: 15deg; } .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before { left: -1.5em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after { left: -3em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap { -webkit-animation-delay: -2.625s; animation-delay: -2.625s; background-image: linear-gradient(90deg, #2d7786, #2d6886); --v: 17.5deg; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before { left: -1.75em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after { left: -3.5em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap { -webkit-animation-delay: -3s; animation-delay: -3s; background-image: linear-gradient(90deg, #2d6886, #2d5986); --v: 20deg; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before { left: -2em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after { left: -4em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap { -webkit-animation-delay: -3.375s; animation-delay: -3.375s; background-image: linear-gradient(90deg, #2d5986, #2d4a86); --v: 22.5deg; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before { left: -2.25em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after { left: -4.5em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap { -webkit-animation-delay: -3.75s; animation-delay: -3.75s; background-image: linear-gradient(90deg, #2d4a86, #2d3c86); --v: 25deg; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before { left: -2.5em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after { left: -5em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap { -webkit-animation-delay: -4.125s; animation-delay: -4.125s; background-image: linear-gradient(90deg, #2d3c86, #2d2d86); --v: 27.5deg; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before { left: -2.75em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after { left: -5.5em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap { -webkit-animation-delay: -4.5s; animation-delay: -4.5s; background-image: linear-gradient(90deg, #2d2d86, #3c2d86); --v: 30deg; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::before { left: -3em; } .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap > .flap .content::after { left: -6em; } .flap > .flap > .flap > .flap > .flap > .flap &g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0