html5图片视频动画效果图,HTML5交互式3D视频缩略图效果

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

position: relative;

}

body {

padding: 0;

margin: 0;

font-family: 'helvetica', sans-serif;

background: #1a252f;

}

.container {

position: relative;

width: 100%;

height: 100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

padding: 20px;

box-sizing: border-box;

}

.container .inner {

position: relative;

width: 100%;

height: 100%;

max-width: 960px;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-perspective: 300px;

perspective: 300px;

background: -webkit-radial-gradient(center ellipse, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);

background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);

}

.thumb {

position: relative;

width: 320px;

height: 180px;

box-sizing: border-box;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform-origin: center;

transform-origin: center;

-webkit-transition: all 0.2s linear;

transition: all 0.2s linear;

-webkit-transform: rotatex(0deg) rotatey(0deg);

transform: rotatex(0deg) rotatey(0deg);

}

.thumb.idle:after {

-webkit-transform: translatez(25px) translatey(0px);

transform: translatez(25px) translatey(0px);

opacity: 1;

}

.thumb.idle:before {

-webkit-transform: translatez(25px) translatey(0px);

transform: translatez(25px) translatey(0px);

opacity: 1;

}

.thumb:after {

content: 'Hover Me';

font-size: 12px;

color: silver;

position: absolute;

top: -55px;

left: 50%;

width: 80px;

margin-left: -40px;

background-color: rgba(255, 255, 255, 0.4);

text-align: center;

padding: 5px 0;

border-radius: 3px;

-webkit-transform: translatez(25px) translatey(20px);

transform: translatez(25px) translatey(20px);

-webkit-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

opacity: 0;

}

.thumb:before {

content: '';

position: absolute;

top: -32px;

left: 50%;

margin-left: -10px;

width: 0;

height: 0;

border-style: solid;

border-width: 8px 10px 0 10px;

border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;

-webkit-transform: translatez(25px) translatey(20px);

transform: translatez(25px) translatey(20px);

-webkit-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

opacity: 0;

}

.thumb .backlight {

position: absolute;

top: 0;

left: 0;

right: 0;

width: 320px;

height: 180px;

background-color: rgba(255, 255, 255, 0.1);

box-shadow: 0px 0px 100px 40px rgba(255, 255, 255, 0.2);

-webkit-transform: translateZ(-40px);

transform: translateZ(-40px);

z-index: 1;

}

.thumb .player {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 320px;

height: 180px;

opacity: 1;

border-radius: 5px;

background-color: black;

background-image: url("/uploads/161001/lighten3.jpg");

background-repeat: no-repeat;

background-position: center;

background-size: cover;

-webkit-transform: translateZ(20px);

transform: translateZ(20px);

z-index: 2;

}

.thumb .shine {

position: absolute;

top: 0;

left: 0;

width: 320px;

height: 180px;

border-radius: 5px;

-webkit-transform: translateZ(20px);

transform: translateZ(20px);

overflow: hidden;

pointer-events: none;

z-index: 3;

}

.thumb .btn-shadow {

position: absolute;

top: 50%;

left: 50%;

margin-left: -21px;

margin-top: -21px;

width: 42px;

height: 42px;

border-radius: 50%;

background-color: rgba(0, 0, 0, 0.3);

box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.5);

-webkit-transform: translateZ(50px);

transform: translateZ(50px);

z-index: 4;

}

.thumb .btn {

position: absolute;

top: 50%;

left: 50%;

margin-left: -21px;

margin-top: -21px;

width: 42px;

height: 42px;

border-radius: 50%;

opacity: 0.8;

border: 2px solid rgba(255, 255, 255, 0.4);

background-color: #34495e;

-webkit-transform: translateZ(60px);

transform: translateZ(60px);

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

transition: opacity 0.2s ease-in-out;

cursor: pointer;

z-index: 5;

}

.thumb .btn:hover {

opacity: 1;

}

.thumb .btn:after {

content: '';

position: absolute;

top: 50%;

left: 50%;

width: 0;

height: 0;

margin-left: -5px;

margin-top: -7px;

border-style: solid;

border-width: 7.5px 0 7.5px 14px;

border-color: transparent transparent transparent rgba(255, 255, 255, 0.6);

z-index: 5;

}

.info {

position: fixed;

bottom: 40px;

left: 50%;

margin-left: -160px;

width: 320px;

text-align: center;

-webkit-transform: translatey(120px);

transform: translatey(120px);

-webkit-transition: -webkit-transform 0.4s ease-in-out;

transition: -webkit-transform 0.4s ease-in-out;

transition: transform 0.4s ease-in-out;

transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;

z-index: 1;

}

.info.open {

-webkit-transform: translatey(0px);

transform: translatey(0px);

}

.info p.more-info {

display: inline-block;

color: silver;

background-color: rgba(0, 0, 0, 0.4);

padding: 5px 10px;

border-radius: 3px;

margin: 0 0 30px 0;

cursor: pointer;

}

.info h1 {

font-size: 20px;

font-weight: lighter;

color: silver;

text-transform: uppercase;

margin: 0;

}

.info p.small {

font-size: 12px;

color: silver;

margin: 5px 0;

}

.info p.small a {

color: #2980b9;

text-decoration: none;

-webkit-transition: color 0.4s ease-in-out;

transition: color 0.4s ease-in-out;

}

.info p.small a:hover {

color: #3498db;

}

.info ul.social {

width: 100%;

margin: 20px 0 0 0;

padding: 0;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

}

.info ul.social li.item {

padding: 0 10px;

list-style: none;

margin: 0;

}

.info ul.social li.item a {

color: silver;

text-decoration: none;

}

.info ul.social li.item a:hover {

color: #3498db;

}