我写的代码,比课程要求多了一个光晕特效,各位可以复制运行看看。有个不足是,鼠标移上去仔细看两边有一点点多出来的黑线,有大神能解决吗?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D</title>
<style type="text/css">
body{
text-align:center;
background-color:rgb(246,241,232);
background-image: radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=931271653,2948631469&fm=27&gp=0.jpg");
background-image: -webkit-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=931271653,2948631469&fm=27&gp=0.jpg");
background-image: -o-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=931271653,2948631469&fm=27&gp=0.jpg");
background-image: -moz-radial-gradient(farthest-side ellipse at center, rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%), url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=931271653,2948631469&fm=27&gp=0.jpg");
background-size: cover;
}
#container{
margin:0px auto;
width:1024px;
}
h1{
display:block;
font-size:25px;
font-weight:normal;
margin:2em auto;
}
strong{
display:block;
font-size:20px;
font-family: "Oleo Script";
color:rgb(46, 45, 45);
margin:auto auto 0.5em
}
.wrapper{
display:inline-block;
width:310px;
height:100px;
margin: 1em 1.5em 2em 0;
position:relative;
perspective: 4000px;
}
.item{
position: absolute;
left:0px;
top:0px;
width:100%;
height:100%;
transform-style: preserve-3d;
transform:translateZ(-50px);
transition: all 0.3s ease-out;
}
img{
display:block;
position:absolute;
left:0;
top:0;
width:310px;
height:100px;
border-radius: 5px;
transform: rotateX(0deg) translateZ(50px)
}
span{
display:block;
position:absolute;
left: 0;
top:0;
width:310px;
height:100px;
border-radius: 5px;
text-align:left;
padding:5px 10px;
font-size:12px;
box-sizing: border-box;
transform:rotateX(-90deg) translateZ(50px);
background: linear-gradient(to bottom, rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
}
@keyframes shine{
0%{
box-shadow: 0px 0px 4px rgb(100, 163, 245);
}
25%{
box-shadow: 0px 0px 8px rgb(19, 118, 247);
}
50%{
box-shadow: 0px 0px 12px rgb(2, 39, 253);
}
75%{
box-shadow: 0px 0px 8px rgb(19, 118, 247);
}
100%{
box-shadow: 0px 0px 4px rgb(100, 163, 245);
}
}
.item:hover{
transform:translateZ(-50px) rotateX(90deg)
}
.item:hover img,.item:hover span{
animation-name:shine;
animation-duration: 2s;
animation-timing-function: ease-out;
animation-iteration-count:infinite;
}
</style>
</head>
<body>
<div id="id="container"">
<h1>CSS3 3D变形制作视频展示区</h1>
<div class="wrapper">
<div class="item">
<img src="http://pic2.qiyipic.com/image/20140415/4e/32/5f/v_105669963_m_601_180_101.jpg" />
<span class=""information>
<strong>澳门风云</strong>闻名中外,曾担任美国赌场保安总顾问的魔术手石一坚,终回流澳门退休,更宴请各方朋友到来庆祝生日宴.
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://pic4.qiyipic.com/image/20140417/b5/01/81/a_100003950_m_601_m2_180_101.jpg" />
<span class="information">
<strong>改过迁善</strong> 该剧讲述了金明民饰演的律师在失忆后回顾自己以往的所作所为心生忏悔,为弥补自己犯下的错误而与自己曾经工作过的律师事务所对簿公堂的故事。
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://pic1.qiyipic.com/common/lego/20140521/4515581d06cc4d5b8ab320da2cf3778d.jpg" />
<span class="information">
<strong>父子刑警</strong> 本剧改编自雫井修介小说《Bitter Blood》。剧中,新晋刑警·佐原夏辉(佐藤健饰)被分配到银座警察
</span>
</div>
</div>
<br />
<div class="wrapper">
<div class="item">
<img src="http://pic5.qiyipic.com/image/20140319/7a/8d/4f/a_100003478_m_601_m1_180_101.jpg" />
<span class="information">
<strong>果宝特攻3</strong> 果宝特攻3,顾名思义是果宝特攻的第二部续集,已在国家广播电影电视总局备案.暂定剧情为:菠萝吹雪偶然间穿越到了古代的水果世界
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://pic0.qiyipic.com/image/20140517/ce/e8/42/v_106167752_m_601_180_101.jpg" />
<span class="information">
<strong>红眼</strong>1988年7月16日,从汉城始发的列车发生了一起严重的交通事故,造成100多人死亡。
</span>
</div>
</div>
<div class="wrapper">
<div class="item">
<img src="http://pic6.qiyipic.com/image/20140303/da/e9/aa/v_105073913_m_601_180_101.jpg" />
<span class="information">
<strong>熊出没之夺宝熊兵</strong>一场漆黑雨夜的意外事故,一段笑料十足的误打误撞,将两个外表相似却内容各异的箱子调换。
</span>
</div>
</div>
</div>
</body>
</html>