纯css雪人下雪特效
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { overflow: hidden; } .snowFall { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 11; display: flex; justify-content: center; -webkit-transform: scale(2) rotate(12deg); transform: scale(2) rotate(12deg); } .snowFall div { position: relative; display: inline-flex; flex-shrink: 0; margin: 3vh; height: 8vh; width: 8vh; top: -30vh; border-radius: 50%; background-color: white; --scaleVar: 0.5; --delayVar: 0; -webkit-animation: fallAnim 3000ms linear infinite; animation: fallAnim 3000ms linear infinite; } .delayMe div { -webkit-animation-delay: 1200ms; animation-delay: 1200ms; } .snowFall div:nth-of-type(2n) { -webkit-animation-delay: -200ms; animation-delay: -200ms; -webkit-animation-duration: 3200ms; animation-duration: 3200ms; --scaleVar: 0.3; } .snowFall div:nth-of-type(3n) { -webkit-animation-delay: -300ms; animation-delay: -300ms; -webkit-animation-duration: 2800ms; animation-duration: 2800ms; --scaleVar: 0.4; } .biggerSnow { -webkit-transform: scale(4); transform: scale(4); -webkit-filter: blur(0.2vh); filter: blur(0.2vh); } .delayMe div:nth-of-type(2n) { -webkit-animation-delay: 1500ms; animation-delay: 1500ms; } .delayMe div:nth-of-type(3n) { -webkit-animation-delay: 900ms; animation-delay: 900ms; } .snowFall div::after, .snowFall div::before { content: ""; position: absolute; width: 50%; height: 50%; top: -250%; border-radius: 50%; background-color: white; } .snowFall div::before { top: -150%; left: -150%; } .snowFall div:nth-of-type(2n)::after { top: -250%; } .snowFall div:nth-of-type(2n)::before { left: -350%; } .snowFall div:nth-of-type(3n)::after { top: -350%; } .snowFall div:nth-of-type(3n)::before { top: 350%; } .snowMan { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; -webkit-filter: contrast(300%); filter: contrast(300%); } .innerSnow { position: absolute; width: 100%; height: 100%; -webkit-filter: contrast(300%); filter: contrast(300%); background: #000000; background: linear-gradient(0deg, #f4f4f4 0%, #f4f4f4 33%, black 35%); } .snowBall { position: absolute; bottom: 20%; left: 50%; height: 30vh; width: 30vh; margin-left: -15vh; border-radius: 50%; border: 2vh dotted #f4f4f4; -webkit-filter: blur(1vh) contrast(10000%) brightness(150000%); filter: blur(1vh) contrast(10000%) brightness(150000%); -webkit-animation: snowAnim 5000ms steps(18, end) infinite; animation: snowAnim 5000ms steps(18, end) infinite; } .snowBall::after { content: ""; position: absolute; height: 106%; width: 106%; left: -3%; top: -3%; border-radius: 50%; background-color: #f4f4f4; } .snowBall:nth-of-type(2) { margin-bottom: 18vh; height: 26vh; width: 26vh; margin-left: -13vh; -webkit-animation-delay: -800ms; animation-delay: -800ms; } .snowBall:nth-of-type(3) { margin-bottom: 36vh; height: 22vh; width: 22vh; margin-left: -11vh; -webkit-animation-delay: -3000ms; animation-delay: -3000ms; } .snowFace { position: absolute; height: 22vh; width: 22vh; margin-left: -11vh; margin-bottom: 36vh; bottom: 20%; left: 50%; z-index: 9; -webkit-animation: faceAnim 5000ms steps(18, end) infinite; animation: faceAnim 5000ms steps(18, end) infinite; -webkit-animation-delay: -3000ms; animation-delay: -3000ms; } .snowFace .eye, .snowFace .nose { position: relative; height: 10%; width: 10%; float: left; margin: 10%; margin-top: 20%; border-radius: 50%; background-color: black; -webkit-filter: blur(0.1vh); filter: blur(0.1vh); box-shadow: 0 -1vh 1.4vh rgba(0, 0, 0, 0.4.........完整代码请登录后点击上方下载按钮下载查看
网友评论0