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】需要定位和旋转控制位置和角度，然后通过浏览器调试工具，将两个一半的爱心拼接起来

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.backgroundImage          document.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.backgroundImage         document.body.style.backgroundImage = 'url(' + imagesArray[count++] + ')';            // count值为5，使count值回到零            if (count == 5) {                count = 0;            }        }, 1000);    

如果需要素材，请加学习群 QQ群：1141255876

若你对前端开发有兴趣，请关注前端inn！！！

求分享

求点赞

求在看

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！