新年快乐祝福动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Caveat"); html, body { background: linear-gradient(to bottom, #090513 0%, #964987 75%, #fdbca3 100%); height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .stars { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation: rotation 360s infinite linear; animation: rotation 360s infinite linear; } .stars:after, .stars:before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQAQMAAAC6caSPAAAABlBMVEVHcEz///+flKJDAAAAAXRSTlMAQObYZgAAAIVJREFUeAHt2SEOwkAQhtFJKuqKRRGOgKzgUMgKRI/G0ZDoacNkN/ue/zJ+/ugBcI+01/EEAGBc04FkP58AVFoi7VaSLAEAAPB/j0hbK678AADMkXbZG03mGA0AAKsP3JgAAGDa88knsuZ8Mp1M6gEAPFtNrtEjtkh7lyRb3/PAWpS0BPgC0PMMdOEjXqoAAAAASUVORK5CYII="); } .stars:after { background-size: 100px; opacity: 0.4; } .stars:before { background-size: 200px; opacity: 0.6; } @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotation { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } h1 { font-size: calc(1.5em + 5vw); color: #fff; font-family: 'Caveat', sans-serif; text-align: center; padding: 0.5em; -webkit-transform: rotate(-4deg) translateY(-15vh); transform: rotate(-4deg) translateY(-15vh); } .mountains { position: absolute; bottom: 0; left: 0; right: 0; width: auto; min-width: 100%; height: 60px; fill: #000022; } .mountains--layer1 { z-index: 2; } .mountains--layer2 { fill: #9D5189; z-index: 0; } </style> </head> <body translate="no"> <h1 id="title">Happy New Year!</h1> <div class="stars"></div> <svg class="mountains mountains--layer1" xmlns="http://www.w3.org/2000/svg" width="1920" height="200" viewBox="0 0 1920 200" preserveAspectRatio="none"> <title>bergskedja</title> <path d="M0,41.57s21.25,2.19,27.33,2.19,22.27-4.37,28.34,0-1,22.94,6.07,19.67S72.87,52,81,52.81s16.19,10.15,22.27,0,25.3-1.41,30.36,6.24,21.25,7.33,26.32,4.76,8.1-20.66,16.19-22,17.21-6.31,18.22,0,5.06,3,12.15,3,20.24-10.93,25.3-14.2S238.86,11,259.1,11s35.42,4.37,43.52,0S316.79.05,321.86.05,337-1,337,6.61s6.07,24.92,15.18,26.12,30.36,11,34.41,14.31,18.22-2.19,18.22-2.19c11.13,7.65,20.24,0,20.24,0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0