网站首页 文章专栏 七夕页CoffeeScript脚本源码
七夕页CoffeeScript脚本源码
发布 作者：被打断de狗腿 浏览量：460
七夕页CoffeeScript脚本源码
styles = """
/*
* "送给我爱的女孩"💕
* Authored by 彭迁
*/
body {
background-color: #1a1c24; color: #fff;
font-size: 1.0rem; line-height: 1.4;
-webkit-font-smoothing: subpixel-antialiased;
}
/*
* ...
* ...hello?
* 我是彭迁。
* 七夕快到了，该给你送点什么呢？
* 还是写一个网页给你吧，送给我那颗爱你的心！
* 可能看起来没有上个页面那么精美吧 （- -）
* 可是，要怎么做呢？
* 首先做一个框来放代码吧
* 那么，开始啦！！
*/
pre {
position: fixed;
top: 30px; bottom: 30px;
transition: left 500ms;
overflow: auto;
background-color: #313744; color: #a6c3d4;
border: 1px solid rgba(0,0,0,0.2);
padding: 24px 12px;
box-sizing: border-box;
border-radius: 3px;
box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1);
}
/*
* 不行不行，全是白色看代码都要看昏。
* 我需要语法高亮，那我就动手实现一下它吧。
* Colors based on Base16 Ocean Dark
*/
pre em:not(.comment) { font-style: normal; }
.comment { color: #707e84; }
.selector { color: #c66c75; }
.selector .key { color: #c66c75; }
.key { color: #c7ccd4; }
.value { color: #d5927b; }
/*
* 代码高亮实现啦，接下来正式开工！
* 首先把这个代码框移一下，它太占地方啦
* 由于是响应式布局，所以在手机上和电脑上有不同的显示效果！
*/
@media screen and (max-width: 768px) {
pre { left: 6%;right: 6%;top: 50%; }
}
@media screen and (min-width: 768px) {
pre { width: 48%;left: 50%;bottom: 30px; }
}
/*
* 用代码做一颗心！
*/
@media screen and (max-width: 768px) {
#heart, #echo {
position: fixed;
width: 300px; height: 300px;
margin: 30px auto;
left: 0; right: 0;
text-align: center;
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
}
@media screen and (min-width: 768px) {
#heart, #echo {
position: fixed;
width: 300px; height: 300px;
top: calc(50% - 150px); left: calc(25% - 150px);
text-align: center;
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
}
#heart { z-index: 8; }
#echo { z-index: 7; }
#heart::before, #heart::after, #echo::before, #echo::after {
content: '';
position: absolute;
top: 40px;
width: 150px; height: 240px;
background: #c66c75;
border-radius: 150px 150px 0 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart::before, #echo::before {
left: 150px;
}
#heart::after, #echo::after {
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
/* 给它加上一点阴影 */
#heart::after {
box-shadow:
inset -6px -6px 0px 6px rgba(255,255,255,0.1);
}
#heart::before {
box-shadow:
inset 6px 6px 0px 6px rgba(255,255,255,0.1);
}
/*
* 这是我那颗挚爱你的心，
* 我要给它签上我的名字！
* >v<
*/
#heart i::before {
content: '彭迁';
position: absolute;
z-index: 9;
width: 100%;
top: 35%; left: 0;
font-style: normal;
color: rgba(255,255,255,0.8);
font-weight: 100;
font-size: 30px;
text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
}
/*
* 接下来做什么呢？
* 让这颗心跳起来吧！
*/
@-webkit-keyframes heartbeat {
0%, 100% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
50% {
-webkit-transform: scale(1.00);
transform: scale(1.00);
}
}
@keyframes heartbeat {
0%, 100% { transform: scale(0.95); }
50% { transform: scale(1.00); }
}
@-webkit-keyframes echo {
0% {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
}
@keyframes echo {
0% {
opacity: 0.1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.4);
}
}
/*
* 好了！接下来准备让它跳起来吧！
*/
#heart, #echo {
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
-webkit-animation-timing-function:
cubic-bezier(0, 0, 0, 1.74);
animation-timing-function:
cubic-bezier(0, 0, 0, 1.74);
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#heart {
-webkit-animation-name: heartbeat;
animation-name: heartbeat;
}
#echo {
-webkit-animation-name: echo;
animation-name: echo;
}
/*
* 准备好了嘛~！
*/
#heart, #echo {
/*
* ...3...
*
* ...2...
*
* ...1...
*
* 再等一下！哈哈哈哈哈
*
*/
-webkit-animation-play-state: running;
animation-play-state: running;
/*
* ...来啦!
*/
}
/*
* 诶嘿
* 这样这颗挚爱你的心就做好了！
* 怎么样？ >v< 还好看吗？
* 亲爱的！七夕节快乐！
* 爱你哦！
* 陪我久一点吧，久到我会和你一起变老，如果不出意外，
* 这辈子我都不会先放开你的手，真的想拉着你的手 一直一直走下去。
*/
/*
* 我不是在最好的时光遇见了你，而是遇见了你我才有了这段最好的时光。
* 你最漂亮最可爱 O(∩_∩)O
* 谨以此网页献给我的最爱江圣兰💕
*/
"""
finalStyle = styles
openComment = false
isOn = true
writeStyleChar = (which) ->
# begin wrapping open comments
if which == '/' && openComment == false
openComment = true
styles = $('#style-text').html() + which
else if which == '/' && openComment == true
openComment = false
styles = $('#style-text').html().replace(/(\/[^\/]*\*)$/, '<em class="comment">$1/</em>')
# wrap style declaration
else if which == ':'
styles = $('#style-text').html().replace(/([a-zA-Z- ^\n]*)$/, '<em class="key">$1</em>:')
# wrap style value
else if which == ';'
styles = $('#style-text').html().replace(/([^:]*)$/, '<em class="value">$1</em>;')
# wrap selector
else if which == '{'
styles = $('#style-text').html().replace(/(.*)$/, '<em class="selector">$1</em>{')
else
styles = $('#style-text').html() + which
$('#style-text').html styles
$('#style-tag').append which
writeStyles = (message, index, interval) ->
if index < message.length
pre = document.getElementById 'style-text'
pre.scrollTop = pre.scrollHeight
writeStyleChar message[index++]
if isOn
setTimeout (->
writeStyles message, index, if openComment then commentTime else codeTime
), interval
skip = () ->
isOn = false
setTimeout (->
$('#style-text').html finalStyle
$('#style-tag').html finalStyle
pre = document.getElementById 'style-text'
pre.scrollTop = pre.scrollHeight
), 2*commentTime
# appending the tags I'll need.
$('body').append """
<style id="style-tag"></style>
<span id="echo"></span>
<span id="heart"><i></i></span>
<pre id="style-text"></pre>
<div style = 'position: absolute;right: 5px;top:0'>
<a href='javascript:;' id='skipAnimation'>跳过动画</a>
</div>
"""
# faster typing in small iframe on codepen homepage
# time = if window.innerWidth <= 578 then 4 else 16
commentTime = 60
codeTime = 20
$(document).on 'ready page:load', ->
$('#skipAnimation').click ->
skip()
# starting it off
writeStyles(styles, 0, commentTime)
