web前端---飘落的小心心

最新推荐文章于 2024-11-11 00:01:33 发布

Lydia-j

最新推荐文章于 2024-11-11 00:01:33 发布

阅读量286

点赞数 1

分类专栏： web前端文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_43720923/article/details/107965437

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

web前端学习—小心心飘落

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>love</title>
<style>
     .snowfall-flakes{
	      position:relative;
	      margin:20px auto;
	      width:200px;
		  height:300px;
		  /*background-color:#009900;*/
	 }
	  .snowfall-flakes::before{
	      content: ' ';
	      position:absolute;
		  top:0;
		  left:0;
	      width:10px;
		  height:16px;
		  background-color:#FF0000;
		  border-radius:50px 50px 0 0;
		  transform:rotate(-45deg);
	 }
	  .snowfall-flakes::after{
	      content: ' ';
	      position:absolute;
		  top:0;
		  left:4.3px;
	      width:10px;
		  height:16px;
		  background-color:#FF0000;
		  border-radius:50px 50px 0 0;
		  transform:rotate(45deg);
	 }
	 /*.left{
	      position:absolute;
		  top:0;
		  left:0;
	      width:100px;
		  height:160px;
		  background-color:#FF0000;
		  border-radius:50px 50px 0 0;
		  transform:rotate(-45deg);
	 }
	
	 .right{
	      position:absolute;
		  top:0;
		  left:43px;
	      width:100px;
		  height:160px;
		  background-color:#FF0000;
		  border-radius:50px 50px 0 0;
		  transform:rotate(45deg);
		  
	 }*/
	 /*  transform:translate(43px) rotate(-45deg);  */
</style>
</head>

<body>
   <div class="snowfall-flakes">
	 <!-- <div class="left">
	    1
	 </div>
	 <div class="right">
	    2
	 </div> -->
   </div>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.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>