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


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 indexOf使用方法
Aug 19 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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安全配置
2006/10/09 PHP
PHP字符串中特殊符号的过滤方法介绍
2014/02/18 PHP
PHP curl伪造IP地址和header信息代码实例
2015/04/27 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
PHP如何使用Memcached
2016/04/05 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
2020/08/11 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
如何让python的运行速度得到提升
2020/07/08 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
商场促销活动策划方案
2014/08/18 职场文书
出纳试用期自我评价
2015/03/10 职场文书
毕业证明模板
2015/06/19 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python