前端inn
公众号ID:前端inn
关注
作者:冥冥之中立刻有 编辑:煜喵喵不爱喝酒 之前有听到粉丝群里小伙伴说,前端知识学了很多,不做出个项目总觉得自己没学会,还没什么成就感。今天,小编就给大家讲一个很有趣的小案例,废话不多说,赶快学起来吧!1
项目准备
1.1 项目介绍
项目名为:爱心飘落
项目描述:此项目是一个小案例,感兴趣可以了解学习,增加对前端的学习兴趣
基础知识:
基本的HTML结构
CSS常用属性以及伪元素元素选择器
JS文件的引用,以及JS的一部分基本语法
插件的引用
项目成果展示:
1.2 项目的结构
最重要的文件
index.html:此文件是最终实现爱心飘落的文件
js文件夹里面的两个文件:这个是实现爱心飘落的外来文件,不是自己写的哦!
爱心设计.html:这个是怎么设计一个爱心的文件,也比较重要,后面改爱心的大小,还是会用到
2
如何设计一个爱心
2.1案例分析
这个爱心的设计:主要纯靠CSS功底
接下来我来分析一下
【1】我们需要一个大盒子来装一个完整的爱心
【2】一个完整的爱心,我们可以拆成两半,左边一半和右边一半
【3】需要用到两个伪元素标签,来承装左右格一半的爱心
【4】需要定位和旋转控制位置和角度,然