html樱花飘落代码_爱心飘落特效

前端inn

公众号ID：前端inn

关注

作者：冥冥之中立刻有 编辑：煜喵喵不爱喝酒 之前有听到粉丝群里小伙伴说，前端知识学了很多，不做出个项目总觉得自己没学会，还没什么成就感。今天，小编就给大家讲一个很有趣的小案例，废话不多说，赶快学起来吧！

1

项目准备

1.1 项目介绍

• 项目名为：爱心飘落

• 项目描述：此项目是一个小案例，感兴趣可以了解学习，增加对前端的学习兴趣

• 基础知识：

  • 基本的HTML结构

  • CSS常用属性以及伪元素元素选择器

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

  • 插件的引用

• 项目成果展示：

1.2 项目的结构

• 最重要的文件

  • index.html：此文件是最终实现爱心飘落的文件

  • js文件夹里面的两个文件：这个是实现爱心飘落的外来文件，不是自己写的哦！

  • 爱心设计.html：这个是怎么设计一个爱心的文件，也比较重要，后面改爱心的大小，还是会用到

2

如何设计一个爱心

2.1案例分析

• 这个爱心的设计：主要纯靠CSS功底

• 接下来我来分析一下

  • 【1】我们需要一个大盒子来装一个完整的爱心

  • 【2】一个完整的爱心，我们可以拆成两半，左边一半和右边一半

  • 【3】需要用到两个伪元素标签，来承装左右格一半的爱心

  • 【4】需要定位和旋转控制位置和角度，