抖音上用記事本編寫愛(ài)心小程序教程
更新時(shí)間：2019年04月17日 08:57:36 作者：明昊昊同學(xué)
這篇文章主要為大家詳細(xì)介紹了抖音上用記事本編寫"愛(ài)心"小程序教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了抖音上用記事本編寫愛(ài)心小程序的具體代碼，供大家參考，具體內(nèi)容如下
先上一波效果圖：
一顆旋轉(zhuǎn)的小心心
七夕的前一天晚上，當(dāng)我滿懷期待的把這顆“愛(ài)心”展示給我女朋友的時(shí)候，我以為她會(huì)very..very..happy
但是..她和我說(shuō)你給我顆大蒜干什么啊..
Why are you giving me a garlic..
也就是那個(gè)時(shí)候，我突然覺(jué)得這真的像一顆大蒜哎
好啦，不多說(shuō)了。直接上源代碼：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
@keyframes ani{
from{
transform:rotateY(0deg) rotateX(0deg);
}
to{
transform:rotateY(360deg) rotateX(360deg);
}
}
body{
perspective:1000px;
}
#heart{
position:relative;
height:200px;
width:150px;
margin:200px auto;
animation:ani 5s linear infinite;
transform-style:preserve-3d;
}
.line{
position:absolute;
height:200px;
width:150px;
border:2px solid red;
border-left:0;
border-bottom:0;
border-radius:50% 50% 0/50% 40% 0;
}
#word{
font-family:"隸書";
font-size:1.3em;
color:red;
position:absolute;
top: 80px;
left:22px;
font-weight:bold;
}
</style>
</head>
<body>
<div id="heart">
<div id="word">I LOVE You</div>
</div>
<script>
var heart=document.getElementById("heart");
var html="";
for(var i=0;i<36;i++){
html+="<div class='line' style='transform:rotateY("+i*10+"deg) rotateZ(45deg) translateX(25px)'></div>";
}
heart.innerHTML += html;
</script>
</body>
</html>
運(yùn)行這串代碼也是非常簡(jiǎn)單，打開(kāi)記事本，復(fù)制粘貼，將后綴名改為.html。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)文字垂直滾動(dòng)和鼠標(biāo)懸停效果
這篇文章主要介紹了js實(shí)現(xiàn)文字垂直滾動(dòng)和鼠標(biāo)懸停效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
JavaScript 異步調(diào)用框架 (Part 6 - 實(shí)例 & 模式)
我們用了5篇文章來(lái)討論如何編寫一個(gè)JavaScript異步調(diào)用框架（問(wèn)題 & 場(chǎng)景、用例設(shè)計(jì)、代碼實(shí)現(xiàn)、鏈?zhǔn)秸{(diào)用、鏈?zhǔn)綄?shí)現(xiàn)），現(xiàn)在是時(shí)候讓我們看一下在各種常見(jiàn)開(kāi)發(fā)情景中如何使用它了。2009-08-08
js仿蘋果iwatch外觀的計(jì)時(shí)器代碼分享
這篇文章主要介紹了JS+CSS3實(shí)現(xiàn)的類似于蘋果iwatch計(jì)時(shí)器特效，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要為大家詳細(xì)介紹了JS鍵盤版計(jì)算器的制作方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
微信小程序并沒(méi)有提供搖一搖API接口，但是提供了一個(gè)重力感應(yīng)的API，接下來(lái)我們可以用這個(gè)方法來(lái)模擬微信搖一搖功能，具體實(shí)現(xiàn)代碼，大家參考下本文2017-07-07
微信小程序使用ucharts在小程序中加入橫屏展示功能的全過(guò)程
這篇文章主要給大家介紹了關(guān)于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09
Jupyter Notebook運(yùn)行JavaScript的方法
Jupyter Notebook是一塊所見(jiàn)即所得的畫布，通過(guò)在瀏覽器上編輯代碼，讓開(kāi)發(fā)人員實(shí)現(xiàn)展示與快速迭代的利器，本文主要介紹了Jupyter Notebook運(yùn)行JavaScript的方法，感興趣的可以了解一下2021-05-05
js實(shí)現(xiàn)下拉列表選中某個(gè)值的方法(3種方法)
這篇文章主要介紹了js實(shí)現(xiàn)下拉列表選中某個(gè)值的方法,涉及JavaScript針對(duì)select下拉列表選擇操作的相關(guān)技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JS實(shí)現(xiàn)手寫 forEach算法,結(jié)合實(shí)例形式分析了JS實(shí)現(xiàn)手寫 forEach算法實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
JavaScript實(shí)現(xiàn)二叉樹(shù)層序遍歷
這篇文章主要為大家簡(jiǎn)單介紹一下JS中如何實(shí)現(xiàn)二叉樹(shù)層序遍歷，感興趣的小伙伴可以詳細(xì)參考閱讀2023-03-03