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


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 相关文章推荐
33种Javascript 表格排序控件收集
Dec 03 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
jQuery.validate 常用方法及需要注意的问题
Mar 20 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
拥Bootstrap入怀——导航栏篇
May 30 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php动态生成缩略图并输出显示的方法
2015/04/20 PHP
WordPress网站性能优化指南
2015/11/18 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
如何在PHP中读写文件
2020/09/07 PHP
javascript hashtable实现代码
2009/10/13 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
Windows下pycharm创建Django 项目(虚拟环境)过程解析
2019/09/16 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Python实现搜索算法的实例代码
2020/01/02 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
优秀求职信范文分享
2013/12/19 职场文书
公司开业庆典主持词
2014/03/21 职场文书
高中班主任评语大全
2014/04/25 职场文书
六一亲子活动感想
2015/08/07 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书