转换为语音并朗读全文 00:00 / 00:00

Demo:http://www.yuxiaoxi.com/demo/buzhuoloushang/

Download:http://u1.cdn.yuxiaoxi.com/maicong/down/buzhuoloushang.zip

Gif:buzhuoloushang

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>捕捉楼上-超简单实现代码</title>
<style>
.loader-container {
height: 3px;
width: 250px;
position: absolute;
background-color: #FFF;
background-image: -webkit-linear-gradient(left, #3DBEF7, #49D0FA);
background-image: -moz-linear-gradient(left, #5bd8ff, #ff0000);
background-image: -o-linear-gradient(left, #5bd8ff, #ff0000);
background-image: -ms-linear-gradient(left, #5bd8ff, #ff0000);
background-image: linear-gradient(left, #5bd8ff, #ff0000);
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4);
border-radius: 3px;
-webkit-animation: loader 7.2s;
}
@-webkit-keyframes loader {
0% {
width: 0px;
}
20% {
width: 60px;
}
50% {
width: 90px;
}
80% {
width: 160px;
}
100% {
width: 250px;
}
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
font-family:'Exo', sans-serif;
background: #FFF;
}
footer {
position: absolute;
bottom: 2em;
right: 1em;
color: #777;
font-size: 1.2em;
}
footer a {
text-decoration: none;
color: #777;
border: none;
}
#wrapper {
width: 278px;
height: 84px;
margin: 10% auto;
position: relative;
border: 1px solid #AFCAED;
background: url(1.jpg) right center no-repeat;
background-size: 39%;
-webkit-transition: all .6s;
}
.b1 {
background: url(2.jpg) right center no-repeat !important;
}
.b2 {
background: url(3.gif) right center no-repeat !important;
}
.b3 {
background: url(4.jpg) right center no-repeat !important;
}
.b4 {
background: url(5.jpg) 1% 55% no-repeat !important;
}
.aaa {
border: 1px solid #D2D2D2;
padding: 1px;
position: relative;
height: 3px;
width: 250px;
border-radius: 3px;
margin: 17% auto;
background: #FFF;
}
.ss {
display: none;
text-shadow: 0px 0px 4px #6A8CB1;
}
.s1 {
display: block;
}
.text {
font-family: cursive;
font-size: 12px;
position: absolute;
top: -22px;
left: 0px;
height: 17px;
overflow: hidden;
}
</style>

</head>

<body>
<div id="wrapper">
<div class="aaa">
<div class="text">
<div class="ss s1">正在捕捉楼上,请耐心等待...</div>
<div class="ss s2">楼上反抗激烈,开启装逼模式...</div>
<div class="ss s3">装逼成功,继续捕捉...</div>
<div class="ss s4">成功捕捉楼上!</div>
<div class="ss s5">出来吧!我的逗比~</div>
</div>
<div class="loader-container"></div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
setTimeout(function() {
$('.s1').animate({
'margin-top': -17
}, 500);
$('.s2').fadeIn();
$('#wrapper').addClass("b1");
}, 800);
setTimeout(function() {
$('.s2').animate({
'margin-top': -17
}, 500);
$('.s3').fadeIn();
$('#wrapper').addClass("b2");
}, 2500);
setTimeout(function() {
$('.s3').animate({
'margin-top': -17
}, 500);
$('.s4').fadeIn();
$('#wrapper').addClass("b3");
}, 4500);
setTimeout(function() {
$('.s4').animate({
'margin-top': -17
}, 500);
$('.s5').fadeIn();
$('#wrapper').addClass("b4");
}, 6000);
});
</script>
</body>
</html>

TKS. The End.

如果你觉得文章不错,可以给点小小奖励~

微信

微信

支付宝

支付宝

当昵称为 QQ 时将自动匹配对应昵称和邮箱
带符号 * 的表示必填项
  1. 我爸爸
    我爸爸

    哈哈

    回复
  2. Qa
    Qa

    不能更装逼,秀我一脸 :cry:

    回复
  3. 知道91博客
    知道91博客

    代码的格式好乱啊

    回复
  4. 乐优分享
    乐优分享

    文字 :|

    回复
  5. 厦门微信营销
    厦门微信营销

    什么功能有什么用 完全没看搞懂

    回复
  6. 幻想夏郷
    幻想夏郷

    :roll: 不明觉吊

    回复
  7. 晨风
    晨风

    麦葱大神总是神乎其神。

    回复
  8. 正仔
    正仔

    屌爆了的样子,不过没明白……

    回复