css布局实现静止的湖面日出动画效果代码
代码语言:html
所属分类:动画
代码描述:css布局实现静止的湖面日出动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> :root { --v1: #be91c6; --v2: #8a65cc; --v3: #5e30d9; --transparentv3: #5e30d900; --v4: #3b1895; --s1: #fea798; --s2: #ff846e; --cloud: #fea798; } .landscape:after, .landscape:before, .landscape *, .landscape *:after, .landscape *:before { position: absolute; } .front { z-index: 1; bottom: 0; left: 0; right: 0; } .landscape { height: 100vh; background-image: linear-gradient(var(--v1), var(--s1), var(--v1)); position: relative; z-index: 1; overflow: hidden; } .mountain { border-radius: 180% 80% 0% 0%/60vmin 60vmin 0% 0%; width: 40vmin; height: 30vmin; bottom: 50%; left: -10vmin; background: var(--s1); background-image: linear-gradient(var(--v1), var(--v2) 30%, var(--v3)); box-shadow: inset -10px 0 10px -10px var(--s1); } .mountain:before { content: ""; bottom: 0; width: inherit; height: inherit; background: inherit; border-radius: inherit; transform-origin: bottom center; transform: scaleX(1) scaleY(-0.6); filter: blur(3px); } .mountain-2 { left: 5vmin; height: 15vmin; width: 40vmin; box-shadow: inset -15px 0 10px -14px var(--s1); border-radius: 120% 50% 0% 0%/25vmin 25vmin 0% 0%; background-image: linear-gradient(var(--v3), var(--v4)); } .mountain-3 { border-radius: 80% 0% 0 0/100% 100% 0 0; right: -85vmin; width: 100vmin; left: auto; height: 12vmin; color: var(--v3); background-image: linear-gradient(var(--s1), var(--v4)); box-shadow: inset 15px 0 10px -10px var(--s1); } .mountain-3:after { content: ""; border-radius: 60% 0 0 0/100% 0 0 0; background: inherit; width: 100%; height: 0; bottom: 0; right: 20%; } .lotus { width: 10vmin; height: 5vmin; background: conic-gradient(var(--v3) 0deg 40deg, var(--transparentv3) 50deg 70deg, var(--v3) 80deg); border-radius: 50%; } .lotus-1 { bottom: 10vmin; right: 5vmin; width: 20vmin; } .lotus-2 { bottom: 20vmin; right: 15vmin; height: 3vmin; transform: skew(-10deg); opacity: 0.5; mix-blend-mode: multiply; } .lotus-3 { bottom: 10vmin; right: 35vmin; transform: rotate(180deg) skew(-20deg); opacity: 0.8; width: 15vmin; } .cloud { width: 80vmin; height: 6vmin; background: currentcolor; color: var(--cloud); top: 24vmin; left: 20vmin; border-radius: 50%; box-shadow: 30vmin 0.5vmin 0 -1vmin currentcolor, -25vmin 0 0 -0.6vmin currentcolor; opacity: 0.3; transform: translate3d(-150vmin, 0, 0); -webkit-animation: clouds 120s infinite; animation: clouds 120s infinite; -webkit-animation-delay: -10s; animation-delay: -10s; } @-webkit-keyframes clouds { 50% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(150vmin, 0, 0); } } @keyframes clouds { 50% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(150vmin, 0, 0); } } .cloud-1 { left: 60vmin; top: 15vmin; opacity: 0.2; filter: blur(1px); -webkit-animation-delay: 0; animation-delay: 0; -webkit-animation-duration: 100s; animation-duration: 100s; } .water { top: 50%; bottom: 0; left: 0; right: 0; background: linear-gradient(#fea79855, var(--v2)); overflow: hidden; box-shadow: inset 0 1px 4px -3px white; } .stone { bottom: -5vh; left: 0; height: 20vmin; width: 40vmin; background: var(--v4); box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.2); border-radius: 0% 200% 0 0/0% 200%; } .stone:after { content: ""; background: var(--v3); width: 100%; height: 100%; right: -15%; border-radius: inherit; z-index: -1; transform: scaleX(1.3) skew(10deg); box-shadow: inset 0 0 20px -5px rgba(0, 0, 0, 0.4); } .grass { height: 40vmin; width: 10vmin; border-radius: 0 60% 0 0/0 100% 0 0; bottom: 0; border-right: 5px solid var(--v4); box-shadow: 1px 0 0 var(--s1); filter: drop-shadow(-0.5vmin 6vmin 0 var(--s2)) drop-shadow(-4.5vmin 10vmin 0 var(--v3)); } .grass-1 { left: 14vmin; bottom: -2vmin; transform: scaleX(-1); box-shadow: 2px 0 0 var(--v4); border-color: var(--v3); filter: drop-shadow(-1vmin 5vmin 0 var(--v3)) drop-shadow(-80vmin 5vmin 0 var(--v4)); } .grass-2 { right: 0; left: auto; height: 20vmin; bottom: -2vmin; transform: scaleX(-1); } .sun { background: white; border-radius: 50%; width: 20vmin; height: 20vmin; left: calc(60% - 10vmin); top: 100%; transform: translate3d(0, 0, 0); -webkit-animation: rise 20s infinite; animation: rise 20s infinite; box-shadow: 0 0 10px white; } .reed { height: 40vmin; width: 0.5vmin; bottom: 0; left: 10vmin; color: var(--v4); background: currentColor; transform-origin: bottom center; transform: rotate(4deg); box-shadow: inset -1px 0 0 var(--s2), -6vmin 3vmin 0 0, 80vmin 0 0 0; -webkit-animation: verticalise 20s infinite; animation: verticalise 20s infinite; } .reed-1 { color: var(--s2); left: 15vmin; height: 50vmin; bottom: -5vmin; transform: rotate(-2deg); -webkit-animation: verticalise-1 20s infinite; animation: verticalise-1 20s infinite; box-shadow: inset -1px 0 0 var(--s1), 6vmin 13vmin 0 0 var(--s1), 80vmin 10vmin 0 0 var(--v3); } .reed:after { content: ""; width: 1.5vmin; height: 10vmin; background: currentcolor; border-radius: 0.75vmin; top: 0; left: -0.5vmin; box-shadow: inherit; } @-webkit-keyframes verticalise { 0%, 10% { transform: rotate(4deg); } 30%, 70% { transform: rotate(0); } } @keyframes verticalise { 0%, 10% { transform: rotate(4deg); } 30%, 70% { transform: rotate(0); } } @-webkit-keyframes verticalise-1 { 0%, 10% { transform: rotate(-2deg); } 45%, 70% { transform: rotate(0) translateY(-6vmin); } } @keyframes verticalise-1 { 0%, 10% { transform: rotate(-2deg); } 45%, 70% { transform: rotate(0) translateY(-6vmin); } } @-webkit-keyframes rise { 100% { transform: translate3d(0, -100vh, 20vmin); } } @keyframes rise { 100% { transform: translate3d(0, -100vh, 20vmin); } } @-webkit-keyframes rise-reflection { 30% { opacity: 0; transform:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0