十個(gè)利用JavaScript實(shí)現(xiàn)的愛心動(dòng)畫特效
更新時(shí)間：2022年02月10日 16:03:05 作者：白大鍋
情人節(jié)將至，程序員證明自己不是直男的時(shí)候到啦！小編為大家準(zhǔn)備了十個(gè)通過JavaScript實(shí)現(xiàn)的愛心動(dòng)畫特效，快學(xué)起來，到時(shí)候給女朋友一個(gè)驚喜吧
3d愛心跳動(dòng)特效
效果展示
代碼展示
<!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>
線條合成的愛心動(dòng)畫特效
效果展示
代碼展示
<!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愛心背景表白網(wǎng)頁動(dòng)畫特效
效果展示
代碼展示
<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 參數(shù)不能省略，用來兼容ios和android
function star(){
$('.star').fadeIn();
setTimeout(function(){
$('.star').fadeOut()
},1000)
}
function playMusic(obj) {
var player = $("#player")[0]; /*jquery對(duì)象轉(zhuǎn)換成js對(duì)象*/
if (player.paused){ /*如果已經(jīng)暫停*/
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實(shí)現(xiàn)照片墻</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>粉色的情人節(jié)愛心飛出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>
酷炫表白愛心動(dòng)畫特效
效果展示
代碼展示
<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>
爛漫愛心表白動(dòng)畫(程序員也浪漫)
效果展示
代碼展示
<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: "";
/*絕對(duì)定位*/
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愛心動(dòng)畫
效果展示
代碼展示
<!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愛心動(dòng)畫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> 0.0.2</div>
<div id="createTime"><span>Time:</span> 2019/4/17</div>
<div id="author"><span>© </span>xianchenxy</div>
</div>
</div>
<script type="text/javascript" src="js/love.js"></script>
</body>
</html>
以上就是十個(gè)利用JavaScript實(shí)現(xiàn)的愛心動(dòng)畫特效的詳細(xì)內(nèi)容，更多關(guān)于JavaScript愛心動(dòng)畫特效的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
- 原生js實(shí)現(xiàn)頁面滾動(dòng)動(dòng)畫
- js實(shí)現(xiàn)帶翻轉(zhuǎn)動(dòng)畫圖片時(shí)鐘
- 關(guān)于JavaScript實(shí)現(xiàn)動(dòng)畫時(shí)動(dòng)畫抖動(dòng)的原因與解決方法
- JavaScript實(shí)現(xiàn)瀑布動(dòng)畫
- JS使用window.requestAnimationFrame()實(shí)現(xiàn)逐幀動(dòng)畫
- JavaScript實(shí)現(xiàn)扯網(wǎng)動(dòng)畫效果的示例代碼
- 如何利用JS實(shí)現(xiàn)時(shí)間軸動(dòng)畫效果
- JS實(shí)現(xiàn)添加緩動(dòng)畫的方法
- JavaScript+CSS實(shí)現(xiàn)唯美蝴蝶動(dòng)畫
相關(guān)文章
javascript 異步頁面查詢實(shí)現(xiàn)代碼(asp.net)
異步頁面查詢，其實(shí)與自動(dòng)完成時(shí)一樣的原理，根據(jù)用戶輸入的關(guān)鍵詞自動(dòng)的與數(shù)據(jù)庫中的匹配，并顯示出來，提高用戶體驗(yàn)，但主要搜索量大的話，增加服務(wù)器開銷。2010-05-05
拖拽是前端實(shí)現(xiàn)中比較常用的一種效果, HTML5 提供了較為強(qiáng)大的拖拽 API 支持,今天我們來實(shí)現(xiàn)一個(gè)簡單的拖拽效果,需要的朋友可以參考下2023-09-09
javascript刪除數(shù)組元素的七個(gè)方法示例
這篇文章主要給大家介紹了關(guān)于javascript刪除數(shù)組元素的七個(gè)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
關(guān)于Javascript 對(duì)象(object)的prototype
Javascript中的每個(gè)對(duì)象(object)都會(huì)有 prototype，下面為大家介紹下其具體的應(yīng)用2014-05-05
這篇文章主要介紹了如何在微信小程序中使用骨架屏的步驟,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
無循環(huán) JavaScript(map、reduce、filter和find)
本文由淺入深地介紹了map、reduce、filter和find函數(shù)，如何一步一步把循環(huán)從代碼中抽離掉2017-04-04
現(xiàn)代 JavaScript 開發(fā)編程風(fēng)格Idiomatic.js指南中文版
下面的章節(jié)描述的是一個(gè) 合理 的現(xiàn)代 JavaScript 開發(fā)風(fēng)格指南，并非硬性規(guī)定。其想送出的核心理念是高度統(tǒng)一的代碼風(fēng)格（the law of code style consistency）。2014-05-05
Openlayers3實(shí)現(xiàn)車輛軌跡回放功能
這篇文章主要介紹了Openlayers3實(shí)現(xiàn)車輛軌跡回放功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
javascript權(quán)威指南 學(xué)習(xí)筆記之變量作用域分享
最近一直在看《javascript權(quán)威指南 第五版》，變量作用域這一章，看得真的有點(diǎn)累。不過，收獲還是多多。2011-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript的事件流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03