十个利用JavaScript实现的爱心动画特效

目录
  • 3d爱心跳动特效
    • 效果展示
    • 代码展示
  • 线条合成的爱心动画特效
    • 效果展示
    • 代码展示
  • 520爱心背景表白网页动画特效
    • 效果展示
    • 代码展示
  • 爱心签到墙
    • 效果展示
    • 代码展示
  • 粉色的情人节爱心飞出ui特效
    • 效果展示
    • 代码展示
  • 酷炫表白爱心动画特效
    • 效果展示
    • 代码展示
  • 烂漫爱心表白动画(程序员也浪漫)
    • 效果展示
    • 代码展示
  • 飘落的爱心雨
    • 效果展示
    • 代码展示
  • 线条的3D爱心动画
    • 效果展示
    • 代码展示
  • 原生JS制作爱心表白代码
    • 效果展示
    • 代码展示

3d爱心跳动特效

效果展示

代码展示

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Beating heart </title>

<link rel="stylesheet" href="css/style.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >

</head>
<body>

<script src='js/three.min.js'></script>
<script src='js/MeshSurfaceSampler.js'></script>
<script src='js/TrackballControls.js'></script>
<script src='js/simplex-noise.js'></script>
<script src='js/OBJLoader.js'></script>
<script src='js/gsap.min.js'></script>
<script src="js/script.js"></script>

</body>
</html>

线条合成的爱心动画特效

效果展示

代码展示

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Forming  Colorful Heart</title>
      <link rel="stylesheet" href="css/style.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>

<body>
  <canvas width="300" height="300" style="width:100%;height:100vh;" id="c"></canvas>
    <script  src="js/index.js"></script>
</body>
</html>

520爱心背景表白网页动画特效

效果展示

代码展示

<div class="star"><div class="heart animated"></div></div>

<script type="application/javascript" src="js/main.js"></script>
<script>
document.body.addEventListener('touchmove', function(e){
        e.preventDefault();
    }, { passive: false });  //passive 参数不能省略，用来兼容ios和android
	function star(){
		$('.star').fadeIn();
		setTimeout(function(){
			$('.star').fadeOut()
		},1000)
	}

	function playMusic(obj) {
        var player = $("#player")[0]; /*jquery对象转换成js对象*/
        if (player.paused){ /*如果已经暂停*/
            player.play(); /*播放*/
            $(obj).addClass('musicRotate');
            $(obj).attr('src','img/musicP.png')
        }else {
            player.pause();/*暂停*/
            $(obj).removeClass('musicRotate');
            $(obj).attr('src','img/musicS.png')
        }
    }
</script>

爱心签到墙

效果展示

代码展示

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CSS3实现照片墙</title>
	<link href="css/style.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  type="text/css" rel="stylesheet">
</head>

