前端inn

公眾號ID：前端inn

關注

作者：冥冥之中立刻有編輯：煜喵喵不愛喝酒之前有聽到粉絲群里小伙伴說，前端知識學了很多，不做出個項目總覺得自己沒學會，還沒什么成就感。今天，小編就給大家講一個很有趣的小案例，廢話不多說，趕快學起來吧！

1

項目準備

1.1 項目介紹

• 項目名為：愛心飄落

• 項目描述：此項目是一個小案例，感興趣可以了解學習，增加對前端的學習興趣

• 基礎知識：

  • 基本的HTML結構

  • CSS常用屬性以及偽元素元素選擇器

  • JS文件的引用，以及JS的一部分基本語法

  • 插件的引用

• 項目成果展示：

1.2 項目的結構

• 最重要的文件

  • index.html：此文件是最終實現愛心飄落的文件

  • js文件夾里面的兩個文件：這個是實現愛心飄落的外來文件，不是自己寫的哦！

  • 愛心設計.html：這個是怎么設計一個愛心的文件，也比較重要，后面改愛心的大小，還是會用到

2

如何設計一個愛心

2.1案例分析

• 這個愛心的設計：主要純靠CSS功底

• 接下來我來分析一下

  • 【1】我們需要一個大盒子來裝一個完整的愛心

  • 【2】一個完整的愛心，我們可以拆成兩半，左邊一半和右邊一半

  • 【3】需要用到兩個偽元素標簽，來承裝左右格一半的愛心

  • 【4】需要定位和旋轉控制位置和角度，然后通過瀏覽器調試工具，將兩個一半的愛心拼接起來

2.2 代碼展示

? ? ? ? ?愛心設計 ? ? ? ? ? ?.heart?{ ? ? ? ? ? ?/* 子絕父相 */ ? ? ? ? ? ?position: relative; ? ? ? ? ? ?width: 500px; ? ? ? ? ? ?height: 500px; ? ? ? ? ? ?/* 塊級盒子水平居中 上下 左右 */ ? ? ? ? ? ?margin: 100px auto; ? ? ? ? ? ?/* 設置背景顏色 */ ? ? ? ? ? ?background-color: pink; ? ? ? } ? ? ? ?/* 偽元素選擇器 不占用DOM 無法被選中 可以優化性能 */ ? ? ? ?/* 并集選擇器：抽取公共的屬性 減少代碼重復 */ ? ? ? ? ? ? ? ?.heart:before, ? ? ? ?.heart:after { ? ? ? ? ? ?/* 偽元素的必要屬性，用于設置文本內容 */ ? ? ? ? ? ?content: ""; ? ? ? ? ? ?/* 絕對定位 */ ? ? ? ? ? ?position: absolute; ? ? ? ? ? ?left: 0px; ? ? ? ? ? ?top: 0px; ? ? ? ? ? ?width: 300px; ? ? ? ? ? ?height: 450px; ? ? ? ? ? ?background: red; ? ? ? ? ? ?/* 設置小圓角 左上 右上 右下 左下 */ ? ? ? ? ? ?/* 這里只設置左上和右上，半徑為寬度的一半 */ ? ? ? ? ? ?border-radius: 150px 150px 0 0; ? ? ? } ? ? ? ?/* 左邊愛心的一半 */ ? ? ? ? ? ? ? ?.heart:before { ? ? ? ? ? ?/* CSS3 旋轉屬性 */ ? ? ? ? ? ?transform: rotate(-45deg); ? ? ? } ? ? ? ?/* 右邊愛心的一半 */ ? ? ? ? ? ? ? ?.heart-body:after { ? ? ? ? ? ?/* 設置絕對定位的偏移量 這個值需要瀏覽器調試得出*/ ? ? ? ? ? ?left: 109px; ? ? ? ? ? ?/* CSS3 旋轉屬性 */ ? ? ? ? ? ?transform: rotate(45deg); ? ? ? } ? ? ? ?

3

插件的使用

• 看到這一步，起始就可以運行代碼，看到愛心飄落的效果了，后面只是為了加背景，好看而已

• 插件的使用，需要修改一部分代碼，這里展示代碼就明白了

