首页 > 代码库 > CSS制作图片墙
CSS制作图片墙
通过CSS3的动画效果完成的一个简单的图片墙效果
效果图:
目标:
1. 用10张图片作为照片。
2. 照片以不同的位置和旋转角度随意摆放。
3. 鼠标移动到某一张照片上时,此照片由倾斜缓慢旋转成端正,并且放大显示在最上层。
用到的知识点:
1. box-shadow:给元素的边框添加阴影的效果
box-shadow: 10px 10px 15px #ccc;
前两个参数为阴影效果在上下左右的哪两个方向便宜,正的话为下或右方,负的话为上或左方。
第三个参数为阴影半径的大小。
第四个属性为阴影颜色。
在鼠标滑动到图片上时,出现阴影的效果。
2. position:给元素定位,主要用到绝对定位。
设置每个图片的绝对定位后,通过top和Left属性,来放置图片的不同位置。
通过给图片设置绝对定位来放置不同图片的位置。
3. z-index:设置元素的上下层显示
当鼠标移动到下层图片上时,需要使下层图片移到顶端,而通过z-index属性控制其显示的层次关系。将要显示在最上层的照片的z-index值设置得比其他照片大即可。
img{
z-index: 1;
}
img:hover{
z-index: 2;
}
设置普通图片的层级为1;鼠标划过时,层级为2;
4. transition:设置元素由样式1转变为样式2的过程所需时间
transition: all 0.5s ease-in;
动画的过度属性。
5. transform:使元素变形的属性,其配合rotate(旋转角度)、scale(改变大小)、skew(扭曲元素)等参数一起使用
在此小demo中,使用rotate和scale两个属性让图片旋转一定角度,显示到顶端的时候图片放大1.2倍。从而突出顶层图片。
transform: rotate(0deg) scale(1.2);
CSS制作图片墙
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。