HTML5+SVG+CSS3实现雪中点亮的圣诞树动画效果源码.zip资源-CSDN文库

共1个文件

html：1个

版权申诉

html5

51 浏览量 2022-11-03 23:51:11 上传评论收藏 6KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5+SVG+CSS3实现雪中点亮的圣诞树动画效果源码.zip （1个子文件）

132686899968500445

index.html 44KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5+SVG+CSS3 雪中点亮的圣诞树</title> <style> body { background: -webkit-linear-gradient(top, #235, #222 40%, #fff 50%, #fff); background: linear-gradient(to bottom, #235, #222 40%, #fff 50%, #fff); overflow: hidden; height: 100vh; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0; margin: 0; } tspan { font-size: 48px; font-family: sans-serif; fill: #fc2d2a; } tspan:nth-of-type(5n + 5) { fill: #fc2df2; } tspan:nth-of-type(5n + 4) { fill: #342df2; } tspan:nth-of-type(5n + 3) { fill: #fcf52a; } tspan:nth-of-type(5n + 2) { fill: #34f52a; } .tree { -webkit-filter: brightness(90%); filter: brightness(90%); -webkit-transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out; transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out; } .tree path { stroke: #336833; } .huzzah .tree { -webkit-filter: brightness(105%); filter: brightness(105%); } .tree, .lights, .lights-blur, .star, .star-blur { position: absolute; bottom: 5%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 60vmin; z-index: 100; } .tree svg, .lights svg, .lights-blur svg, .star svg, .star-blur svg { max-width: 100%; } .star { -webkit-filter: brightness(0.5); filter: brightness(0.5); -webkit-transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out; transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out; } .huzzah .star { -webkit-filter: brightness(1.3); filter: brightness(1.3); } .lights { -webkit-filter: brightness(0.4) opacity(0.85); filter: brightness(0.4) opacity(0.85); -webkit-transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out; transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out; } .huzzah .lights { -webkit-filter: brightness(1.3); filter: brightness(1.3); } .lights-blur { opacity: 0; -webkit-transition: -webkit-filter 0.145s ease-in-out, opacity 0.145s ease-in-out, filter 0.145s ease-in-out, opacity 0.145s ease-in-out; transition: -webkit-filter 0.145s ease-in-out, opacity 0.145s ease-in-out, filter 0.145s ease-in-out, opacity 0.145s ease-in-out; } .huzzah .lights-blur { opacity: 1; -webkit-filter: brightness(1.3) blur(3px); filter: brightness(1.3) blur(3px); } .forest { -webkit-filter: grayscale(0.33); filter: grayscale(0.33); position: absolute; width: 100%; top: 50%; } .forest .back-tree { position: absolute; top: 50%; left: 0; width: 60vmin; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; } .forest .back-tree:nth-of-type(1) { -webkit-transform: translate3d(-10vw, -50%, 0) scale(0.5); transform: translate3d(-10vw, -50%, 0) scale(0.5); z-index: 50; -webkit-filter: grayscale(0.33) brightness(0.9) opacity(0.6); filter: grayscale(0.33) brightness(0.9) opacity(0.6); } .forest .back-tree:nth-of-type(2) { -webkit-transform: translate3d(0, -50%, 0) scale(0.67); transform: translate3d(0, -50%, 0) scale(0.67); z-index: 67; } .forest .back-tree:nth-of-type(3) { -webkit-transform: translate3d(10vw, -50%, 0) scale(0.45); transform: translate3d(10vw, -50%, 0) scale(0.45); z-index: 45; -webkit-filter: grayscale(0.33) brightness(0.9) opacity(0.6); filter: grayscale(0.33) brightness(0.9) opacity(0.6); } .forest .back-tree:nth-of-type(4) { -webkit-transform: translate3d(18vw, -48%, 0) scale(0.56); transform: translate3d(18vw, -48%, 0) scale(0.56); z-index: 56; -webkit-filter: grayscale(0.33) brightness(0.9); filter: grayscale(0.33) brightness(0.9); } .forest .back-tree:nth-of-type(5) { -webkit-transform: translate3d(28vw, -50%, 0) scale(0.5); transform: translate3d(28vw, -50%, 0) scale(0.5); z-index: 50; -webkit-filter: grayscale(0.33) brightness(0.9) opacity(0.6); filter: grayscale(0.33) brightness(0.9) opacity(0.6); } .forest .back-tree:nth-of-type(6) { -webkit-transform: translate3d(37vw, -50%, 0) scale(0.66); transform: translate3d(37vw, -50%, 0) scale(0.66); z-index: 66; } .forest .back-tree:nth-of-type(7) { -webkit-transform: translate3d(36vw, -50%, 0) scale(0.54); transform: translate3d(36vw, -50%, 0) scale(0.54); z-index: 54; -webkit-filter: grayscale(0.33) brightness(0.9); filter: grayscale(0.33) brightness(0.9); } .forest .back-tree:nth-of-type(8) { -webkit-transform: translate3d(49vw, -50%, 0) scale(0.46); transform: translate3d(49vw, -50%, 0) scale(0.46); z-index: 46; -webkit-filter: grayscale(0.33) brightness(0.9) opacity(0.6); filter: grayscale(0.33) brightness(0.9) opacity(0.6); } .forest .back-tree:nth-of-type(9) { -webkit-transform: translate3d(57vw, -50%, 0) scale(0.69); transform: translate3d(57vw, -50%, 0) scale(0.69); z-index: 69; } .forest .back-tree:nth-of-type(10) { -webkit-transform: translate3d(66vw, -50%, 0) scale(0.55); transform: translate3d(66vw, -50%, 0) scale(0.55); z-index: 55; -webkit-filter: grayscale(0.33) brightness(0.9); filter: grayscale(0.33) brightness(0.9); } .forest .back-tree:nth-of-type(11) { -webkit-transform: translate3d(72vw, -50%, 0) scale(0.49); transform: translate3d(72vw, -50%, 0) scale(0.49); z-index: 49; -webkit-filter: grayscale(0.33) brightness(0.9) opacity(0.6); filter: grayscale(0.33) brightness(0.9) opacity(0.6); } .forest .back-tree:nth-of-type(12) { -webkit-transform: translate3d(80vw, -50%, 0) scale(0.6); transform: translate3d(80vw, -50%, 0) scale(0.6); z-index: 60; -webkit-filter: grayscale(0.33) brightness(0.9); filter: grayscale(0.33) brightness(0.9); } .forest .back-tree:nth-of-type(13) { -webkit-transform: translate3d(88vw, -50%, 0) scale(0.56); transform: translate3d(88vw, -50%, 0) scale(0.56); z-index: 56; -webkit-filter: grayscale(0.33) brightness(0.9); filter: grayscale(0.33) brightness(0.9); } .forest .back-tree:nth-of-type(14) { -webkit-transform: translate3d(96vw, -50%, 0) scale(0.48); transform: translate3d(96vw, -50%, 0) scale(0.48); z-index: 48; -webkit-filter: grayscale(0.33) brightness(0.9) opacity(0.6); filter: grayscale(0.33) brightness(0.9) opacity(0.6); } .forest .back-tree:nth-of-type(15) { -webkit-transform: translate3d(100vw, -50%, 0) scale(0.56); transform: translate3d(100vw, -50%, 0) scale(0.56); z-index: 56; } .forest .back-tree:nth-of-type(16) { -webkit-transform: translate3d(109vw, -50%, 0) scale(0.6); transform: translate3d(109vw, -50%, 0) scale(0.6); z-index: 60; } .snow { width: 1rem; height: 1rem; background: #fff; border-radius: 50%; display: inline-block; position: absolute; top: -1rem; left: 0; z-index: 150; } .yeti { position: absolute; bottom: -270px; left: 40px; width: 300px; z-index: 200; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); will-change: transform; -webkit-transition: -webkit-transform 0.6s 0s ease-in; transition: transform 0.6s 0s ease-in; } .huzzah .yeti { -webkit-transform: translate3d(0, 0%, 0); transform: translate3d(0, 0%, 0); -webkit-transition: -webkit-transform 6s 1s ease-out

评论收藏

内容反馈

版权申诉