HTML5+SVG+CSS3 雪中点亮的圣诞树

已于 2022-12-02 10:08:12 修改
阅读量1.3k 收藏
点赞数
文章标签： css3 html5 css
于 2021-12-15 09:00:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zj2365854788/article/details/121944360
版权

HTML5+SVG+CSS3 雪中点亮的圣诞树

源码下载地址：HTML5+SVG+CSS3 雪中点亮的圣诞树
请添加图片描述
css3：

<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;
    transition: transform 6s 1s ease-out;
}
.huzzah .yeti circle {
    -webkit-animation: shifty 9s alternate infinite ease-in-out both;
    animation: shifty 9s alternate infinite ease-in-out both;
}
.yeti-claws {
    position: absolute;
    bottom: 0;
    left: 20px;
    width: 280px;
    will-change: transform;
}
.yeti-claws .claw {
    display: inline-block;
    float: left;
    width: 1rem;
    height: 1rem;
    background: #a4bbdc;
    border-radius: 50%;
}
.yeti-claws .claw:nth-of-type(odd) {
    float: right;
}
.huzzah .yeti-claws {
    -webkit-animation: clawy 3s 1s normal ease-in-out both, clawy2 3s 3s normal linear both;
    animation: clawy 3s 1s normal ease-in-out both, clawy2 3s 3s normal linear both;
}
@-webkit-keyframes shifty {
    54% {
        -webkit-transform: translate3d(0px, 0, 0);
        transform: translate3d(0px, 0, 0);
    }
    80% {
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }
}
@keyframes shifty {
    54% {
        -webkit-transform: translate3d(0px, 0, 0);
        transform: translate3d(0px, 0, 0);
    }
    80% {
        -webkit-transform: translate3d(-20px, 0, 0);
        transform: translate3d(-20px, 0, 0);
    }
}
@-webkit-keyframes clawy {
    0% {
        -webkit-transform: translate3d(0px, 0, 0);
        transform: translate3d(0px, 0, 0);
    }
    50% {
        -webkit-transform: translate3d(0px, -16px, 0);
        transform: translate3d(0px, -16px, 0);
    }
    80%,
    100% {
        -webkit-transform: translate3d(0px, -8px, 0);
        transform: translate3d(0px, -8px, 0);
    }
}
@keyframes clawy {
    0% {
        -webkit-transform: translate3d(0px, 0, 0);
        transform: translate3d(0px, 0, 0);
    }
    50% {
        -webkit-transform: translate3d(0px, -16px, 0);
        transform: translate3d(0px, -16px, 0);
    }
    80%,
    100% {
        -webkit-transform: translate3d(0px, -8px, 0);
        transform: translate3d(0px, -8px, 0);
    }
}
@-webkit-keyframes clawy2 {
    69%, 70%, 100% {
        z-index: 240;
    }
}
@keyframes clawy2 {
    69%, 70%, 100% {
        z-index: 240;
    }
}
.codepen {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1rem;
    background: #343436;
    z-index: 210;
}
.glow-screen {
    position: absolute;
    z-index: 90;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0), #444);
    background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0), #444);
    opacity: 0;
    -webkit-transition: opacity 0.145s ease-in-out;
    transition: opacity 0.145s ease-in-out;
}
.huzzah .glow-screen {
    opacity: 0.2;
}
</style>
坏男孩！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
svg 在线编辑器如何设置透明呢_如何“点亮”你的图片？
weixin_39641103的博客
12-01 3142
2019下半年开始，多多少少有去了解SVG排版的，但网上的资源还是比较少的，特别是有关于微信推文的教程更少。自己一路走坑也走了挺久啦好了，接着我们就来说说我今天内容?"点亮照片"的简单实现步骤。点亮前点亮后以上便是两份效果图，点亮图片?的原理:两张图片(规格一样)，一个是点亮后的图片(作为section的背景)，一个是点亮前的图片(作为svg的背景)。section包裹着svg,则会出现...
svgTree:用 d3 生成圣诞树
07-08
使用 D3 生成的 SVG 树
HTML5+CSS3实现圣诞树下雪效果，非常惊艳
最新发布
xunmaw001的博客
05-08 418
大家好，我是小寻，欢迎关注公众号：工具优选，免费领取优质项目源码和常用工具，还可以加入我的交流群！今天给大家整个圣诞树下雪的html效果。需要全部源码的记得关注公众号哦！
6款基于SVG的HTML5CSS3应用和动画
weixin_30279751的博客
05-20 398
1、CSS3/SVG质感背景小图标 镂空效果图标按钮 今天我们来分享一款用CSS3和SVG实现的质感背景小图标，鼠标滑过图标时出现镂空的效果，并且有质感背景的描边，效果非常不错。 在线演示 源码下载 2、HTML5 SVG Tab滑块菜单 非常酷的Tab菜单 之前我们分享过很多HTML5/CSS3菜单，应该说大部分都还比较实用华丽，今天我们要来分享另外一种形式的HTML5菜单——HT...
圣诞节快要来了,可我就是_我圣诞节想要的一切：CodePen Pro
culi3182的博客
08-21 280
圣诞节快要来了,可我就是We asked SitePoint authors what developer toys they would want for Christmas, then managed to source them — without relying on Santa. 我们询问了SitePoint作者，他们希望在圣诞节期间得到什么样的开发者玩具，然后设法采购了这些玩具，而无...
HTML5+SVG+CSS3实现雪中点亮的圣诞树动画效果源码.zip
11-03
本资源“HTML5+SVG+CSS3实现雪中点亮的圣诞树动画效果源码.zip”显然是一个利用这三种技术创建的圣诞节主题动态效果，能够让用户在网页上看到一个在飘雪背景中闪烁的圣诞树动画。 首先，HTML5作为现代网页的基础，...
html5 svg+css3带左侧收缩菜单宇航员
07-13
HTML5和SVG+CSS3是现代网页开发中的关键技术，它们为网页设计师提供了强大的工具来创建交互式、动态和视觉上吸引人的用户界面。在“html5 svg+css3带左侧收缩菜单宇航员”这个项目中，我们可以看到这些技术如何协同...
html5 svg+css3仿微信加载框动画特效
06-11
html5 svg+css3制作的仿加载框动画特效，在网页中间居中的转圈加载动画效果。
CSS3+HTML5 SVG彩色霓虹灯文字特效
06-11
【CSS3+HTML5 SVG彩色霓虹灯文字特效】是一种现代网页设计中常见的视觉元素，它结合了HTML5、CSS3以及SVG（可缩放矢量图形）技术，创造出动态的、具有霓虹灯效果的文字动画。这个特效使得网页中的文字看起来如同真实...
圣诞节动态下雪页面雪花飘落特效代码
03-20
圣诞节动态下雪页面雪花飘落代码基于HTML5 Canvas实现，可以用来制作圣诞节主题相关的各种网页特效。蓝色的背景下，白色的雪花纷纷飘落，效果很不错！
html5 svg打开圣诞礼盒和下雪动画效果
12-13
一款很炫的html5 svg打开圣诞礼盒和下雪动画效果。点击礼盒后会飞出许多icon礼物，之后会有雪花从屏幕上方飘落。Merry Christmas!
python显示gif图片_利用Python制作GIF图片
weixin_40001395的博客
12-05 389
#Python制作GIF图片import imageiodef create_gif(image_list, gif_name, duration = 0.1):''':param image_list: 这个列表用于存放生成动图的图片:param gif_name: 字符串，所生成gif文件名，带.gif后缀:param duration: 图像间隔时间:return:'''frames = [...
用CSS画三角形，圣诞树
哈哈__哈哈的专栏
12-25 316
  &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #main1{ width: 1000px; height: 500px; background-color: gray; } #triangle{ width: 200px; height:...
html制作圣诞树
热门推荐
weixin_47800450的博客
12-25 6万+
HTML代码 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - A Pen by 结弦</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial
SVG 绘制基本图像
MichaelAn的博客
01-07 4961
svg http://www.ruanyifeng.com/blog/2018/08/svg.html 1、svg 插入界面 方法一：直接以svg标签插入界面中 方法二：以外部文件的形式插入embed iframe 标签中 方法三：以 css 的背景图片插入界面中 2、svg标签使用 基本图形 &amp;lt;svg width='100%' height='100%' viewBox=&quot;50 50 50...
用svg绘制圣诞帽
diaobiao8107的博客
12-25 1772
今天是圣诞节，无意中看到csdn博客上面给我的头像带了个圣诞帽，比较好奇，想看看csdn是怎么实现的，果然用的是svg实现，不过代码有点冗长。 <html> <body> <svg id="csdnc-memberhead" width="24" height="24" style="display: inline;"> ...
圣诞树下雪特效
ybyshezhang的博客
12-23 1280
整个下雪特效 图片 下雪特效 Wish You Merry Christmas~

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坏男孩！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值