抖音上用記事本編寫愛心小程序教程
本文實(shí)例為大家分享了抖音上用記事本編寫愛心小程序的具體代碼,供大家參考,具體內(nèi)容如下
先上一波效果圖:
一顆旋轉(zhuǎn)的小心心
七夕的前一天晚上,當(dāng)我滿懷期待的把這顆“愛心”展示給我女朋友的時(shí)候,我以為她會(huì)very..very..happy
但是..她和我說你給我顆大蒜干什么啊..
Why are you giving me a garlic..
也就是那個(gè)時(shí)候,我突然覺得這真的像一顆大蒜哎
好啦,不多說了。直接上源代碼:
<!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)單,打開記事本,復(fù)制粘貼,將后綴名改為.html。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
console.log()與console.dir()的區(qū)別及說明
這篇文章主要介紹了console.log()與console.dir()的區(qū)別及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01JS面試必備之手寫instanceof,深拷貝,節(jié)流和防抖
JavaScript如何實(shí)現(xiàn)手寫instanceof、深拷貝、節(jié)流、防抖也是面試時(shí)常常考到的知識(shí)點(diǎn),這篇文章為大家進(jìn)行了詳細(xì)介紹,需要的可以參考一下2023-05-05javascript匿名函數(shù)中的''return function()''作用
這篇文章主要介紹了javascript匿名函數(shù)中的'return function()'作用介紹,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能的處理方法
大家都知道在canvas中沒有提供方法來處理文字的多行問題,只有通過截取指定字符串來達(dá)到目的。接下來通過本文給大家介紹微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴?hào)顯示功能 ,需要的朋友可以參考下2018-11-11JavaScript動(dòng)態(tài)修改彈出窗口大小的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)修改彈出窗口大小的方法,涉及javascript中window.open方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁面
這篇文章主要為大家詳細(xì)介紹了JS、CSS和HTML實(shí)現(xiàn)注冊(cè)頁面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07javascript 驗(yàn)證碼生成代碼 推薦學(xué)習(xí)
非常不錯(cuò)的用javascript實(shí)現(xiàn)的驗(yàn)證碼實(shí)現(xiàn)代碼。2009-07-07stream.js 一個(gè)很小、完全獨(dú)立的Javascript類庫(kù)
stream.js 是一個(gè)很小、完全獨(dú)立的Javascript類庫(kù),它為你提供了一個(gè)新的Javascript數(shù)據(jù)結(jié)構(gòu):streams2011-10-10