整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
人在空间展示时，用的到雪花飘动的效果，mark收藏一下，简单的几行代码就搞定，以后在做论坛和空间等需求时方便不时之需；下图是展示效果截图：
视频展示截图
1.视频播放展示效果 点击观看
2.实现源码：
2.1 html
<div id="nodeContent"></div>
2.2 css
html,body {
width: 100%;
margin: 0px;
padding: 0px;
}
.backShowColor{
background-color: black;
}
#nodeContent{
position: fixed;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
overflow: hidden;
}
#nodeContent > div{
position: absolute;
max-width: 100px;
max-height: 100px;
-webkit-animation-iteration-count: infinitDatae, infinitDatae;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in;
}
#nodeContent > div > img{
width: 100%;
-webkit-animation-iteration-count: infinitDatae;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade{
0%{
opacity: 1;
}
95%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@-webkit-keyframes drop{
0%{
-webkit-transform: translate(0px, -50px);
}
100%{
-webkit-transform: translate(0px, 650px);
}
}
@-webkit-keyframes clockwiseSpin{
0%{
-webkit-transform: rotate(-50deg);
}
100%{
-webkit-transform: rotate(50deg);
}
}
@-webkit-keyframes counterclockwiseSpinAndFlip
{
0% {
-webkit-transform: scale(-1, 1) rotate(50deg);
}
100%{
-webkit-transform: scale(-1, 1) rotate(-50deg);
}
}
2.3 js
function randomFloat(low, high){
return low + Math.random() * (high - low);
}
function pixelValue(value){
return value + 'px';
}
function initData(){
// 原生js获取nodeContent，可以使用jq$("#nodeContent")
var container = document.getElementById('nodeContent');
for (var i = 0; i < 50; i++)
{
container.appendChild(createNode());
}
}
function duration(value){
return value + 's';
}
function randomNum(low, high){
return low + Math.floor(Math.random() * (high - low));
}
// 创建
function createNode(){
// 创建dom
var childDiv = document.createElement('div');
var imgs = document.createElement('img');
// 获取资源
imgs.src ='static/snow' + randomNum(1, 10) + '.png';
childDiv.style.top = "-10px";
childDiv.style.left = pixelValue(randomNum(0, 1500));
// 创建动画
var animationName = (Math.random() < 0.8) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';
childDiv.style.webkitAnimationName = 'fade, drop';
imgs.style.webkitAnimationName = animationName;
// 位置
var fadeAndDrop = duration(randomFloat(5, 11));
var spinDuration = duration(randomFloat(4, 8));
childDiv.style.webkitAnimationDuration = fadeAndDrop + ', ' + fadeAndDrop;
var nodeDelay = duration(randomFloat(0, 5));
childDiv.style.webkitAnimationDelay = nodeDelay + ', ' + nodeDelay;
imgs.style.webkitAnimationDuration = spinDuration;
childDiv.appendChild(imgs);
return childDiv;
}
window.addEventListener('load', initData);
【感恩平台】
下是使用HTML、CSS和JavaScript实现"樱花飘落"和"雪花飘落"特效的简单示例：
1. 樱花飘落特效：
HTML：
```html
<div class="sakura-container">
<img src="sakura.png" class="sakura" alt="sakura">
</div>
```
CSS：
```css
.sakura-container {
position: relative;
height: 100vh;
overflow: hidden;
}
.sakura {
position: absolute;
top: -50px;
animation: sakura-fall 10s linear infinite;
}
@keyframes sakura-fall {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100vh);
}
}
```
2. 雪花飘落特效：
HTML：
```html
<div class="snow-container">
<span class="snowflake"></span>
</div>
```
CSS：
```css
.snow-container {
position: relative;
height: 100vh;
overflow: hidden;
background-color: #000;
}
.snowflake {
position: absolute;
top: -10px;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
animation: snow-fall 5s linear infinite;
}
@keyframes snow-fall {
0% {
transform: translateY(0) rotate(0deg);
}
100% {
transform: translateY(100vh) rotate(360deg);
}
}
```
JavaScript：
```javascript
function createSnowflakes() {
const snowContainer = document.querySelector('.snow-container');
const numFlakes = 50;
for (let i = 0; i < numFlakes; i++) {
const snowflake = document.createElement('span');
snowflake.classList.add('snowflake');
snowflake.style.left = `${Math.random() * 100}%`;
snowflake.style.animationDelay = `${Math.random() * 5}s`;
snowContainer.appendChild(snowflake);
}
}
createSnowflakes();
```
将上述代码保存为HTML文件，并在相应的位置放置樱花或雪花图像，即可实现对应特效。注意，需要在CSS中调整图像和容器的样式以适应实际需求。这只是一个简单示例，您可以根据自己的喜好和需求进行定制和扩展。
由于上传图片大小有限制，实际效果比这流畅很多,上几张张静态图，大家也可以感受下！
前端现阶段可以说是非常火热的，不管你是做网站，还是移动端，只要是可视化的，只是原生js很少有人会用了，但是学习又必须要学会这个，像要求比较高的估计要懂 vue、angular、react其技术含量丝毫不亚于移动端和服务器端语言，有很多人说前端已经满了，进不去了，我觉得说这话的人进不去的原因是出自他自身，仅仅只是写一点小网站确实没什么前途，语言都是配套来用的，而小公司往往喜欢复合型的人才，所以学习的深度和广度都很重要，最重要的是态度！
对于web前端学习不懂的，或者不知道怎么学习的可以来我的前端群589651705，不管你是小白还是大牛，小编都欢迎，群不定期分享干货，欢迎初学和进阶中的小伙伴。
雪花飘动特效源码
css代码：
javascript代码：
制作出来的和这图片的是不是很像呢
*请认真填写需求信息，我们会在24小时内与您取得联系。
