整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
人在空間展示時，用的到雪花飄動的效果，mark收藏一下，簡單的幾行代碼就搞定，以后在做論壇和空間等需求時方便不時之需；下圖是展示效果截圖：
視頻展示截圖
1.視頻播放展示效果 點擊觀看
2.實現(xiàn)源碼：
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));
}
// 創(chuàng)建
function createNode(){
// 創(chuàng)建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));
// 創(chuàng)建動畫
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實現(xiàn)"櫻花飄落"和"雪花飄落"特效的簡單示例：
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文件，并在相應(yīng)的位置放置櫻花或雪花圖像，即可實現(xiàn)對應(yīng)特效。注意，需要在CSS中調(diào)整圖像和容器的樣式以適應(yīng)實際需求。這只是一個簡單示例，您可以根據(jù)自己的喜好和需求進(jìn)行定制和擴(kuò)展。
由于上傳圖片大小有限制，實際效果比這流暢很多,上幾張張靜態(tài)圖，大家也可以感受下！
前端現(xiàn)階段可以說是非常火熱的，不管你是做網(wǎng)站，還是移動端，只要是可視化的，只是原生js很少有人會用了，但是學(xué)習(xí)又必須要學(xué)會這個，像要求比較高的估計要懂 vue、angular、react其技術(shù)含量絲毫不亞于移動端和服務(wù)器端語言，有很多人說前端已經(jīng)滿了，進(jìn)不去了，我覺得說這話的人進(jìn)不去的原因是出自他自身，僅僅只是寫一點小網(wǎng)站確實沒什么前途，語言都是配套來用的，而小公司往往喜歡復(fù)合型的人才，所以學(xué)習(xí)的深度和廣度都很重要，最重要的是態(tài)度！
對于web前端學(xué)習(xí)不懂的，或者不知道怎么學(xué)習(xí)的可以來我的前端群589651705，不管你是小白還是大牛，小編都?xì)g迎，群不定期分享干貨，歡迎初學(xué)和進(jìn)階中的小伙伴。
雪花飄動特效源碼
css代碼：
javascript代碼：
制作出來的和這圖片的是不是很像呢
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
