<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 带镜框（透明相框）特效的电影海报轮播幻灯片</title>
<style>
.fnc-slider {
overflow: hidden;
box-sizing: border-box;
position: relative;
height: 100vh;
}
.fnc-slider *,
.fnc-slider *:before,
.fnc-slider *:after {
box-sizing: border-box;
}
.fnc-slider__slides {
position: relative;
height: 100%;
-webkit-transition: -webkit-transform 1s 0.66667s;
transition: -webkit-transform 1s 0.66667s;
transition: transform 1s 0.66667s;
transition: transform 1s 0.66667s, -webkit-transform 1s 0.66667s;
}
.fnc-slider .m--blend-dark .fnc-slide__inner {
background-color: #8a8a8a;
}
.fnc-slider .m--blend-dark .fnc-slide__mask-inner {
background-color: #575757;
}
.fnc-slider .m--navbg-dark {
background-color: #575757;
}
.fnc-slider .m--blend-green .fnc-slide__inner {
background-color: #6d9b98;
}
.fnc-slider .m--blend-green .fnc-slide__mask-inner {
background-color: #42605e;
}
.fnc-slider .m--navbg-green {
background-color: #42605e;
}
.fnc-slider .m--blend-red .fnc-slide__inner {
background-color: #ea2329;
}
.fnc-slider .m--blend-red .fnc-slide__mask-inner {
background-color: #990e13;
}
.fnc-slider .m--navbg-red {
background-color: #990e13;
}
.fnc-slider .m--blend-blue .fnc-slide__inner {
background-color: #59aecb;
}
.fnc-slider .m--blend-blue .fnc-slide__mask-inner {
background-color: #2d7791;
}
.fnc-slider .m--navbg-blue {
background-color: #2d7791;
}
.fnc-slide {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.fnc-slide.m--before-sliding {
z-index: 2 !important;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.fnc-slide.m--active-slide {
z-index: 1;
-webkit-transition: -webkit-transform 1s 0.66667s ease-in-out;
transition: -webkit-transform 1s 0.66667s ease-in-out;
transition: transform 1s 0.66667s ease-in-out;
transition: transform 1s 0.66667s ease-in-out, -webkit-transform 1s 0.66667s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.fnc-slide__inner {
position: relative;
height: 100%;
background-size: cover;
background-position: center top;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.m--global-blending-active .fnc-slide__inner,
.m--blend-bg-active .fnc-slide__inner {
background-blend-mode: luminosity;
}
.m--before-sliding .fnc-slide__inner {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.m--active-slide .fnc-slide__inner {
-webkit-transition: -webkit-transform 1s 0.66667s ease-in-out;
transition: -webkit-transform 1s 0.66667s ease-in-out;
transition: transform 1s 0.66667s ease-in-out;
transition: transform 1s 0.66667s ease-in-out, -webkit-transform 1s 0.66667s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.fnc-slide__mask {
overflow: hidden;
z-index: 1;
position: absolute;
right: 60%;
top: 15%;
width: 50.25vh;
height: 67vh;
margin-right: -90px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.m--before-sliding .fnc-slide__mask {
-webkit-transform: rotate(-10deg) translate3d(200px, 0, 0);
transform: rotate(-10deg) translate3d(200px, 0, 0);
opacity: 0;
}
.m--active-slide .fnc-slide__mask {
-webkit-transition: opacity 0.35s 1.22222s, -webkit-transform 0.7s 1.22222s;
transition: opacity 0.35s 1.22222s, -webkit-transform 0.7s 1.22222s;
transition: transform 0.7s 1.22222s, opacity 0.35s 1.22222s;
transition: transform 0.7s 1.22222s, opacity 0.35s 1.22222s, -webkit-transform 0.7s 1.22222s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.m--previous-slide .fnc-slide__mask {
-webkit-transition: opacity 0.35s 0.68333s, -webkit-transform 0.7s 0.33333s;
transition: opacity 0.35s 0.68333s, -webkit-transform 0.7s 0.33333s;
transition: transform 0.7s 0.33333s, opacity 0.35s 0.68333s;
transition: transform 0.7s 0.33333s, opacity 0.35s 0.68333s, -webkit-transform 0.7s 0.33333s;
-webkit-transform: rotate(10deg) translate3d(-200px, 0, 0);
transform: rotate(10deg) translate3d(-200px, 0, 0);
opacity: 0;
}
.fnc-slide__mask-inner {
z-index: -1;
position: absolute;
left: 50%;
top: 50%;
width: 100vw;
height: 100vh;
margin-left: -50vw;
margin-top: -50vh;
background-size: cover;
background-position: center center;
background-blend-mode: luminosity;
-webkit-transform-origin: 50% 16.5vh;
transform-origin: 50% 16.5vh;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.m--before-sliding .fnc-slide__mask-inner {
-webkit-transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);
transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);
}
.m--active-slide .fnc-slide__mask-inner {
-webkit-transition: -webkit-transform 0.7s 1.22222s;
transition: -webkit-transform 0.7s 1.22222s;
transition: transform 0.7s 1.22222s;
transition: transform 0.7s 1.22222s, -webkit-transform 0.7s 1.22222s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.m--previous-slide .fnc-slide__mask-inner {
-webkit-transition: -webkit-transform 0.7s 0.33333s;
transition: -webkit-transform 0.7s 0.33333s;
transition: transform 0.7s 0.33333s;
transition: transform 0.7s 0.33333s, -webkit-transform 0.7s 0.33333s;
-webkit-transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);
transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);
}
.fnc-slide__content {
z-index: 2;
position: absolute;
left: 40%;
top: 40%;
}
.fnc-slide__heading {
margin-bottom: 10px;
text-transform: uppercase;
}
.fnc-slide__heading-line {
overflow: hidden;
position: relative;
padding-right: 20px;
font-size: 100px;
color: #fff;
word-spacing: 10px;
}
.fnc-slide__heading-line:nth-child(2) {
padding-left: 30px;
}
.m--before-sliding .fnc-slide__heading-line {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.m--active-slide .fnc-slide__heading-line {
-webkit-transition: -webkit-transform 1.5s 1s;
transition: -webkit-transform 1.5s 1s;
transition: transform 1.5s 1s;
transition: transform 1.5s 1s, -webkit-transform 1.5s 1s;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.m--previous-slide .fnc-slide__heading-line {
-webkit-transition: -webkit-transform 1.5s;
transition: -webkit-transform 1.5s;
transition: transform 1.5s;
transition: transform 1.5s, -webkit-transform 1.5s;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.fnc-slide__heading-line span {
display: block;
}
.m--before-sliding .fnc-slide__heading-line span {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.m--act
HTML5实现带镜框（透明相框）效果的电影海报轮播幻灯片源码.zip
版权申诉
71 浏览量
2022-11-04
23:39:06
上传
评论
收藏 1.44MB ZIP 举报
HTML5实现带镜框（透明相框）效果的电影海报轮播幻灯片源码.zip （5个子文件） 
132677745322188737 images 
ironman-alt.jpg 265KB blackwidow.jpg 409KB captainamerica.jpg 492KB thor.jpg 308KB
index.html 36KB资源评论
