利用snowfall.jquery.js实现满屏爱心表白代码

文章目录

第一步：利用伪元素before和 :after画两个重叠在一起的长方形，如图所示： <!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style media="screen"> body { overflow-y: hidden; } .heart-body { width: 500px; margin: 100px auto; position: relative; } .snowfall-flakes:before, .snowfall-flakes:after { content: ""; position: absolute; left: 0px; top: 0px; display: block; width: 30px; height: 46px; background: red; border-radius: 50px 50px 0 0; } </style></head><body> <div class="heart-body"> <div class="snowfall-flakes"></div> </div></body></html> 第二步：利用 transform 属性将两个两个伪元素分别旋转负45度、45度，如图所示： .snowfall-flakes:before { -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */ -moz-transform: rotate(-45deg); /* Firefox */ -ms-transform: rotate(-45deg); /* IE 9 */ -o-transform: rotate(-45deg); /* Opera */ transform: rotate(-45deg);}.snowfall-flakes:after { -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -ms-transform: rotate(45deg); /* IE 9 */ -o-transform: rotate(45deg); /* Opera */ transform: rotate(45deg); } 第三步：利用 left 属性，将伪元素 after 向左偏移一定像素，使两个微元素部分重叠，组成爱心样子，如图所示： .snowfall-flakes:after { left: 13px; -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -ms-transform: rotate(45deg); /* IE 9 */ -o-transform: rotate(45deg); /* Opera */ transform: rotate(45deg);} 爱心我们画完了，那么怎么让爱心实现满屏飞呢，其实只需要调用jquery.js和 snowfall.jquery.js就能实现，效果图如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style media="screen"> body { overflow: hidden; } .heart-body { width: 500px; margin: 100px auto; position: relative; } .snowfall-flakes:before, .snowfall-flakes:after { content: ""; position: absolute; left: 0px; top: 0px; display: block; width: 30px; height: 46px; background: red; border-radius: 50px 50px 0 0; } .snowfall-flakes:before { -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */ -moz-transform: rotate(-45deg); /* Firefox */ -ms-transform: rotate(-45deg); /* IE 9 */ -o-transform: rotate(-45deg); /* Opera */ transform: rotate(-45deg); } .snowfall-flakes:after { left: 13px; -webkit-transform: rotate(45deg); /* Safari 和 Chrome */ -moz-transform: rotate(45deg); /* Firefox */ -ms-transform: rotate(45deg); /* IE 9 */ -o-transform: rotate(45deg); /* Opera */ transform: rotate(45deg); } </style></head><body> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/snowfall.jquery.js"></script> <script> //调用飘落函数实现飘落效果 $(document).snowfall({ flakeCount: 50 //爱心的个数 }); </script></body></html> 改变爱心的大小，需改变以下属性的值： .snowfall-flakes:before,.snowfall-flakes:after { width: 10px; height: 16px; border-radius: 10px 10px 0 0;}.snowfall-flakes:after { left: 4px;} 如果我的博客对你有帮助请 “点赞” “️评论” “收藏” 一键三连哦！

第一步：利用伪元素before和 :after画两个重叠在一起的长方形，如图所示：

利用snowfall.jquery.js实现满屏爱心表白代码

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title></title>
 <style media="screen">
 body {
 overflow-y: hidden;
 }

 .heart-body {
 width: 500px;
 margin: 100px auto;
 position: relative;
 }

 .snowfall-flakes:before,
 .snowfall-flakes:after {
 content: "";
 position: absolute;
 left: 0px;
 top: 0px;
 display: block;
 width: 30px;
 height: 46px;
 background: red;
 border-radius: 50px 50px 0 0;
 }

 </style>
</head>

<body>
 <div class="heart-body">
 <div class="snowfall-flakes"></div>
 </div>
</body>

</html>

第二步：利用 transform 属性将两个两个伪元素分别旋转负45度、45度，如图所示：

利用snowfall.jquery.js实现满屏爱心表白代码

.snowfall-flakes:before {
 -webkit-transform: rotate(-45deg);
 /* Safari 和 Chrome */
 -moz-transform: rotate(-45deg);
 /* Firefox */
 -ms-transform: rotate(-45deg);
 /* IE 9 */
 -o-transform: rotate(-45deg);
 /* Opera */
 transform: rotate(-45deg);
}

.snowfall-flakes:after {
 -webkit-transform: rotate(45deg);
 /* Safari 和 Chrome */
 -moz-transform: rotate(45deg);
 /* Firefox */
 -ms-transform: rotate(45deg);
 /* IE 9 */
 -o-transform: rotate(45deg);
 /* Opera */
 transform: rotate(45deg);
 }

第三步：利用 left 属性，将伪元素 after 向左偏移一定像素，使两个微元素部分重叠，组成爱心样子，如图所示：

利用snowfall.jquery.js实现满屏爱心表白代码

.snowfall-flakes:after {
 left: 13px;
 -webkit-transform: rotate(45deg);
 /* Safari 和 Chrome */
 -moz-transform: rotate(45deg);
 /* Firefox */
 -ms-transform: rotate(45deg);
 /* IE 9 */
 -o-transform: rotate(45deg);
 /* Opera */
 transform: rotate(45deg);
}

爱心我们画完了，那么怎么让爱心实现满屏飞呢，其实只需要调用jquery.js和 snowfall.jquery.js就能实现，效果图如下：

利用snowfall.jquery.js实现满屏爱心表白代码

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title></title>
 <style media="screen">
 body {
 overflow: hidden;
 }

 .heart-body {
 width: 500px;
 margin: 100px auto;
 position: relative;
 }

 .snowfall-flakes:before,
 .snowfall-flakes:after {
 content: "";
 position: absolute;
 left: 0px;
 top: 0px;
 display: block;
 width: 30px;
 height: 46px;
 background: red;
 border-radius: 50px 50px 0 0;
 }

 .snowfall-flakes:before {
 -webkit-transform: rotate(-45deg);
 /* Safari 和 Chrome */
 -moz-transform: rotate(-45deg);
 /* Firefox */
 -ms-transform: rotate(-45deg);
 /* IE 9 */
 -o-transform: rotate(-45deg);
 /* Opera */
 transform: rotate(-45deg);
 }

 .snowfall-flakes:after {
 left: 13px;
 -webkit-transform: rotate(45deg);
 /* Safari 和 Chrome */
 -moz-transform: rotate(45deg);
 /* Firefox */
 -ms-transform: rotate(45deg);
 /* IE 9 */
 -o-transform: rotate(45deg);
 /* Opera */
 transform: rotate(45deg);
 }
 </style>
</head>

<body>
 <script src="js/jquery.js" type="text/javascript"></script>
 <script src="js/snowfall.jquery.js"></script>
 <script>
 //调用飘落函数 实现飘落效果
 $(document).snowfall({
 flakeCount: 50 //爱心的个数
 });
 </script>
</body>

</html>

改变爱心的大小，需改变以下属性的值：

.snowfall-flakes:before,
.snowfall-flakes:after {
 width: 10px;
 height: 16px;
 border-radius: 10px 10px 0 0;
}

.snowfall-flakes:after {
 left: 4px;
}

如果我的博客对你有帮助请 “点赞” “️评论” “收藏” 一键三连哦！