前端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!!!
求分享
求点赞
求在看