亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

我寫的代碼，比課程要求多了一個光暈特效，各位可以復制運行看看。有個不足是，鼠標移上去仔細看兩邊有一點點多出來的黑線，有大神能解決嗎？

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

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號