滴滴 - QQMCC论坛 - Powered by Discuz! Archiver

没去发表于 2017-2-15 10:24:09

滴滴

本帖最后由没去于 2017-2-15 10:25 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.txmb{
width: 100%;
height: 730px;
margin: auto;
background: url("http://www.qqmcc.net/data/attachment/album/201702/13/185532viagkwi6g8uivggz.jpg");
background-size:100% 100%;
}

.txmb_b{
padding-left: 760px;
padding-top: 350px;
text-align: left;
font-family: "仿宋";
font-size: 1.2em;
color: white;
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
-webkit-animation-duration:1s
}
.txmb_b span{
font-size: 1.3em;
font-weight: 700;
}
.txmb p{
margin-top:5px;
}
.txmb_c{
padding-left: 760px;
padding-top: 350px;
text-align: left;
font-family: "仿宋";
font-size: 1.2em;
color: white;
display: none;
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
-webkit-animation-duration:2s
}
.txmb_c span{
font-size: 1.3em;
font-weight: 700;
}
#button{
width: 80px;
height: 22px;
border: none;
background: rgba(0,9,10,0.5);
color: whitesmoke;
border-radius:8px;
margin-top:20px;
font-family: "仿宋";
}
#button:hover{
width: 85px;
background: rgba(0,9,10,0.2);
}
#button2{
width: 80px;
height: 22px;
border: none;
background: rgba(0,9,10,0.5);
color: whitesmoke;
border-radius:8px;
margin-top:10px;
font-family: "仿宋";
}
#button2:hover{
width: 85px;
background: rgba(0,9,10,0.2);
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
}

60% {
opacity: 1;
-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
}
}

</style>
</head>
<body>
<div class="txmb">
<div class="clear"></div>
<img src="http://www.qqmcc.net/data/attachment/album/201702/14/131435y7roiod4dk1ww7m7.png" style="float: left;margin-top: 50px;width: 370px;height: 420px;-webkit-animation-name: zoomInUp;animation-name: zoomInUp;-webkit-animation-duration:1s" />
<div class="txmb_b" id="txmb_b">
<span>
时也合时，适也合适
</span>
<p>生活的间隙太多</p>
<p></p>
<p>不要每一次戴上耳机</p>
<p>却听不到自己喜欢的歌</p>
<input type="button" id="button" onclick="btn1()" value="CALL ME">
</div>
<div class="txmb_c" id="txmb_c">
<span>
联系方式
</span>
<p>QQ:508170051</p>
<p>微信:hjj606060893</p>
<input type="button" id="button2" onclick="btn2()" value="RETURN">
</div>
</div>
<script type="application/javascript">
function btn1(){
document.getElementById('txmb_b').style.display='none';
document.getElementById('txmb_c').style.display='block';
}
function btn2(){
document.getElementById('txmb_b').style.display='block';
document.getElementById('txmb_c').style.display='none';
}
</script>
</body>
</html>

阿水怪噢 发表于 2017-2-15 10:42:20

私人订制真好

软耳发表于 2017-2-15 10:59:55

我好无聊

软耳发表于 2017-2-15 11:01:27

也不知道干嘛

软耳发表于 2017-2-15 11:01:33

嗯马上吃饭了

QQmcc-千惠 发表于 2017-2-15 11:02:20

私人订制什么鬼

软耳发表于 2017-2-15 11:03:06

就是吃啊

软耳发表于 2017-2-15 11:03:14

但是我早饭吃多了现在一点都不饿

软耳发表于 2017-2-15 11:03:22

所以很郁闷

没去发表于 2017-2-15 11:05:32

从来不吃早饭

页: [1] 2 3 4

QQMCC论坛's Archiver

滴滴