圣诞节过完了,你快乐了吗?

老姚
老姚 发布于 2016-12-25 22:24:48 浏览:2904 类型:原创 - 随笔 分类:JavaScript - 思路 二维码: 作者原创 版权保护
<p>
	<span>m</span>
	<span>e</span>
	<span>r</span>
	<span>r</span>
	<span>y</span>
	<span>&nbsp;</span>
	<span>c</span>
	<span>h</span>
	<span>r</span>
	<span>i</span>
	<span>s</span>
	<span>t</span>
	<span>m</span>
	<span>a</span>
	<span>s</span>
	<span>!</span>
</p>
<style>
body{
	background:black;
}
p{
	text-align:center;
	font-family: arial;
	font-size: 60px;
	font-weight: 300;
	margin-top:200px;
}
</style>
<script>
var spans = document.querySelectorAll('p span');
setInterval(function() {
	[].forEach.call(spans, function(span) {
		var color = '#' + Math.random().toString(16).slice(2, 8); 
		span.style.color = color;
		span.style.textShadow = `0px 1px 0px ${color},
							0px 2px 0px ${color}, 
							0px 3px 0px ${color}, 
							0px 4px 0px ${color}, 
							0px 5px 0px ${color}, 
							0px 6px 0px ${color}, 
							0px 7px 0px ${color}`;
	});
}, 200);
</script>
<script>
var style = document.createElement('style');
style.innerHTML = `.bounceInLeft{
	animation: bounceInLeft 1s 1 cubic-bezier(0.215, 0.610, 0.355, 1.000)
}
@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  20% {
    opacity: 0.5;
    transform: translate3d(25px, 0, 0);
  }
  30% {
	opacity: 1;
    transform: translate3d(-10px, 0, 0);
  }
  40% {
    transform: translate3d(5px, 0, 0);
  }
  50% {
    transform: rotate(70deg);
  }
  70%{
	transform: scale(1.1); 
  }
  80%{
	transform: scale(1.5); 
  }
  90%{
	transform: scale(0.8); 
  }
  100% {
	transform: none;
  }
}`;
parent.document.body.appendChild(style);
parent.document.querySelector('.cm_codeblock').classList.add('bounceInLeft');
</script>
<script>
parent.document.querySelector('#praise-btn').addEventListener('click', function() {
	alert('laoyao: thank you!!!')
}, false);
</script>
标签:
z
给个赞 35 人点赞
收藏 13 人收藏
评论 已有 20 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最热评论
前端のBoss
前端のBoss2016-12-26 09:35:502F
没有妹子,不快乐emoticon
举报 支持 (5) 回复 (1)
老姚
老姚2016-12-26 10:53:463F
[...spans]这么写也许更帅 //@czm2159:姚老师太坏了,一直玩儿外面的东西,如果用Array.from是不是感觉比call更6emoticon
举报 支持 (1) 回复 (1)
最新评论
老姚
老姚2016-12-27 20:19:4520F
先看懂代码,然后改成你想要的,就ok了。 //@1292150917a:好像复制出去用啊 好棒 求教啊 //@老姚:因为iframe嵌套的问题,获取了外面页面的dom元素。copy出去的话,那几个外面的元素是没有的,所以报错。 //@1292150917a:为什么代码复制到外面没有效果啊
举报 支持 (0) 回复 (0)
老姚
老姚2016-12-27 20:18:4119F
es6的反引号,http://es6.ruanyifeng.com/#docs/string#模板字符串 //@ququ:不明白“ ` ” 这个符号的作用emoticon 求教emoticon
举报 支持 (0) 回复 (0)
1292150917a
1292150917a2016-12-27 17:27:1618F
好像复制出去用啊 好棒 求教啊 //@老姚:因为iframe嵌套的问题,获取了外面页面的dom元素。copy出去的话,那几个外面的元素是没有的,所以报错。 //@1292150917a:为什么代码复制到外面没有效果啊
举报 支持 (0) 回复 (1)
ququ
ququ2016-12-27 17:11:2417F
不明白“ ` ” 这个符号的作用emoticon 求教emoticon
举报 支持 (0) 回复 (1)
老姚
老姚2016-12-27 17:07:4016F
因为iframe嵌套的问题,获取了外面页面的dom元素。copy出去的话,那几个外面的元素是没有的,所以报错。 //@1292150917a:为什么代码复制到外面没有效果啊
举报 支持 (0) 回复 (1)
sqq523970301
sqq5239703012016-12-27 15:25:4115F
太棒了
举报 支持 (0) 回复 (0)
1292150917a
1292150917a2016-12-27 15:12:1914F
为什么代码复制到外面没有效果啊
举报 支持 (0) 回复 (1)
良民
良民2016-12-27 14:02:4813F
我也在上海,莘庄 //@老姚:今年上海还没下雪,怀念东北的大雪,准备回去堆个大雪人。。 //@15617602337:还好了  昨天还下雪了 有雪的圣诞 嘿嘿
举报 支持 (0) 回复 (0)
15617602337
156176023372016-12-27 10:48:3012F
堆雪人好 , 前天雨夹雪 雪刚落下就化了 //@老姚:今年上海还没下雪,怀念东北的大雪,准备回去堆个大雪人。。 //@15617602337:还好了  昨天还下雪了 有雪的圣诞 嘿嘿
举报 支持 (0) 回复 (0)
老姚
老姚2016-12-27 10:03:3311F
emoticonemoticon //@皮皮鲁的长袜子:老姚又开始调皮了emoticon
举报 支持 (0) 回复 (0)
老姚
老姚2016-12-27 10:03:1610F
今年上海还没下雪,怀念东北的大雪,准备回去堆个大雪人。。 //@15617602337:还好了  昨天还下雪了 有雪的圣诞 嘿嘿
举报 支持 (0) 回复 (2)
极乐网
极乐网2016-12-26 17:42:519F
我擦,吓死我了。。。
举报 支持 (0) 回复 (0)
皮皮鲁的长袜子
皮皮鲁的长袜子2016-12-26 14:26:448F
老姚又开始调皮了emoticon
举报 支持 (0) 回复 (1)
15617602337
156176023372016-12-26 14:06:537F
还好了  昨天还下雪了 有雪的圣诞 嘿嘿
举报 支持 (0) 回复 (1)
brucelyy
brucelyy2016-12-26 11:33:526F
666
举报 支持 (0) 回复 (0)
老姚 老姚 作者

与自己为敌,与自己为友,一边深挖思想,一边埋葬自己。

作者最新