css电视适配,CSS3 巨大的投影电视屏幕

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;

}

}

总结

以上是生活随笔为你收集整理的css电视适配,CSS3 巨大的投影电视屏幕的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。