为了账号安全,请及时绑定邮箱和手机立即绑定

我写的代码,比课程要求多了一个光晕特效,各位可以复制运行看看。有个不足是,鼠标移上去仔细看两边有一点点多出来的黑线,有大神能解决吗?

<!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>


正在回答

4 回答

因为透视设的是4000px,很正常,把旋转角调1、2度,以及border-radius不要太大,就不大看得出来;

光晕挺好看的,不过感觉帧少了,有点不流畅。

0 回复 有任何疑惑可以回复我~

backface-visibility: hidden;给图片加上这个就好了,我试过了


0 回复 有任何疑惑可以回复我~

https://img1.sycdn.imooc.com//5bd84f0d0001219500640064.jpg

感谢分享!!!

0 回复 有任何疑惑可以回复我~

个人猜测是视角问题或者定位问题,导致本该不可见的边框露出来了,在border-shadow的影响下变得更明显。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

我写的代码,比课程要求多了一个光晕特效,各位可以复制运行看看。有个不足是,鼠标移上去仔细看两边有一点点多出来的黑线,有大神能解决吗?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信