<body>

	<div class="container" id="container"></div>

	<script src="js/jquery-1.11.1.min.js"></script>
	<script>
		$(function () {
			var count = 0;
			var selectFlag = false;
			var startFlag = false;
			var roundBox;
			$("#container").css("width", window.innerHeight * 4 / 3)
			var appendPic = function (item) {
				if (selectFlag) {
					return
				}
				var x = Math.random() * 4,
					y = Math.random() * 4
				if (!heartFunc(x, y)) {
					appendPic(item)
				} else {
					var back = "jpg";
					var imgNum = 10;
					if (item % imgNum == 1) {
						back = "gif"
					}
					if (item % imgNum == 2 || item % imgNum == 3 || item % imgNum == 4) {
						back = "png"
					}
					var html = '<img src="img/img' + item % imgNum + '.' + back + '" class="picBase" id="pic-' + item + '"  />'
					$("#container").append(html)
					setTimeout(function () {
						$("#pic-" + item).css("top", 45 + 25 * (2 - y) * 0.85 + "%").css("left", 50 + 25 * (2 - x) * 0.85 + "%")
							.css("transform", "rotate("+(25 * (0.5 - Math.random())) + "deg) translate(-50%,-50%)")
							.css("width", "100px").css("height", "100px")
					}, 500);

				}

			}
</script>

粉色的情人节爱心飞出ui特效

效果展示

代码展示

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - mellomelloMellow - created by pure JavaScript and canvas</title>
<link rel="stylesheet" href="css/style.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >

</head>
<body>

<div id="contents">
<canvas id="canvas">This browser cannot use a canvas.</canvas>
</div>

<script src="js/script.js"></script>

</body>
</html>

酷炫表白爱心动画特效

效果展示

代码展示

<head>
        <title>小瑞</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

        <script src="js/nb.js"></script>

        <script src="js/Projector.js"></script>
        <script src="js/CanvasRenderer.js"></script>

        <script src="js/tween.min.js"></script>
        <script src="js/Sparks.js"></script>

        <!-- load the font file from canvas-text -->

        <script src="js/helvetiker_regular.typeface.js"></script>

烂漫爱心表白动画(程序员也浪漫)

效果展示

代码展示

<link href="css/default.css" rel="external nofollow"  type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/garden.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

</head>

<body>

<div id="mainDiv">
	<div id="content">
		<div id="code">
			<span class="comments">/**</span><br />
			<span class="space"/><span class="comments">*2013—02-14,</span><br />
			<span class="space"/><span class="comments">*2013-02-28.</span><br />
			<span class="space"/><span class="comments">*/</span><br />
			Boy name = <span class="keyword">Mr</span> LI<br />
			Girl name = <span class="keyword">Mrs</span> ZHANG<br />
			<span class="comments">// Fall in love river. </span><br />
			The boy love the girl;<br />
			<span class="comments">// They love each other.</span><br />
			The girl loved the boy;<br />
			<span class="comments">// AS time goes on.</span><br />
			The boy can not be separated the girl;<br />
			<span class="comments">// At the same time.</span><br />
			The girl can not be separated the boy;<br />
			<span class="comments">// Both wind and snow all over the sky.</span><br />
			<span class="comments">// Whether on foot or 5 kilometers.</span><br />
			<span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
			<span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
			<span class="placeholder"/><span class="comments">// Whether it is right now</span><br />
			<span class="placeholder"/><span class="comments">// Still in the distant future.</span><br />
			<span class="placeholder"/>The boy has but one dream;<br />
			<span class="comments">// The boy wants the girl could well have been happy.</span><br />
			<br>
			<br>
			I want to say:<br />
			Baby, I love you forever;<br />
		</div>

飘落的爱心雨

效果展示

代码展示

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>爱心雨</title>

<style>
body {
	overflow: hidden;
	margin: 0 auto;
	background: url('img/16.jpg') no-repeat;
	background-attachment:fixed;
	background-size:cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
}

.snowfall-flakes:before {
	content: "";
	/*绝对定位*/
	position: absolute;
	left: 0px;
	top: 0px;
	width: 10px;
	height: 16px;
	transform: rotate(-45deg);
	background-color: red;
	border-radius: 5px 5px 1px 1px;
}

.snowfall-flakes:after {
	content: ""; /*激活伪元素的必要因素*/
	position: absolute;
	left: 0px;
	top: 0px;
	width: 10px;
	height: 16px;
	transform: translateX(4.3px) rotate(45deg);
	background-color: red;
	border-radius: 5px 5px 1px 1px;
}
</style>

线条的3D爱心动画

效果展示

代码展示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 3D爱心动画DEMO演示</title>

<link rel="stylesheet" href="css/normalize.css" rel="external nofollow" >

<!--主要样式-->
<link rel="stylesheet" href="css/style.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  media="screen" type="text/css" />

</head>

<body>

<div class='heart3d'>
	<div class='rib1'></div>
	<div class='rib2'></div>
	<div class='rib3'></div>
	<div class='rib4'></div>
	<div class='rib5'></div>
	<div class='rib6'></div>
	<div class='rib7'></div>
	<div class='rib8'></div>
	<div class='rib9'></div>
	<div class='rib10'></div>
	<div class='rib11'></div>
	<div class='rib12'></div>
	<div class='rib13'></div>
	<div class='rib14'></div>
	<div class='rib15'></div>
	<div class='rib16'></div>
	<div class='rib17'></div>
	<div class='rib18'></div>
	<div class='rib19'></div>
	<div class='rib20'></div>
	<div class='rib21'></div>
	<div class='rib22'></div>
	<div class='rib23'></div>
	<div class='rib24'></div>
	<div class='rib25'></div>
	<div class='rib26'></div>
	<div class='rib27'></div>
	<div class='rib28'></div>
	<div class='rib29'></div>
	<div class='rib30'></div>
	<div class='rib31'></div>
	<div class='rib32'></div>
	<div class='rib33'></div>
	<div class='rib34'></div>
	<div class='rib35'></div>
	<div class='rib36'></div>
</div>

</body>
</html>

原生JS制作爱心表白代码

效果展示

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>心心-样例图</title>

<link href="favicon.ico" rel="external nofollow"  rel="shortcut icon" class="icon-love" type="images/x-ico">

<link rel="stylesheet" href="css/love.css" rel="external nofollow" >

</head>
<body>

<div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;">

    <div class="body_left">
        <img src="images/biubiubiu.gif" alt="" ondragstart='return false;'>
    </div>

    <div class="body_center love">
        <div class="block">
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            <div class="div4"></div>
        </div>
    </div>

</div>

<div class="footer">
    <div class="border">
        <div class="border-top"></div>
        <div class="border-bottom"></div>
    </div>

    <div class="copyright">
        <div id="version"><span>Version:</span>&nbsp;0.0.2</div>
        <div id="createTime"><span>Time:</span>&nbsp;2019/4/17</div>
        <div id="author"><span>&copy;&nbsp;</span>xianchenxy</div>
    </div>
</div>

<script type="text/javascript" src="js/love.js"></script>

</body>
</html>

以上就是十个利用JavaScript实现的爱心动画特效的详细内容，更多关于JavaScript爱心动画特效的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 原生JS实现鼠标滑动撒爱心特效

    原生JS实现鼠标滑动撒爱心特效

    本文实例为大家分享了一个鼠标滑动撒爱心的js特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

  • p5.js临摹旋转爱心

    p5.js临摹旋转爱心

    运用p5.js临摹旋转爱心,供大家参考,具体内容如下 原图 我的临摹 效果不错的样子,让我们看看实现过程. 第一步.分析原图GIF 因为原图中旋转速度较快,无法用肉眼直观地找到规律.所以我把gif分解,共90帧,一帧一帧的寻找旋转规律. 从上往下顺序,第一层到第六层.从简单的说起. 第六层:逆时针匀速旋转一圈. 第五层:先逆时针旋转α,速度由v1变为0.再顺时针旋转180°+2α,速度由0变为v2,再变为0.最后逆时针旋转α,速度由0变为v1.(观察原图,我将α设为30°0) 第四层:先逆时针旋

  • 七个基于JavaScript实现的情人节表白特效

    七个基于JavaScript实现的情人节表白特效

    目录 七夕情人节送花动画告白特效 玫瑰花盛开动画告白特效 3d旋转相册 点击爱心散开动画告白特效 雷电打出告白文字特效 粒子组合告白文字特效 小熊拉手CSS3情人节动画表白特效 七夕情人节送花动画告白特效 效果展示 代码展示: <div id='content'> <ul class='content-wrap'> <!-- 第一副画面 --> <li> <!-- 背景图 --> <div class="a_background&

  • js实现鼠标点击飘爱心效果

    本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g

  • 使用snowfall.jquery.js实现爱心满屏飞的效果

    使用snowfall.jquery.js实现爱心满屏飞的效果

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 :after画两个重叠在一起的长方形,如图所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style medi

  • JS实现520 表白简单代码

    这两天不知道咋了,迷迷糊糊的,突然知道今天是520的我,急急忙忙赶出个程序(新手,代码有点乱),发出来大家一起研究下(参考百度的). <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>520</title> <style> html, body{padding:0px; margin:0px; background:#222; fon

  • 十个利用JavaScript实现的爱心动画特效

    十个利用JavaScript实现的爱心动画特效

    目录 3d爱心跳动特效 效果展示 代码展示 线条合成的爱心动画特效 效果展示 代码展示 520爱心背景表白网页动画特效 效果展示 代码展示 爱心签到墙 效果展示 代码展示 粉色的情人节爱心飞出ui特效 效果展示 代码展示 酷炫表白爱心动画特效 效果展示 代码展示 烂漫爱心表白动画(程序员也浪漫) 效果展示 代码展示 飘落的爱心雨 效果展示 代码展示 线条的3D爱心动画 效果展示 代码展示 原生JS制作爱心表白代码 效果展示 代码展示 3d爱心跳动特效 效果展示 代码展示 <!DOCTYPE ht

  • JavaScript+html5 canvas实现图片破碎重组动画特效

    JavaScript+html5 canvas实现图片破碎重组动画特效

    也许你见过HTML5图片破碎动画特效,实现的原理也挺简单的.但是你应该没有见过视频也可以破碎重组,这个HTML5动画就是利用Canvas的相关特性,实现了点击鼠标让视频破碎重组的效果.在视频区域点击鼠标,即可让该区域的视频破碎,让后经过一段时间后,破碎的区域又可以重组还原,视觉效果非常棒. HTML代码 <div style="display:none"> <video id="sourcevid" autoplay="true"

  • 利用jquery动画特效和css打造的侧边弹出垂直导航

    利用jquery动画特效和css打造的侧边弹出垂直导航

    这是一款利用jquery动画特效和css打造的侧边弹出垂直导航,整个弹出过程比较流畅,而且代码很简单,如果你正在寻找一款带动画的垂直导航,那么可以试试这个.下面是效果截图: HTML源码: 复制代码 代码如下: <title>Jquery+CSS侧边弹出垂直导航</title> <style type="text/css"> html, body, ul, li { margin: 0; padding: 0; border: 0; outline:

  • 利用JavaScript在网页实现八数码启发式A*算法动画效果

    利用JavaScript在网页实现八数码启发式A*算法动画效果

    最近人工智能课老师布置了一个八数码实验,网上看到很多八数码的启发式A*算法,但是大多数都是利用C或者C++在控制台实现的,于是我用js在网页中做了一个类似的. 首先八数码就是一个九宫格,其中有一个空格,其他八个对应数字1-8, 移动空格,使得最后状态为有序,如下图 启发式算法是指在求解时,利用启发函数将不符合规则的解节点去掉,从而缩小问题的解空间. A*算法是利用评价函数的启发式算法,在本例中,利用当前节点状态与最终节点状态所不同的格子数来评估节点的优劣,将优越节点储存并在之后展开,将劣质节点抛

  • 利用Matlab复刻两款粒子爱心动画效果

    利用Matlab复刻两款粒子爱心动画效果

    目录 粒子爱心1 效果图 粒子爱心2 效果图 粒子爱心1 function particleHeart1 % @author : slandarer % 调整背景及比例 ax=gca;hold on ax.DataAspectRatio=[1,1,1]; ax.XLim=[-25,25]; ax.YLim=[-25,20]; ax.Color=[0,0,0]; ax.XColor='none'; ax.YColor='none'; set(gcf,'Color',[0,0,0]); % 散点位置

  • 利用JavaScript制作一个搞怪的兔子动画效果

    目录 前言 实现 效果图 前言 Hello,掘友们好!又是一年新春之际,祝福大家兔年快乐!给大家介绍一个有趣的动效(兼容 IE),页面右下角有一只搞怪的兔子,鼠标在页面中悬停时,兔子会跟着做出不同的动作和表情.然后可以在页面中任意位置(离兔子太近不能发射,会伤到兔子)点击鼠标,将从兔子眼睛里发射炮弹,随之击中的是你的霉 运.压 力.贫 穷.疾 病. 实现 定义一个随机文本块. <p id="p1"></p> 定义兔子的构造函数. function HoverRa

  • 基于javascript的无缝滚动动画实现

    无缝滚动好像是互联网广告最大的一个载体,可以用"无处不在"来形容它.不过它比起早期的闪光字体,浮动广告算进步了.由于需求巨大,做前台迟早会遇到它.我先给出结构层部分,再慢慢讲解其实现原理. <dl id="marquee"> <dt> <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="无缝滚动

  • 利用JavaScript制作一个酷炫的3D图片演示

    利用JavaScript制作一个酷炫的3D图片演示

    目录 前言 一.页面特效效果展示 二.功能描述 三.功能实现 前言 对于学前端的小伙伴来说,吸引你们入坑的大都是一些炫酷的页面.但往往那些页面的源代码对初学的伙伴们都不太友好.今天给大家分享一个代码简单.适合初学者.高级感炫酷感爆棚的特效页面(有npy的快乐加倍!). 一.页面特效效果展示 注:上述效果图只是部分效果,原谅我还没有学会自制gif图! 二.功能描述 1.打开页面,所有图片会自动转动 2.图片的大小和间隔可随鼠标滚轮滚动而改变 3.鼠标按住页面任意位置,拖动光标,页面可随之旋转 三.

  • JavaScript实现雪花飘落效果特效

    没有雪的冬天失去了冬天的美景,不见了千里冰封,万里雪飘的北国之美,诗人无从写雪,画家画不出雪景,摄影师拍不到冬天的美丽.雪,是冬天的灵魂,为大地铺好背景,之后发生的都如梦似幻,就像童话般的存在.冬天没有雪,能难倒程序猿吗,没有雪自己造,这篇文章主要介绍了JavaScript实现雪花飘落效果特效,需要的朋友可以参考下 !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

随机推荐