html5 漫画效果,CSS3和js打造四格漫画风格的LightBox特效
在这篇文章中我们想制作一个很有意思四格漫画风格的Lightbox特效。以前在报纸上可以看到很多的四格漫画，我们做的这个特效类似于这个风格，一个大方框中包含4格等宽等高的图片，当点击任意图片的时候，该图片放大到整个大方框的尺寸，再次点击图片时，图片缩小会原来的尺寸。
在HTML结构上，我们采用一个
我们要使这四幅图片并排排列，并且要保证它们的尺寸大小相同。
div#quad {
background-color: #111; font-size: 0;
width: 50%; margin: 0 auto;
}
div#quad figure {
margin: 0; width: 50%; height: auto;
transition: 1s; display: inline-block;
position: relative;
}
div#quad figure img { width: 100%; height: auto; }
接下来，要确保每一个
div#quad figure:nth-child(1) { transform-origin: top left; }
div#quad figure:nth-child(2) { transform-origin: top right; }
div#quad figure:nth-child(3) { transform-origin: bottom left; }
div#quad figure:nth-child(4) { transform-origin: bottom right; }
最后，为图片的标题添加一些样式：
div#quad figure figcaption {
margin: 0; opacity: 0;
background: rgba(0,0,0,0.3); color: #fff;
padding: .3rem; font-size: 1.2rem;
position: absolute; bottom: 0; width: 100%;
transition: 1s 1s opacity;
}
.expanded { transform: scale(2); z-index: 5; }
div#quad figure.expanded figcaption { opacity: 1; }
div.full figure:not(.expanded) { pointer-events: none; }
div#quad figure:hover { cursor: pointer; z-index: 4; }
上面的CSS3代码十分好理解，就不再多说了。下面来看看js代码。代码要写在文档的最后。
var quadimages = document.querySelectorAll("#quad figure");
for(i=0; i
quadimages[i].addEventListener( 'click', function(){ this.classList.toggle("expanded");
quad.classList.toggle("full") }
);
}
当我们点击或触摸缩略图的时候，通过js代码为其添加相应的class来使它伸展到父容器的宽度，当图片在放大状态下，它的z-index属性是最高的，这样确保了它在其它图片的上面。为了更加稳妥，CSS代码中还去除了其它图片的pointer-events事件。
制作这个四个漫画风格的Lightbox特效的唯一条件的所有的图片都一样尺寸。按照这个原理，我们也可以制作6格漫画风格或9格漫画风格的Lightbox特效，我们只需要修改一下transform-origin即可。
html5 漫画效果,CSS3和js打造四格漫画风格的LightBox特效相关推荐
- Unity3d如何实现四格漫画动态播放
前言 四格漫画,百度百科: 四格漫画,是以四个画面分格来完成一个小故事或一个创意点子的表现形式.四格漫画短短几格就涵盖了一个事件的发生.情节转折及幽默的结局.让人看完不觉莞尔,会心一笑或捧腹大笑.四格 ...
- 怎么用手机制作一个四格漫画（flutter）
一,背景 四格漫画,是以四个画面分格来完成一个小故事或一个创意点子的表现形式 ,分为开头,发展,高潮,结尾 .那怎么用手机制作一个四格漫画呢?就像下图这样. 二,思考过程 漫画么,简单点就两个主要的元 ...
- ［蛋蛋四格漫画］蛋蛋式按摩……（中日台词对照）
国庆七天假,大家玩得开心哇? 偶玩得很开心呐------ 去了看街舞大赛,看野生动物,看漫画节---- 等偶空鸟马上更新那几天拍滴PP呐! 好咧,马上瞄瞄新一期的四格漫画吧! 宗旨: 希望能让大家开怀 ...
- 【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)动画特效图标网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [web前端特效源码]Html5+css3实现新拟态新拟物风格(Neumorphism)网页图标动画效果!手把手教学!新手必会!超简单 ~ 效果图: 完整代码: <!DOCT ...
- 怎么将照片变成漫画效果？分享几种照片变漫画方法
将照片变成漫画可以让照片产生不同的风格,如日式动漫.美式漫画等.不同的风格会给人不同的感受,让照片更加丰富多彩.例如,日式动漫风格通常以柔和的色彩和温馨的情感为特点,能够营造出浪漫的氛围,而美式漫画则 ...
- html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...
- 如何将照片变漫画效果？分享两个照片变漫画小技巧
如何将照片变成漫画效果呢?大家在日常中会看到被人的头像是自己照片的漫画效果,非常有趣,想要自己也制作成一张这样的漫画效果,用来用作背景和头像,或者在社交媒体上发布,具体该怎么做呢?给大家分享两种能够将 ...
- html5手机手风琴相册,纯js带弹性动画的手风琴图片相册特效
这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效.该手风琴图片相册在鼠标滑过时,相应的图片会水平展开,而图片的说明文字则会垂直滑动上来,形成一些视觉差的感觉. 使用方法 在页面 ...
- html5 心跳效果,css3实现心脏跳动
源码如下: Title *{ margin: 0; padding: 0; } body{ width: 100vw; height: 100vh; display: flex; justify-co ...
最新文章
- python笔试题110题_《Python程序设计》试题库
- 学Java发展前景好的三个原因
- 个人作业Alpha项目测试
- mentor公司的PCB设计软件：PADs， Expedition，BoardStation
- Libusb开发教程三 USB设备程序开发
- 男生给女生最牛Ｂ的告白
- bzoj 1061 志愿者招募 费用流
- 计算区域中有t 个点的 区域有多少个+计算几何 + 叉乘+sort+ 二分 + map poj 2398 Toy Storage...
- 计算机打印不了测试纸,XP打印机打印不了测试页如何解决|打印机打印不了测试页的原因...
- (七)视频背景移除/去背景/换背景/抠图/抠像代码示例：实时抠图、实时抠像、人像去背景、背景消除
- ASIC开发流程介绍
- zookeeper之ZkClient使用，java电子书阅读器开发
- 如何控制舵机的速度？
- 软键盘实例 request参数修改
- The Little Match Girl，摘自iOS应用Snow White and more stories
- 服务器金属外壳刮花了怎么修复,pc拉杆箱被磨了怎么办?3方法快速修复(附防刮方式)...
- PS基础--水平翻转图像
- 网络连接失败（解决办法）
- “不允许一个用户使用一个以上用户名与一个服务器或共享资源的多重连接”问题的解决
- 腾讯内部转岗_5亿人 在用的腾讯APP，要凉了！！！