使用 CSS 和 JavaScript 为灯箱制作动画
cssjavascriptweb developmentfront end technology
我们可以使用 CSS 和 JavaScript 在我们的网页中设置灯箱样式。以下示例设置灯箱样式。
示例
<!DOCTYPE html>
<html>
<style>
#parent {
margin: 2%;
padding: 0;
box-sizing: border-box;
background: cornflowerblue;
text-align: center;
}
html,body {
height:100%;
max-height:100%;
min-height:100%;
}
.smart {
display: block;
margin: 0 auto;
width: 150px;
height :150px;
}
.animation2 {
-webkit-transition: .4s ease-in-out;
-moz-transition: .4s ease-in-out;
-ms-transition: .4s ease-in-out;
-o-transition:.4s ease-in-out;
transition:.4s ease-in-out;
}
.customLightbox img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 0%;
max-height: 0%;
}
#lightbox-controls {
position: fixed;
height: 70px;
width: 70px;
top: -70px;
right: 0;
z-index: 2;
background: rgba(0,0,0,.1);
}
#close-lightbox {
display: block;
position: absolute;
overflow: hidden;
height: 50px;
width: 50px;
text-indent: -5000px;
right: 10px;
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#close-lightbox:before {
content: '';
display: block;
position: absolute;
height: 0px;
width: 3px;
left: 24px;
top :0;
background: white;
}
#close-lightbox:after {
content: '';
display: block;
position: absolute;
width: 0px;
height: 3px;
top: 24px;
left:0;
background: white;
}
.customLightbox:target {
top: 0%;
bottom: 0%;
opacity: 1;
}
.customLightbox:target img {
max-width: 100%;
max-height: 100%;
}
.customLightbox:target ~ #lightbox-controls {
top: 0px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:after {
width: 50px;
}
.customLightbox:target ~ #lightbox-controls #close-lightbox:before {
height: 50px;
}
@-webkit-keyframes smart {
0% {
-webkit-transform: rotate(2deg);
}
20% {-webkit-transform: rotate(-2deg);}
40% {-webkit-transform: rotate(2deg);}
60% {-webkit-transform: rotate(-2deg);}
80% {-webkit-transform: rotate(2deg);}
100% {-webkit-transform: rotate(-2deg);}
}
</style>
<body>
<div id="parent">
<h3>Lightbox Example</h3>
<a href="#picture" class="smart"><img src="https://images.unsplash.com/photo1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=130&ixlib=rb1.2.1&q=80&w=130"/>
<div class="customLightbox" id="picture">
<img class="animation2" src="https://images.unsplash.com/photo-1611460116297-
586f43de8ba8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=630&ixlib=rb1.2.1&q=80&w=630"/>
</div>
<div id="lightbox-controls" >
<a id="close-lightbox" class="animation2" href="#">Close Lightbox</a>
</div>
</div>
</body>
</html>
输出
这将产生以下结果 −
