Html实现云表白（二）——520神器

最新推荐文章于 2022-07-23 22:41:33 发布

初尘屿风

最新推荐文章于 2022-07-23 22:41:33 发布

阅读量591

点赞数 3

分类专栏：初尘屿风前端 JavaScript 文章标签： css html js javascript jquery

本文链接：https://blog.youkuaiyun.com/qinluyu111/article/details/117049291

版权

初尘屿风同时被 3 个专栏收录

202 篇文章

订阅专栏

前端

19 篇文章

订阅专栏

JavaScript

16 篇文章

订阅专栏

Html实现云表白（二）——520神器

情人节520马上就要到了，你是否准备好了？别担心，神器已为您准备好了，拿来即用，创造新颖实现云表白，为他（她）提供一个不一样的体验，提供源码（仅仅45行）。

前言

现在的女生，都很喜欢浪漫和惊喜，所以很多人都会选择在这样的时候，给那个喜欢了很久的人，来一个意外的惊喜，给她一个深情的表白，因为在这样的气氛下，女生会更加的感动，当一个人感动的时候，爱情成功的机率就会大幅度的上升，也更容易牵上那个喜欢的人的手。在此，你是否会采用网络的方式，进行云表白。如何实现效果呢？

一、如何实现？

云表白是用HTML+css实现一个爱心自然飘落的效果，主要标签有span、div等。

工具：电脑一台；sublime_text或记事本等。

二、源码实现

1.Html

代码如下：

<body>
		<script src="js/jquery.js"></script>
		<script src="js/snowfall.js"></script>
		<script type="text/javascript">
			$(document).snowfall({flakeCount : 50, maxSpeed : 10});
		</script>
		<img src="images/2.jpg">
</body>

2.Css

代码如下：

	<style type="text/css">
		.body{
			margin: 0;
		}
		.heart{
			position: relative;
			height:200px;
			width: 200px;
			background-color: #096;
			margin: 50px auto;
		}
		.snowfall-flakes:before,
		.snowfall-flakes:after{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 10px;
			height: 16px;
			background-color: red;
			border-radius: 5px 5px 0 0;
			transform: rotate(-45deg);
		}
		.snowfall-flakes:before{
			transform:  rotate(-45deg);/*旋转特效,另一种效果translateX();*/
		}
		.snowfall-flakes:after{
			transform: translateX(4.3px) rotate(45deg);
		}
	</style>

温馨提示：需要插件，不然运行不起来。

视频效果：

https://live.youkuaiyun.com/v/164244

源码地址：

（1）：https://download.youkuaiyun.com/download/qinluyu111/18887988

（2）关注公众号：计算机基础与编程，阅读相关文章，即可获得源码。