<!DOCTYPE html>
<html>
<head>
<title>I LOVE YOU XXX</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center" style="background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589740709787&di=8e263423d36f65963e29be3e0ab84633&imgtype=0&src=http%3A%2F%2Fimage1.wulinsoso.com%2Fhdpic%2F16sucai%2F2014%2F01%2F12%2F025752622.jpg');background-size:100% 130%;">
<h2 style="color: white">
我们已经相爱
<h1 style="font-size: 90px;color: white">
<span class="badge badge-danger">520</span>
</h1>
天
</h2>
<p style="color: white;font-size: 20px">寄语：未来的路，会更好。 -xxx</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="card bg-primary text-white">
<h3>关于我们</h3>
</div>
<p>about us</p>
<li>2017-02-10</li>
<p>相遇</p>
<li>2017-03-10</li>
<p>xxx</p>
</div>
<div class="col-sm-4">
<div class="card bg-warning text-white">
<h3>我想对你说</h3></div>
<p>I want to tell you</p>
<div id="myDiv" style="background-color:rgba(0,0,0,0.3);"></div>
</div>
<div class="col-sm-4">
<div class="card bg-danger text-white">
<h3 onclick="get()">点我惊喜</h3></div>
<p>pleasantly surprised</p>
<p id='superise'></p>
</div>
</div>
</div>
<div class="polaroid">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589740709787&di=8e263423d36f65963e29be3e0ab84633&imgtype=0&src=http%3A%2F%2Fimage1.wulinsoso.com%2Fhdpic%2F16sucai%2F2014%2F01%2F12%2F025752622.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>叙述</p>
</div>
</div>
<div class="polaroid">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589740709787&di=8e263423d36f65963e29be3e0ab84633&imgtype=0&src=http%3A%2F%2Fimage1.wulinsoso.com%2Fhdpic%2F16sucai%2F2014%2F01%2F12%2F025752622.jpg" alt="Norway" style="width:100%">
<div class="container">
<p>叙述</p>
</div>
</div>
</body>
</html>
<style>
body {margin:0px;}
div.polaroid {
width: 80%;
margin: auto;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
div.container {
text-align: center;
padding: 10px 20px;
}
</style>
<script type="text/javascript">
//以打字样式打出每一个字
window.onload = function () {
var myDiv = document.getElementById("myDiv");
text='那一刻，我点起脚尖，在山水之间，画一副魂绕梦牵。那一天，轻触你指尖，在你我之间，坚定那一份信念。那一年，有一份牵挂，静默无言，只为守候与你的想见。'
var contentArr = text.split("");
var content = "";
var index = 0;
var ID = setInterval(function () {
content += contentArr[index];
myDiv.innerHTML = content + "_";
index++;
if(index === contentArr.length){
myDiv.innerHTML = content ;
clearInterval(ID);
console.log("结束了");
}
},200);
}
</script>
<script type="text/javascript">
function get(){
//可以设置红包二维码
html='<img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" alt="Card image" style="width:100%">扫一扫有惊喜'
$('#superise').html(html)
}
</script>
<iframe src = "http://listen.9sing.cn//2013/%E4%BC%A4%E6%84%9F%E9%9F%B3%E4%B9%90/2013-09/2013-09-08/%E5%B0%B1%E6%98%AF%E7%88%B1%E4%BD%A0%20-%20%E9%99%B6%E5%96%86.mp3
" allow = "autoplay" hidden /><!-- 自动播放歌曲 -->
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
