天天看点

程序员表白神器

只需将以下代码复制到HTML页面即可,文字部分内容可以根据个人喜好随意替换(如有前端大神能对页面进行丰富,更加欢迎)。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>程序员表白神器</title>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

<style>

body {

    background:black;

}

.heart {

    margin:100px auto;

    width:200px;

    height:200px;

        position:relative;

    animation-name:shake;

    animation-duration:.5s;

    animation-iteration-count:infinite;

}

.heart div {

        width:100%;

    height:100%;

    position:absolute;

    background:red;

    animation-name:shadow;

    animation-duration:.5s;

    animation-iteration-count:infinite;

}

.topLeft,.topRight {

    border-radius:100px 100px 0 0;

}

.topLeft {

    transform:translate(-50px,0) rotate(-45deg);

}

.topRight {

    transform:translate(50px,0) rotate(45deg);

}

.bottom {

    transform:translate(0,64px) rotate(45deg) scale(.9,.9);

}

@keyframes shake {

    from {

    transform:scale(.9,.9);

}

to {

    transform:scale(1.1,1.1);

}

}@keyframes shadow {

    from {

    }to {

    box-shadow:0px 0px 50px red;

}

}

#aa{

        height: auto;

        width: 520px;

        margin: auto;

        color:white;

    }

</style>

</head>

<body>

<div class="heart">

    <div class="topLeft"></div>

    <div class="topRight"></div>

    <div class="bottom"></div>

</div>

<script>

</script>

<p id="aa"></p>

<div style="display:none" id="w">

    你不知道你的影子多么调皮,总在我的眼前晃动,让我不能有一刻安宁。坏男孩从早上睁开朦胧眼睛的那一刻起,到枕着你的名字入眠进入梦乡,你的影子一直陪着我。

    你并不是什么地方都好,你只是什么地方都让我忘不了,我也不是什么地方都坏,只是我愿意为你把坏的地方更改,人无完人,我要感谢上天给我与你相遇的幸运,心有真心,让我们一起走进向往中的春。

</div>

<script>

var index=0;

    var word=document.getElementById("w").innerHTML;

    function type(){

        document.getElementById("aa").innerText = word.substring(0,index++);

    }

    setInterval(type, 200);

</script>

</body>

</html>