抖音上用記事本編寫愛心小程序教程
更新時間：2019年04月17日 08:57:36 作者：明昊昊同學
這篇文章主要為大家詳細介紹了抖音上用記事本編寫"愛心"小程序教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了抖音上用記事本編寫愛心小程序的具體代碼，供大家參考，具體內(nèi)容如下
先上一波效果圖：
一顆旋轉(zhuǎn)的小心心
七夕的前一天晚上，當我滿懷期待的把這顆“愛心”展示給我女朋友的時候，我以為她會very..very..happy
但是..她和我說你給我顆大蒜干什么啊..
Why are you giving me a garlic..
也就是那個時候，我突然覺得這真的像一顆大蒜哎
好啦，不多說了。直接上源代碼：
<!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>
運行這串代碼也是非常簡單，打開記事本，復(fù)制粘貼，將后綴名改為.html。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了js實現(xiàn)文字垂直滾動和鼠標懸停效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
JavaScript 異步調(diào)用框架 (Part 6 - 實例 & 模式)
我們用了5篇文章來討論如何編寫一個JavaScript異步調(diào)用框架（問題 & 場景、用例設(shè)計、代碼實現(xiàn)、鏈式調(diào)用、鏈式實現(xiàn)），現(xiàn)在是時候讓我們看一下在各種常見開發(fā)情景中如何使用它了。2009-08-08
這篇文章主要介紹了JS+CSS3實現(xiàn)的類似于蘋果iwatch計時器特效，很實用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要為大家詳細介紹了JS鍵盤版計算器的制作方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
微信小程序并沒有提供搖一搖API接口，但是提供了一個重力感應(yīng)的API，接下來我們可以用這個方法來模擬微信搖一搖功能，具體實現(xiàn)代碼，大家參考下本文2017-07-07
微信小程序使用ucharts在小程序中加入橫屏展示功能的全過程
這篇文章主要給大家介紹了關(guān)于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用微信小程序具有一定的參考學習價值,需要的朋友可以參考下2022-09-09
Jupyter Notebook運行JavaScript的方法
Jupyter Notebook是一塊所見即所得的畫布，通過在瀏覽器上編輯代碼，讓開發(fā)人員實現(xiàn)展示與快速迭代的利器，本文主要介紹了Jupyter Notebook運行JavaScript的方法，感興趣的可以了解一下2021-05-05
這篇文章主要介紹了js實現(xiàn)下拉列表選中某個值的方法,涉及JavaScript針對select下拉列表選擇操作的相關(guān)技巧,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JS實現(xiàn)手寫 forEach算法,結(jié)合實例形式分析了JS實現(xiàn)手寫 forEach算法實現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
這篇文章主要為大家簡單介紹一下JS中如何實現(xiàn)二叉樹層序遍歷，感興趣的小伙伴可以詳細參考閱讀2023-03-03