四、用html+css实现相册特效——html5教程 前段大G > 首页 > css源码分享 >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img:hover {
transform: scale(1.1);
transition: transform .3s ease;
}
div {
width: 500px;
height: 200px;
}
/* 滑动特效 */
.container {
display: flex;
flex-wrap: wrap;
}
.container img {
height: 200px;
margin: 5px;
transition: margin .3s ease;
}
.container img:hover {
margin: 0px;
}
/* 翻转特效 */
.flip-container {
perspective: 1000px;
background: red;
}
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
background: forestgreen;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.back {
transform: rotateY(180deg);
background: green;
}
/* 缩放特效 */
.zoomImg {
transition: transform 0.4s;
background: gold;
}
.zoomImg:hover {
transform: scale(1.25);
}
.front {
background: khaki;
}
.container{
width: 1000px;
height: 500px;
background: black;
}
</style>
</head>
<body>
<div class="container">
<div class="flipper">1</div>
<div class="flip-container">2</div>
<div class="front">3</div>
<div class="back">4</div>
<div class="zoomImg">5</div>
</div>
</body>
</html>
这篇四、用html+css实现相册特效——html5教程，文章就结束了，有不懂的地方可以联系站长。希望每个前端人员都有可以找到一个好工作，谢谢观看，祝您生活愉快。
2023-11-21 15:00
文章点击量：
作者：【前端大G】
文章标签：
四,、,html,教程,用,html+css,实现,相册,特
