div+css实现2023新年太阳升起动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现2023新年太阳升起动画效果代码
代码标签: div css 2023 新年 太阳 升起 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url("https://fonts.googleapis.com/css2?family=Righteous&display=swap"); :root { --speed: 15s; --treesize: 10vmin; } .container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } .sky { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #cdf; background: #333; animation: brightsky var(--speed) forwards ease; } .sun { position: absolute; top: 55vh; left: 5vw; height: 10vmin; width: 10vmin; border-radius: 100%; background: #fff; transform: rotate(0deg); transform-origin: 50vw 0vw; animation: sunrise var(--speed) forwards ease; box-shadow: inset 0 0 5vmin #f33, inset 2vmin 0 4vmin #f62, inset -2vmin 0 4vmin #f62, 0 0 5vmin #f33, 0 0 20vmin #f33, 0 0 40vmin #f33, 0 0 100vmin #f33; } .ground { position: absolute; height: 45vh; bottom: 0; left: 0; right: 0; background: #111; animation: lightground var(--speed) forwards ease-in; } @keyframes sunrise { 0% { transform: rotate(0deg); top: 55vh; box-shadow: inset 0 0 5vmin #f33, inset 2vmin 0 4vmin #f62, inset -2vmin 0 4vmin #f62, 0 0 5vmin #f33, 0 0 20vmin #f33, 0 0 40vmin #f33, 0 0 100vmin #f33; } 100% { transform: rotate(90deg); top: 55vmax; box-shadow: inset 0 0 5vmin #fff, inset 2vmin 0 4vmin #fc2, inset -2vmin 0 4vmin #fc2, 0 0 5vmin #fff, 0 0 20vmin #ffd, 0 0 40vmin #ffd, 0 0 100vmin #fff; } } @keyframes brightsky { 0% { background: #222; } 100% { background: #bdf; background: #efefff; } } @keyframes lightground { 0% { background: #111; } 100% { background: #478778; } } .title { position: absolute; top: 55vh; left: 50%; transform: translate(-50%, 0) skewX(15deg) skewY(30deg); transform: translate(-50%, 0); color: #fff; font-family: "Righteous", cursive; font-size: 25vmin; text-shadow: 1.5vmin 1.5vmin 5px rgba(0, 0, 0, 0.4), 0 -1.8vmin 0px #ddd; letter-spacing: -2vmin; animation: titleshadow var(--speed) forwards ease; } @keyframes titleshadow { 0% { color: #444; text-shadow: 4vmin 5vmin 5px rgba(0, 0, 0, 0.4), 0 -1.8vmin 0px #222, 0 -2.8vmin 0px #222; } 100% { color: #fff; text-shadow: 0vmin 1vmin 0px rgba(0, 0, 0, 0.1), 0 -1.8vmin 0px #ddd, 0 -2.8vmin 0px #ddd; } } .tree { position: absolute; bottom: 32vh; left: 10vw; height: calc(3 * var(--treesize)); width: calc(1.5 * var(--treesize)); filter: brightness(30%); animation: brighttree var(--speed) forwards ease; } .t2{ bottom: 35vh; left: 80vw; } .t3{ bottom: 15vh; left: 3vw; } .t4{ bottom: 5vh; left: 15vw; } .t5{ bottom: 15vh; left: 85vw; } .b, .t, .m { position: absolute; top: calc(0.5 * var(--treesize)); left: calc(0 * var(--treesize)); height: calc(1 * var(--treesize)); width: calc(1 * var(--treesize)); border-radius: 100%; background: #07734b; } .b, .t { top: calc(1.1 * var(--treesize)); left: calc(0.2 * var(--treesize)); height: calc(0.6 * var(--treesize)); width: calc(0.6 * var(--treesize)); } .t { top: calc(0.22 * var(--treesize)); } .right { position: absolute; left: calc(0.5 * var(--treesize)); } .ls, .rs { position: absolute; top: calc(0.22 * var(--treesize)); left: calc(0.5 * var(--treesize)); height: calc(1.6 * var(--treesize)); width: calc(0.25 * var(--treesize)); background: #07734b; border-radius: 0 0 0 calc(0.1 * var(--treesize)); } .rs { left: calc(0.75 * var(--treesize)); background: #14a670; border-radius: 0 0 calc(0.1 * var(--treesize)) 0; } .r { background: #14a670; } .lst, .rst { position: absolute; top: calc(0.1 * var(--treesize)); left: calc(0.5 * var(--treesize)); height: calc(0.5 * var(--treesize)); width: calc(0.25 * var(--treesize)); background: #14a670; border-left: calc(0.25 * var(--treesize)) solid #07734b; border-radius: calc(1 * var(--treesize)); } .stem { position: absolute; top: calc(1.5 * var(--treesize)); left: calc(0.625 * var(--treesize)); height: calc(1.5 * var(--treesize)); width: calc(0.25 * var(--treesize)); background: #967969; border-radius: calc(0.1 * var(--treesize)); border-bottom: calc(0.03 * var(--treesize)) solid rgba(100,100,100,0.9); } @keyframes brighttree { 0% { filter: brightness(30%); } 100% { filter: brightness(100%); } } .tshadow { position: absolute; top: calc(2.5 * var(--treesize)); left: calc(.5 * var(--treesize)); height: calc(1.75 * var(--treesize)); width: calc(1 * var(--treesize)); background: rgba(0,0,0,0.2); border-radius: 100%; transform: rotate(140deg); animation: treeshadow var(--speed) forwards ease; } @keyframes treeshadow { 0% { } 100% { top: calc(2.7 * var(--treesize)); left: calc(0.25 * var(-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0