一个简单的纯css展示照片
该小项目是在闲暇的时候看一个老师直播的时候做的小项目于是自己就上手做了一下。
文章目录
该项目使用的css3的新属性
自从H5和CSS3出现后越来越受欢迎，它们使得前端的界面越来越炫酷，变得也越来丰富多彩，特别是CSS3的动画，旋转，倒影，遮罩层、、、、、
一、案例展示
该项目的案例展示就是这些使用的技术也就是纯css的技术，通过这个小案例可以复习我们学习的css3里面学习的东西
二、案例使用的技术方法
1.flex弹性布局
该图片通过弹性布局来展示图片的展示位置
display: flex;
align-items: center;
justify-content: center;
通过这三个属性添加到父级可以让子元素可以将元素放在横向和纵向的中间
（不过多解释，想要了解更多去查找flex布局）
2.transform旋转
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
语法
transform: none|transform-functions;
3.transition过渡
4.perspective设置元素被查看位置的视图
5.filter(滤镜) 属性
三.代码
html
<!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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="wrape">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
background-color: #003;
display: flex;
align-items: center;
justify-content: center;
}
.wrape {
width: 1000px;
height: 300px;
display: flex;
/* outline: 1px solid; */
justify-content: space-between;
perspective: 800px;
}
.wrape img {
width: 300px;
height: 300px;
transition: all 0.8s;
transform: rotateY(30deg);
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #ff4);
}
.wrape:hover img {
filter: blur(5px);
opacity: 0.5;
}
.wrape img:hover {
transform: rotateY(0deg);
opacity: 1;
filter: blur(0);
}
项目解构
在img中添加三张图片
总结
在该项目的只是用到简单的css3新添加的特性，来练习一些知识防止时间久了对属性存在遗忘。
581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
