图片文字模拟漫画书的布局效果

栏目: Html · 发布时间: 7年前

核心属性

display: flex + justify-content: space-between + align-items: center 图片居中水平排列

border-image 图片和文字的动画边框效果

@media 根据不同的页面大小，图片呈现不同的布局方式

相关知识

<base href="https://pics.codecolor.cn/graphic-novel/">

```
<div id="strip">
```
```
<figure id="panel1">
```

<img src="pleading-man.jpg" alt="A photograph of a man kneeling in a parking garage, pleading for his life">

<figcaption>“等等…”</figcaption>

```
</figure>
```

<img src="car-strip.jpg" alt  id="panel2">

```
<figure id="panel3">
```

<img src="gunman.jpg" alt="A backlit photograph of a man holding a gun">

```
<figcaption>砰！！！</figcaption>
```
```
</figure>
```
```
</div>
```

```
#strip {
```
```
display: flex;
```
```
justify-content: space-between;
```
```
align-items: center;
```
```
max-width: 820px;
```
```
margin: 0 auto;
```
```
}
```
```
#strip img {
```

border-image: url(https://pics.codecolor.cn/graphic-novel/comic-frame.png) 22 16 16 22;

```
background: #000;
```
```
border-width: 12px;
```
```
border-style: solid;
```
```
}
```
```
#panel1 {
```
```
width: 40%;
```
```
position: relative;
```
```
}
```
```
#panel3 {
```
```
width: 35%;
```
```
position: relative;
```
```
}
```
```
#panel1 img, #panel3 img {
```
```
width: 100%;
```
```
}
```
```
#strip figcaption {
```
```
position: absolute;
```
```
top: 2rem;
```
```
right: -2rem;
```
```
padding: 1rem;
```
```
background: #fff;
```
```
background-clip: padding-box;
```
```
font-size: 1.2rem;
```

font-family: Comic Sans MS, Comic Sans, cursive;

border-image: url(https://pics.codecolor.cn/graphic-novel/lettering-frame.png) 11 10 14 12;

```
border-width: 6px;
```
```
border-style: solid;
```
```
}
```
```
#panel1 figcaption {
```
```
letter-spacing: .3rem;
```
```
top: 1rem;
```
```
right: -4rem;
```
```
}
```
```
#panel3 figcaption {
```
```
left: -2rem;
```
```
width: 4rem;
```
```
font-style: italic;
```
```
}
```
```
@media screen and (max-width: 60rem) {
```
```
#panel2 {
```
```
display: none;
```
```
}
```
```
#strip img {
```
```
width: 100%;
```
```
}
```
```
#panel1 figcaption {
```
```
top: -1rem;
```
```
}
```
```
}
```
```
@media screen and (max-width: 50rem) {
```
```
#panel1 figcaption {
```
```
top: 10rem;
```
```
}
```
```
}
```
```
@media screen and (max-width: 30rem) {
```
```
#strip {
```
```
flex-direction: column;
```
```
}
```
```
#panel1 {
```
```
order: 3;
```
```
}
```
```
#panel1,#panel3 {
```
```
width: 60%;
```
```
}
```
```
#panel3 {
```
```
align-self: flex-end;
```
```
}
```
```
#panel3 figcaption {
```
```
display: none;
```
```
}
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Paradigms of Artificial Intelligence Programming

Peter Norvig / Morgan Kaufmann / 1991-10-01 / USD 77.95

Paradigms of AI Programming is the first text to teach advanced Common Lisp techniques in the context of building major AI systems. By reconstructing authentic, complex AI programs using state-of-the-......一起来看看《Paradigms of Artificial Intelligence Programming》这本书的介绍吧!

码农工具

JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB转16进制工具

RGB HEX 互转工具

随机密码生成器

多种字符组合密码