扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >十个利用JavaScript实现的爱心动画特效
  • 129

0
分享到

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

2024-04-02 19:04:59 129人浏览 安东尼
摘要

目录3D爱心跳动特效效果展示代码展示线条合成的爱心动画特效效果展示代码展示520爱心背景表白网页动画特效效果展示代码展示爱心签到墙效果展示代码展示粉色的情人节爱心飞出ui特效效果展示

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]; 
        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 />
			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爱心动画特效的资料请关注编程网其它相关文章！

--结束END--

本文标题: 十个利用JavaScript实现的爱心动画特效

本文链接: https://lsjlt.com/news/138785.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 十个利用JavaScript实现的爱心动画特效
    目录3d爱心跳动特效效果展示代码展示线条合成的爱心动画特效效果展示代码展示520爱心背景表白网页动画特效效果展示代码展示爱心签到墙效果展示代码展示粉色的情人节爱心飞出ui特效效果展示...
    99+
    2024-04-02
  • Flutter实现心动的动画特效
    目录实现动画混入 SingleTickerProviderStateMixin创建动画抽离成小组件完整代码为了追求更好的用户体验，有时候我们需要一个类似心跳一样跳动着的控件来吸引用户...
    99+
    2024-04-02
  • 基于Flutter实现爱心三连动画效果
    目录前言Animation 简介AnimationController 简介应用 - 爱心三连总结前言 我们开始 Flutter 动画相关篇章之旅，在应用中通过动效能够给用户带来更愉...
    99+
    2024-04-02
  • HTML+JS实现爱心动画效果的源码分享
    目录一、效果展示二、源码分享一、效果展示 二、源码分享 <!DOCTYPE html> <html> <head> <titl...
    99+
    2022-11-13
    HTML JS爱心动画 HTML JS爱心 JS 爱心
  • JavaScript怎么实现外溢动态爱心的效果
    本篇内容介绍了“JavaScript怎么实现外溢动态爱心的效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果演示源码介绍( &...
    99+
    2023-06-29
  • 原生JS实现鼠标滑动撒爱心特效
    本文实例为大家分享了一个鼠标滑动撒爱心的js特效，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang=...
    99+
    2024-04-02
  • 如何基于Flutter实现爱心三连动画效果
    这篇文章主要为大家展示了“如何基于Flutter实现爱心三连动画效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何基于Flutter实现爱心三连动画效果”这篇文章吧。前言我们开始 Flutt...
    99+
    2023-06-29
  • 利用JavaScript实现放鞭炮动画效果
    目录前言制作思路代码实现构建鞭炮安排小兔上场点火爆炸效果添加音频前言 谈及过年，最先让人想到的就是，噼里啪啦的鞭炮声，小时候到了春节，点上一根香,把红色的鞭炮从那一排子里解出几个,放...
    99+
    2023-01-11
    JavaScript放鞭炮动画 JavaScript放鞭炮 JavaScript 动画
  • JavaScript实现外溢动态爱心的效果的示例代码
    还在为节日送女朋友什么礼物而烦恼吗？最近用JavaScript制作了一个外溢动态爱心的效果，还可以在爱心上填写你想要的文字！快学习一下给自己女朋友也diy一个吧 效果演示 源码介绍...
    99+
    2024-04-02
  • 用JavaScript实现动画效果(转)
    大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果，Dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家　　演示一个简单的动画...
    99+
    2023-06-03
  • 用JavaScript实现动画效果 (转)
    用JavaScript实现动画效果 (转)[@more@]主页: .NET">http://www.maxss.netEMail: maxss.net@163.com　　大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果...
    99+
    2023-06-03
  • JS+Canvas实现满屏爱心和文字动画的制作
    目录介绍步骤介绍 <canvas> 最早由 Apple 引入 WebKit，用于 Mac OS X 的 Dashboard，随后被各个浏览器实现。如今，所有主流的浏览器都...
    99+
    2022-11-21
    JS Canvas爱心 JS Canvas 文字动画 JS Canvas 动画
  • 使用CSS怎么实现一个图片动画特效
    本篇文章给大家分享的是有关使用CSS怎么实现一个图片动画特效，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。HTML代码<!-- 主容器 -->&...
    99+
    2023-06-08
  • 怎么用css实现3d动画特效
    小编给大家分享一下怎么用css实现3d动画特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 　　属性 　　perspect...
    99+
    2024-04-02
  • 如何利用css实现一个抽奖动画效果
    这篇文章将为大家详细讲解有关如何利用css实现一个抽奖动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。首先我们先来看下最终的运行效果：从效果图我们可以看到，抽奖会自动进行，并显示中奖信息。这个效果基...
    99+
    2023-06-07
  • 利用css3实现鼠标经过动画显示详情特效
    本篇内容介绍了“利用css3实现鼠标经过动画显示详情特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　...
    99+
    2024-04-02
  • 利用JavaScript制作一个搞怪的兔子动画效果
    目录前言实现效果图前言 Hello，掘友们好！又是一年新春之际，祝福大家兔年快乐！给大家介绍一个有趣的动效（兼容 IE），页面右下角有一只搞怪的兔子，鼠标在页面中悬停时，兔子会跟着做...
    99+
    2023-01-09
    JavaScript制作搞怪兔子动画 JavaScript兔子动画 JavaScript 动画 JavaScript 兔子
  • 怎么用纯css3实现炫酷的动画背画特效
    本篇内容介绍了“怎么用纯css3实现炫酷的动画背画特效”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！　　之...
    99+
    2024-04-02
  • 如何在Android中利用ConstraintLayout实现一个动画效果
    这篇文章将为大家详细讲解有关如何在Android中利用ConstraintLayout实现一个动画效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。xml布局：<!-- activit...
    99+
    2023-05-31
    android constraintlayout roi
  • 使用javascript怎么实现一个文字滚动特效
    这篇文章将为大家详细讲解有关使用javascript怎么实现一个文字滚动特效，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript是什么JavaScript是一种直译式的脚本语言...
    99+
    2023-06-14
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作