雪花css样式,css雪花动画

效果图：

HTML的结构如下，创建10个雪花元素。

其实三四个元素也可以。元素越多雪花越多，雪花的速度不一样，会显得更有层次感。

一朵雪花

首先，我们先写一朵雪花，并设为绝对定位。.snow {

position: absolute;

color: #fff;

&:after{

content: "❄";

}

这样我们就得到一朵雪花了。那么怎么生成很多的雪花呢？我们可以用text-shadow这个属性，给雪花设置一个阴影。.snow {

position: absolute;

color: #fff;

&:after {

text-shadow: 10px 10px #fff;

content: "❄";

}

那么给一朵雪花生成3个阴影，就写3个shadow值就可以了。text-shadow: 10px 10px #fff, 5px 25px #fff, 22px 5px #fff;

多重雪花

当我们希望雪花能有更更更多的阴影，但是手动写太累人了也不科学，所以我们需要用到SASS的for循环，并结合random()随机函数去帮我们随机生成多重阴影。

阴影的颜色可以设置为不同的透明度，可以让雪花看起来有层次感。@function boxShadow ($n) {

$value: #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10);

@for $i from 1 through $n{

$value: #{$value} , #{random(2000)}px #{random(2000)}px rgba(255,255,255,random(10)/10);

}

@return $value;

}

.snow {

position: absolute;

color: #fff;

&:after{

text-shadow: boxShadow(150);

content: "❄";

}

此时我们一朵雪花的多重阴影就完成了。但是一朵雪花的动画就只动一遍就消失了，并不是我们想要的效果。所以我们需要多添加几朵雪花，让它们不同时间不同位置落下。

雪花飘落@for $i from 1 through 10 {

.snow:nth-child(#{$i}) {

left: #{random(30)}vw;

font-size: #{(random(15) + 12)}px; // 雪花大小随机

color: rgba(255, 255, 255, random()); // 雪花透明度随机

animation: falldown #{random(5) + 85}s #{$i * -3}s infinite both; // 雪花下降的时间随机，区间为86-90s

&:after {

content: "❄";

text-shadow: boxShadow(random(150));

}

@keyframes falldown {

0% {

transform: translate3d(0, -2000px, 0);

}

100%{

transform: translate3d(0, 2000px, 0);

}

雪花css样式,css雪花动画相关推荐

JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
java样式是什么_java css样式 css样式的种类选择器文本相关样式背景相关样式边框盒子模式...
今日内容: ? CSS样式 ? CSS样式的种类 ? 选择器 ? 文本相关样式 ? 背景相关样式 ? 边框 ? 盒子模式 select标签下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签 ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
在html语言描述中，css的特点有,css样式 css样式语言特点
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修 ...
表格内容居中css样式,css表格中的内容如何居中？css表格中的文本样式介绍
你知道css表格的内容太是如何居中的吗?你知道css表格的文本如何设计左对齐吗?你知道css表格如何设置右对齐吗?这些内容都在这篇文章之中等着你来学习了. 首先我们先介绍css表格中的内容是如何居中的 ...
html中初始化css样式,css样式初始化 normalize
总于找到一款良心的css初始化样式重置,哈哈在没上google之前,在百度搜一些腾讯,阿里等初始化样式,效果一般般,勉强用, 网上也有很多类似不过大部分都是去除浏览器所有样式而normalize. ...
html表格居中设置css样式,css怎么设置table居中？
一般情况下,页面中可以利用align进行页面的居中.靠左或者靠右对齐,但是采用CSS样式表来做更简单一些,下面我们来看一下使用css设置table居中的方法. css设置居中的方法: 1.利用marg ...
Vue——在vue中，动态js改变css样式 (css 层叠模式)
vue文件 <el-table ref="myTable"> </el-table> <button @click="click" ...
html+CSS样式：雪花飘落背景（雪花为图片）
多种雪花图片,自由下落到底端渐变消失 html代码 <!DOCTYPE html><html style="background-color: black"> ...

雪花css样式,css雪花动画

雪花css样式,css雪花动画相关推荐

最新文章

热门文章