前端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.backgroundImagedocument.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.backgroundImagedocument.body.style.backgroundImage = 'url(' + imagesArray[count++] + ')';// count值为5，使count值回到零if (count == 5) {count = 0; }}, 1000);
?友情提示
如果需要素材，请加学习群QQ群：1141255876
若你对前端开发有兴趣，请关注前端inn！！！
求分享
求点赞
求在看
