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


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 相关文章推荐
WEB高性能开发之疯狂的HTML压缩
Jun 19 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
js 轮播效果实例分享
Dec 28 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
antd table按表格里的日期去排序操作
Nov 17 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
JavaScript小技巧带你提升你的代码技能
Sep 15 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 不使用js实现页面跳转
2014/02/11 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
JS中FileReader类实现文件上传及时预览功能
2020/03/27 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
python单元测试unittest实例详解
2015/05/11 Python
python 队列详解及实例代码
2016/10/18 Python
python ansible服务及剧本编写
2017/12/29 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python实现文法左递归的消除方法
2020/05/22 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
Linux的文件类型
2012/03/07 面试题
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
政协委员个人总结
2015/03/03 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript