html5如何将图片堆叠代码,css实现图片堆叠效果的方法介绍
css实现图片堆叠效果的方法介绍
发布时间:2020-04-03 13:49:30
来源:亿速云
阅读:51
作者:小新
今天小编给大家分享的是css实现图片堆叠效果的方法介绍,很多人都不太了解,今天小编为了让大家更加了解css实现图片堆叠效果,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。
1、初始index.html
为了建立第一张照片,也就是最上面的那张。我们只需要添加一个div,里面包含照片的img。就这么多,剩下的效果都是通过CSS来实现的。确保div的class为stackone。
Photo Stack
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.stackone {
--img-width: 480px;
--img-height: 320px;
border: 6px solid #fff;
float: left;
height:var(--img-height);
width: var(--img-width);
margin: 50px;
position: relative;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.stackone img {
width: var(--img-width);
}
初始的效果如下:
2、The First Pseudo Element
现在我们添加一层底片。我们想得到的效果是:底层图片看上去好像是在顶层照片下面。我们可以用CSS的伪类:before来实现。.stackone::before {
content: "";
height:var(--img-height);
width: var(--img-width);
background: #eff4de;
border: 6px solid #fff;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
3、完善before
给:before加入一些定位,然后设置z-index将它放在后面。.stackone::before {
content: "";
height:var(--img-height);
width: var(--img-width);
background: #eff4de;
border: 6px solid #fff;
position: absolute;
z-index: -1;
top: 0px;
left: -10px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
4、The Second Pseudo Element.stackone::after {
content: "";
height:var(--img-height);
width: var(--img-width);
background: lightblue;
border: 6px solid #fff;
position: absolute;
z-index: -1;
top: 5px;
left: 0px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
完成图:
关于css实现图片堆叠效果的方法介绍就分享到这里了,当然并不止以上和大家分析的办法,不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。
html5如何将图片堆叠代码,css实现图片堆叠效果的方法介绍相关推荐
- css中图片缩小代码,css让图片等比例缩小的代码
随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站 这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢? 那就利用css的强大 ...
- css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css
如何用css实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容.不过如果你只需求 ...
- php设置背景图片的代码,css设置背景图片如何实现?(代码实例)
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
- html5图片的纵向排列,css让图片横着排列的方法
css让图片横着排列的方法 发布时间:2021-01-11 11:52:50 来源:亿速云 阅读:197 作者:小新 这篇文章给大家分享的是有关css让图片横着排列的方法的内容.小编觉得挺实用的,因此 ...
- html图片纵向排列代码,竖向长方形图片横向正方形列表排列并取图片中间不变形的CSS方法...
先看下这个图片:一个竖向的长方形图片,需求就是:通过CSS的方法使展示的时候竖向图片要实现横向正方形排列而且图片不能变形. 一般排列后效果为: 完全变形了,那么进行代码样式优化后的效果为(取图片中间) ...
- html图片自动循环,css实现图片循环的动画效果(代码)
本篇文章给大家带来的内容是关于css实现图片循环的动画效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. *{margin: 0;padding: 0;} .robot{ w ...
- html悬浮的图片居中,HTML/CSS:图片居中(水平居中和垂直居中)
css图片水平居中 1.利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 2.利用文本的水平 ...
- css图片过大,CSS解决图片过大撑破DIV的方法
一.防止图片撑破DIV方法一 原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切.等比例缩 ...
- html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...
最新文章
- 实验3 数据库综合查询
- Python基础11-函数式编程与内置函数
- MongoDB 连接数高产生原因及解决
- 自动化部署shell01
- DL之DNN优化技术:神经网络算法简介之数据训练优化【mini-batch技术+etc】
- 关于初始化C++类成员
- SpringMVC+Shiro权限管理
- dotween路径移动_Unity---DOTween插件学习(3)---获取数据、协程、路径动画
- Linux 主要目录速查表
- .net core linux 串口,.Net Core 跨平台应用使用串口、串口通信 ,可能出现的问题、更简洁的实现方法...
- 异常详细信息: System.ComponentModel.Win32Exception: 信号灯超时时间已到
- python绘制小狗_SAI教程:绘画小狗手绘板教程
- 物联网的原理、应用和技能
- C#:合并EXCEL文件工作表列
- Whois 查询违法?
- linux 查看电池日志,linux终端查看笔记本电池电量
- Solar-PuTTY修改背景、字体颜色和字体大小
- BTA分论坛现场直击|区块链与投资,不是“钱”那么简单!
- 计算机剪切功能是哪个组合键,剪切快捷键是哪个 电脑剪切快捷键大全
- 著名弹跳训练法 练成可提高30cm
热门文章
- CHIL-SQL-JOIN
- 喜报丨京东科技主导的开源项目ShardingSphere荣登报告榜单国人主导开源项目中活跃度第五名!...
- jmeter 之 BSF,BeanShell(转载)
- python中while True用法
- 2022 CSP-S2 提高组 第2轮 复赛 视频
- FTP服务器部署与优化+Received message too long报错
- laravel 5.6 请教邮件中的cc,bcc是什么意思,有什么用?
- SQLServer存储过程大全
- element表单校验输入框手动清空时出现XXX is required提示
- 芋道 Apollo 极简入门