本文實例為大家分享了抖音上用記事本編寫愛心小程序的具體代碼,供大家參考,具體內(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>
新聞標題:抖音上用記事本編寫愛心小程序教程-創(chuàng)新互聯(lián)
文章出自:http://chinadenli.net/article22/dojjcc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、企業(yè)建站、關(guān)鍵詞優(yōu)化、手機網(wǎng)站建設(shè)、Google、做網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容