• 將上面的代碼進行對比就清楚了

• 主要是將前面的(.heart-body)修改為(.snowfall-flakes)插件自帶的類

? ? ? ? ?愛心飄落 ? ? ? ? ? ? ? ?body { ? ? ? ? ? ?/* 溢出隱藏 防止愛心超出屏幕，而導致瀏覽器閃爍 */ ? ? ? ? ? ?overflow: hidden; ? ? ? } ? ? ? ? ? ? ? ?/* 并集選則器，抽取相同代碼 */ ? ? ? ? ? ? ? ?.snowfall-flakes::before, ? ? ? ?.snowfall-flakes::after { ? ? ? ? ? ?/* 激活偽元素的必要屬性 */ ? ? ? ? ? ?content: ""; ? ? ? ? ? ?/* 絕對定位 */ ? ? ? ? ? ?position: absolute; ? ? ? ? ? ?left: 0px; ? ? ? ? ? ?top: 0px; ? ? ? ? ? ?display: block; ? ? ? ? ? ?width: 10px; ? ? ? ? ? ?height: 15px; ? ? ? ? ? ?/* 背景顏色 */ ? ? ? ? ? ?background-color: red; ? ? ? ? ? ?/* 設置小圓角 左上 右上 右下 左下*/ ? ? ? ? ? ?border-radius: 5px 5px 0px 0px; ? ? ? } ? ? ? ?/* 偽元素不占用DOM，不能被選中和修改 提高性能 */ ? ? ? ?/* 使用偽元素選擇器：左邊一半的愛心 */ ? ? ? ? ? ? ? ?.snowfall-flakes::before { ? ? ? ? ? ?transform: rotate(-45deg); ? ? ? } ? ? ? ?/* 使用偽元素選擇器：右邊一半的愛心 */ ? ? ? ? ? ? ? ?.snowfall-flakes::after { ? ? ? ? ? ?left: 4px; ? ? ? ? ? ?transform: rotate(45deg); ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//調用飄落函數 實現飄落效果 ? ? ? ?$(document).snowfall({ ? ? ? ? ? ?flakeCount: 20, // 愛心的個數 ? ? ? ? ? ?maxSpeed: 5 // 最大速度 ? ? ? }); ? ?

4

背景圖的添加

• 直接在body里面添加

• 將body修改為以下代碼：

?body { ? ? ? ? ? ?/* 溢出隱藏 防止愛心超出屏幕，而導致瀏覽器閃爍 */ ? ? ? ? ? ?overflow: hidden; ? ? ? ? ? ?/* 設置背景圖片的url */ ? ? ? ? ? ?background-image: url(images/1.jpg); ? ? ? ? ? ?/* 設置背景圖片是否平鋪 */ ? ? ? ? ? ?background-repeat: no-repeat; ? ? ? ? ? ?/* 設置背景圖片縮放：全屏顯示 */ ? ? ? ? ? ?background-size: cover; ? ? ? }

5

使用JS切換背景

? ? ? ?//調用飄落函數 實現飄落效果 ? ? ? ?$(document).snowfall({ ? ? ? ? ? ?flakeCount: 20, // 愛心的個數 ? ? ? ? ? ?maxSpeed: 5 // 最大速度 ? ? ? }); ? ? ? ?// 設置圖片的url地址的數組 ? ? ? ?imagesArray = [ ? ? ? ? ? ?'images//1.jpg', ? ? ? ? ? ?'images//2.jpg', ? ? ? ? ? ?'images//3.jpg', ? ? ? ? ? ?'images//4.jpg', ? ? ? ? ? ?'images//5.jpg' ? ? ? ] ? ? ? ?// 設置一個變量，使其成為數組下標 ? ? ? ?let count = 1; ? ? ? ?// 設置定時器 ? ? ? ?// 功能：每5秒換一張圖片 ? ? ? ?setInterval(function() { ? ? ? ? ? ?// document.body 獲取body標簽 ? ? ? ? ? ?// 設置圖片的url：document.body.style.backgroundImage ? ? ? ? ?document.body.style.backgroundImage = 'url(' + imagesArray[count++] + ')'; ? ? ? ? ? ?// count值為5，使count值回到零 ? ? ? ? ? ?if (count == 5) { ? ? ? ? ? ? ? ?count = 0; ? ? ? ? ? } ? ? ? }, 5000);

6

案例完整代碼

• 快去運行以下代碼，有驚喜喲！！！

? ? ? ? ?愛心飄落 ? ? ? ? ? ? ? ?body { ? ? ? ? ? ?/* 溢出隱藏 防止愛心超出屏幕，而導致瀏覽器閃爍 */ ? ? ? ? ? ?overflow: hidden; ? ? ? ? ? ?/* 設置背景圖片的url */ ? ? ? ? ? ?background-image: url(images/1.jpg); ? ? ? ? ? ?/* 設置背景圖片是否平鋪 */ ? ? ? ? ? ?background-repeat: no-repeat; ? ? ? ? ? ?/* 設置背景圖片縮放：全屏顯示 */ ? ? ? ? ? ?background-size: cover; ? ? ? } ? ? ? ?/* 并集選則器，抽取相同代碼 */ ? ? ? ? ? ? ? ?.snowfall-flakes::before, ? ? ? ?.snowfall-flakes::after { ? ? ? ? ? ?/* 激活偽元素的必要屬性 */ ? ? ? ? ? ?content: ""; ? ? ? ? ? ?/* 絕對定位 */ ? ? ? ? ? ?position: absolute; ? ? ? ? ? ?left: 0px; ? ? ? ? ? ?top: 0px; ? ? ? ? ? ?display: block; ? ? ? ? ? ?width: 10px; ? ? ? ? ? ?height: 15px; ? ? ? ? ? ?/* 背景顏色 */ ? ? ? ? ? ?background-color: red; ? ? ? ? ? ?/* 設置小圓角 左上 右上 右下 左下*/ ? ? ? ? ? ?border-radius: 5px 5px 0px 0px; ? ? ? } ? ? ? ?/* 偽元素不占用DOM，不能被選中和修改 提高性能 */ ? ? ? ?/* 使用偽元素選擇器：左邊一半的愛心 */ ? ? ? ? ? ? ? ?.snowfall-flakes::before { ? ? ? ? ? ?transform: rotate(-45deg); ? ? ? } ? ? ? ?/* 使用偽元素選擇器：右邊一半的愛心 */ ? ? ? ? ? ? ? ?.snowfall-flakes::after { ? ? ? ? ? ?left: 4px; ? ? ? ? ? ?transform: rotate(45deg); ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//調用飄落函數 實現飄落效果 ? ? ? ?$(document).snowfall({ ? ? ? ? ? ?flakeCount: 20, // 愛心的個數 ? ? ? ? ? ?maxSpeed: 5 // 最大速度 ? ? ? }); ? ? ? ?// 設置圖片的url地址的數組 ? ? ? ?imagesArray = [ ? ? ? ? ? ?'images//1.jpg', ? ? ? ? ? ?'images//2.jpg', ? ? ? ? ? ?'images//3.jpg', ? ? ? ? ? ?'images//4.jpg', ? ? ? ? ? ?'images//5.jpg' ? ? ? ] ? ? ? ?// 設置一個變量，使其成為數組下標 ? ? ? ?let count = 1; ? ? ? ?// 設置定時器 ? ? ? ?// 功能：每5秒換一張圖片 ? ? ? ?setInterval(function() { ? ? ? ? ? ?// document.body 獲取body標簽 ? ? ? ? ? ?// 設置圖片的url：document.body.style.backgroundImage ? ? ? ? document.body.style.backgroundImage = 'url(' + imagesArray[count++] + ')'; ? ? ? ? ? ?// count值為5，使count值回到零 ? ? ? ? ? ?if (count == 5) { ? ? ? ? ? ? ? ?count = 0; ? ? ? ? ? } ? ? ? }, 1000); ? ??友情提示

如果需要素材，請加學習群?QQ群：1141255876

若你對前端開發有興趣，請關注前端inn！！！

求分享

求點贊

求在看

總結

以上是生活随笔為你收集整理的html樱花飘落代码_爱心飘落特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。