心形飘落特效背景

最新推荐文章于 2021-07-11 21:44:21 发布

不畏明日不念旧夕

最新推荐文章于 2021-07-11 21:44:21 发布

阅读量803

点赞数 7

文章标签： javascript css3

本文链接：https://blog.csdn.net/m0_49208371/article/details/107179741

版权

本文介绍了如何利用jQuery-Snowfall插件创建心形飘落背景特效，通过结合JavaScript和CSS3技术，为网页增添浪漫氛围。

摘要由CSDN通过智能技术生成

借助了jquery-snowfall写出的小心心
效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>	
<meta charset="UTF-8">	
<title>2020.07.07</title>	
<style>	
*{margin: 0px;padding: 0px;}	
.snowfall-flakes::before,	
.snowfall-flakes::after{		
     content: '';		
     position: absolute;		
     width: 10px;		
     height: 16px;		
     background-color: red;		
     border-radius: 5px 5px 0 0;	
     transform: rotate(-45deg);	}	
     .snowfall-flakes::after{
     transform:translateX(4.3px) rotate(45deg);	} 	 		</style>
     </head>
     <body>	
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>	
     <script src="https://cdn.bootcdn.net/ajax/libs/JQuery-Snowfall/1.7.4/snowfall.jquery.min.js">
     </script>	
     <script >	
     $(document).snowfall({flakeCount : 100, maxSpeed : 10});	
     </script>
     </body>
     </html>