前端inn

公眾號ID：前端inn

關(guān)注

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

1

項(xiàng)目準(zhǔn)備

1.1 項(xiàng)目介紹

• 項(xiàng)目名為：愛心飄落

• 項(xiàng)目描述：此項(xiàng)目是一個(gè)小案例，感興趣可以了解學(xué)習(xí)，增加對前端的學(xué)習(xí)興趣

• 基礎(chǔ)知識：

  • 基本的HTML結(jié)構(gòu)

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

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

  • 插件的引用

• 項(xiàng)目成果展示：

1.2 項(xiàng)目的結(jié)構(gòu)

• 最重要的文件

  • index.html：此文件是最終實(shí)現(xiàn)愛心飄落的文件

  • js文件夾里面的兩個(gè)文件：這個(gè)是實(shí)現(xiàn)愛心飄落的外來文件，不是自己寫的哦！

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

2

如何設(shè)計(jì)一個(gè)愛心

2.1案例分析

• 這個(gè)愛心的設(shè)計(jì)：主要純靠CSS功底

• 接下來我來分析一下

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

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

  • 【3】需要用到兩個(gè)偽元素標(biāo)簽，來承裝左右格一半的愛心

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

2.2 代碼展示

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

3

插件的使用

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

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

• 將上面的代碼進(jìn)行對比就清楚了

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

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

4

背景圖的添加

• 直接在body里面添加

• 將body修改為以下代碼：

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

5

使用JS切換背景

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

6

案例完整代碼

• 快去運(yùn)行以下代碼，有驚喜喲！！！

? ? ? ? ?愛心飄落 ? ? ? ? ? ? ? ?body { ? ? ? ? ? ?/* 溢出隱藏 防止愛心超出屏幕，而導(dǎo)致瀏覽器閃爍 */ ? ? ? ? ? ?overflow: hidden; ? ? ? ? ? ?/* 設(shè)置背景圖片的url */ ? ? ? ? ? ?background-image: url(images/1.jpg); ? ? ? ? ? ?/* 設(shè)置背景圖片是否平鋪 */ ? ? ? ? ? ?background-repeat: no-repeat; ? ? ? ? ? ?/* 設(shè)置背景圖片縮放：全屏顯示 */ ? ? ? ? ? ?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; ? ? ? ? ? ?/* 設(shè)置小圓角 左上 右上 右下 左下*/ ? ? ? ? ? ?border-radius: 5px 5px 0px 0px; ? ? ? } ? ? ? ?/* 偽元素不占用DOM，不能被選中和修改 提高性能 */ ? ? ? ?/* 使用偽元素選擇器：左邊一半的愛心 */ ? ? ? ? ? ? ? ?.snowfall-flakes::before { ? ? ? ? ? ?transform: rotate(-45deg); ? ? ? } ? ? ? ?/* 使用偽元素選擇器：右邊一半的愛心 */ ? ? ? ? ? ? ? ?.snowfall-flakes::after { ? ? ? ? ? ?left: 4px; ? ? ? ? ? ?transform: rotate(45deg); ? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?//調(diào)用飄落函數(shù) 實(shí)現(xiàn)飄落效果 ? ? ? ?$(document).snowfall({ ? ? ? ? ? ?flakeCount: 20, // 愛心的個(gè)數(shù) ? ? ? ? ? ?maxSpeed: 5 // 最大速度 ? ? ? }); ? ? ? ?// 設(shè)置圖片的url地址的數(shù)組 ? ? ? ?imagesArray = [ ? ? ? ? ? ?'images//1.jpg', ? ? ? ? ? ?'images//2.jpg', ? ? ? ? ? ?'images//3.jpg', ? ? ? ? ? ?'images//4.jpg', ? ? ? ? ? ?'images//5.jpg' ? ? ? ] ? ? ? ?// 設(shè)置一個(gè)變量，使其成為數(shù)組下標(biāo) ? ? ? ?let count = 1; ? ? ? ?// 設(shè)置定時(shí)器 ? ? ? ?// 功能：每5秒換一張圖片 ? ? ? ?setInterval(function() { ? ? ? ? ? ?// document.body 獲取body標(biāo)簽 ? ? ? ? ? ?// 設(shè)置圖片的url：document.body.style.backgroundImage ? ? ? ? document.body.style.backgroundImage = 'url(' + imagesArray[count++] + ')'; ? ? ? ? ? ?// count值為5，使count值回到零 ? ? ? ? ? ?if (count == 5) { ? ? ? ? ? ? ? ?count = 0; ? ? ? ? ? } ? ? ? }, 1000); ? ??友情提示

如果需要素材，請加學(xué)習(xí)群?QQ群：1141255876

若你對前端開發(fā)有興趣，請關(guān)注前端inn！！！

求分享

求點(diǎn)贊

求在看

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。