腾讯QQ空间穿越时光轴3D特效
<DOCTYPE html>
<html>
<head>
<title>騰訊QQ空間穿越光軸3D特效</title>
<style>
*{margin:0;padding:0;}
body{
background-image:url("images/bg.png") fixed;//拖動(dòng)鼠標(biāo)圖片不會(huì)上下移動(dòng)
height:2000px;
}
.con{
width:1000px;
/*heigth:500px;*/不用加高度，用內(nèi)容撐起來
background:#ffcc99;
margin:0 auto;
}
.con dl{
width:120px;
heigth:150px;
background:#fff;
margin-left:240px;
}
.con dl dt{
width:100px;
height:100px;
background:green;
margin:0 auto;//居中
}
.con dl dd{
font-size:14px;
color:#666;
font-family:"微軟雅黑";
text-align:center;//文本對齊方式
line-height:30px;//離上面有距離,放在行高30的中間
}
.con .txtlist{
width:1000px;
/*height:500px;*/
margin-left:300px;
border-left:2px solid #0099ff;
padding-top:20px;
}
.con .txtlist ul li{
width:590px;
height:400px;
background:rgba(255,255,255,0.5);//背景透明
margin-bottom:25px;
list-style:none;
margin-left:10px;
box-shadow:2px 2px 5px #666;//第三個(gè)是虛化度，越來越模糊
border-radius:5px;
position:relative;
-webkit-animation:sc 2s;/*去定義一個(gè)動(dòng)畫,webkit兼容google,取個(gè)名字sc*/
display:none;
}
.con .txtlist ul li .time{
width:90px;
height:35px;
background:#181818;
position:absolute;
top:120px;
left:-130px;
line-height:35px;
text-align:center;
}
.con .txtlist ul li .ioc{
position:absolute;
left:-43px
top:130px;
}
.con .txtlist ul li .doc{
width:6px;
height:6px;
background:#99ff33;
position:absolute;
left:-16px;
top:132px;
}
@-webkit-keyframes sc{
? ? ? ?from/0%{-webkit-transform:rotate(220deg) scale(0.2)}
? ? ? ?to/100%{-webkit-transform:rotate(0deg) scale(1)}
}
</style>
</head>
<body>
?<div class="con">
? ? ? <dl> ? ??
? ? ? ? ? ?<dt src="images/my.jpg" width="100" height="100" alt="千帆" /></dt>
? ? ? ? ? ?<dd>經(jīng)典課程集</dd>//注釋，可以有多個(gè)
? ? ? </dl>
? ? ? <div id="txtlist">
? ? ? ? ? ?<ul> ? ??
? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ?<div class="time">8月25號</div>
? ? ? ? ? ? ? ? ? ? ? ?<img class="ioc" src="image/r.png" width="16" heigth="16" alt="箭頭" />
? ? ? ? ? ? ? ? ? ? ? ?<span class="dic"></span>
? ? ? ? ? ? ? ? ?</li> ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ?<div class="time">8月23號</div>
? ? ? ? ? ? ? ? ? ? ??<img class="ioc" src="image/r.png" width="16" heigth="16" alt="箭頭" />
? ? ? ? ? ? ? ? ? ? ? ?<span class="dic"></span>
? ? ? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ? ? <li>
? ? ? ? ? ? ? ? ? ? ? ?<div class="time">8月23號</div>
? ? ? ? ? ? ? ? ? ? ? ?<img class="ioc" src="image/r.png" width="16" heigth="16" alt="箭頭" />
? ? ? ? ? ? ? ? ? ? ? ?<span class="dic"></span>
? ? ? ? ? ? ? ? ? </li>
?? ? ? ? ? ?</ul>
? ? ? </div> ??
?</div>
<script src="js/jquery.js"></script>
<script>
//測試jq是否引入成功
alert($);
//js如何獲取對象 $代理jq函數(shù) $("對象元素")
$(".con .txtlist ul li:lt(3)").show();//找到序列號小于3的li元素
//瀏覽器窗口滾動(dòng)事件
$(window).scroll(function(){
//遍歷每一個(gè)li
$(".con .txtlist ul li").each(function(){
var _index=$(this).index()+3;//獲取當(dāng)前遍歷對象的序列號
var Top=$(window).scrollTop();//瀏覽器 ? 滾動(dòng)條高度
?
var _height=$(this).offset().top();//得到當(dāng)前l(fā)i到頂部的距離
//判斷滾動(dòng)條高度和li到頂部的距離 ??
? ?if(Top<_height){
$(".con .txtlist ul li:lt("+_index+")").show();
$(".con .txtlist ul li:lt("+_index+")").hide();
? ? ? return false;//跳出遍歷
? ? }
? ?});
})
</script> ? ??
</body>
</html>
布局用class,js用id,旋轉(zhuǎn)
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/think90/p/5801288.html
總結(jié)
以上是生活随笔為你收集整理的腾讯QQ空间穿越时光轴3D特效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果开发者账号申请流程完整版
- 下一篇： 物理地址是怎么确定的？以8086为例