CSS

語言：

CSSSCSS

確定

/*Add Compass*/

/*Let's begin styling*/

body {

background: #000;

}

.wrapper {

width: 1324px;

height: 750px;

margin: 50px auto;

}

.bg,

.fg,

.block {

position: absolute;

}

.bg {

z-index: 1;

}

.fg {

z-index: 2;

opacity: 0;

-moz-transition: opacity 0.15s ease-in-out;

-o-transition: opacity 0.15s ease-in-out;

-webkit-transition: opacity 0.15s ease-in-out;

transition: opacity 0.15s ease-in-out;

}

.wrapper:hover .fg {

opacity: 1;

}

.block {

width: 630px;

height: 495px;

z-index: 4;

-moz-transform: translate3d(420px, 0, 0);

-webkit-transform: translate3d(420px, 0, 0);

transform: translate3d(420px, 0, 0);

}

.tv {

width: 630px;

height: 495px;

background: url("/uploads/151101/tvSprite.jpg");

animation: spritePlay 2.5s steps(13) infinite;

-webkit-clip-path: polygon(8% 60%, 8% 60%, 94% 60%, 94% 60%);

-moz-transition: -webkit-clip-path 0.15s;

-o-transition: -webkit-clip-path 0.15s;

-webkit-transition: -webkit-clip-path 0.15s;

transition: -webkit-clip-path 0.15s;

}

.wrapper:hover .tv {

-webkit-clip-path: polygon(0% 17.5%, 15% 96%, 100% 100%, 82% -15%);

}

@keyframes spritePlay {

100% {

background-position: -8193.19px;

}

}

總結(jié)

以上是生活随笔為你收集整理的css电视适配,CSS3 巨大的投影电视屏幕的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。