                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS3+JS 實(shí)現(xiàn)超炫的散列畫廊特效

明明照著寫的，但寫出來的效果不知道啥東西，好暈吶

<!DOCTYPE?html><html?lang='zh-cn'>????<head>????????<title>海報(bào)畫廊</title>????????<meta?charset="utf-8">????????<style?type="text/css">????????????*{????????????????margin:?0;????????????????padding:?0;????????????}????????????body{????????????????background-color:?#fff;????????????????color:?#555;????????????????font-family:?'Avenir?Next','Lantinghei?SC';????????????????font-size:?14px;????????????????-webkit-font-smoothing:antialiased;????????????}????????????.wrap{????????????????width:?100%;????????????????height:?600px;????????????????position:?absolute;????????????????top:?50%;????????????????margin-top:?-300px;????????????????background-color:?#333;????????????????overflow:?hidden;????????????}????????????/*海報(bào)樣式*/????????????.photo{????????????????width:?260px;????????????????height:?320px;????????????????position:?absolute;????????????????z-index:?1;????????????????box-shadow:??0?0?1px?rgba(0,0,0,0.01);????????????}????????????.photo?.side{????????????????width:?100%;????????????????height:?100%;????????????????background-color:?#eee;????????????????position:?absolute;????????????????top:?0;????????????????right:?0;????????????????padding:?20px;????????????????box-sizing:?border-box;????????????}????????????.photo?.side-front{???????????????display:?none;????????????}????????????.photo?.side-front?image{????????????????width:?100%;????????????????height:?250px;????????????????line-height:?250px;????????????????overflow:?hidden;????????????}????????????.photo?.side-front?image?img{????????????????width:?100%;????????????}????????????.photo?.side-front?.caption{????????????????text-align:?center;????????????????font-size:?16px;????????????????line-height:?50px;????????????}????????????.photo?.side-back{????????????????????????????}????????????.photo?.side-back?.desc{????????????????color:?#666;????????????????font-size:?14px;????????????????line-height:?1.5em;????????????}????????????/*當(dāng)前選中的海報(bào)樣式*/????????????.photo_center{????????????????left:?50%;????????????????top:50%;????????????????margin:?-160px?0?0?-130px;????????????????z-index:?999;????????????}????????</style>????</head>????<body?onselectstart='return?false;'>????????<div?class="wrap">????????????<div?class="phone?photo_center">????????????????<div?class="side?side-front">????????????????????<p?class="image"><img?src="maidou.jpg"></p>????????????????????<p?class="caption">麥兜我和我媽媽</p>????????????????</div>????????????????<div?class="side?side-back">????????????????????<p?class="desc">描述信息</p>????????????????</div>????????????</div>????????</div>????</body></html>