抖音上用记事本编写爱心小程序教程


Posted in Javascript onApril 17, 2019

本文实例为大家分享了抖音上用记事本编写爱心小程序的具体代码,供大家参考,具体内容如下

先上一波效果图:

一颗旋转的小心心

抖音上用记事本编写爱心小程序教程

抖音上用记事本编写爱心小程序教程

抖音上用记事本编写爱心小程序教程

七夕的前一天晚上,当我满怀期待的把这颗“爱心”展示给我女朋友的时候,我以为她会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>

运行这串代码也是非常简单,打开记事本,复制粘贴,将后缀名改为.html。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery animate图片模向滑动示例代码
Jan 26 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
js实现简单的秒表
Jan 16 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
基于JS实现web端录音与播放功能
Apr 17 #Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 #Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 #Javascript
Vue项目路由刷新的实现代码
Apr 17 #Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 #Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 #Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 #Javascript
You might like
php显示指定目录下子目录的方法
2015/03/20 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JS动态增删表格行的方法
2016/03/03 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
js实现非常棒的弹出div
2016/10/06 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Django实现学生管理系统
2019/02/26 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
python如何实现word批量转HTML
2020/09/30 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
夏季奶茶店创业计划书
2014/01/16 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
公司委托书格式范文
2014/10/09 职场文书
入党现实表现材料
2014/12/23 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