今天想要分享的是这个,
记得我当时看到这个效果的时候觉得真的是炫炮过头了,
马上整个影片看完做练习,
做一做还边想可以用什麽不一样的方式做,
结果我老师建议我可以用 box-shadow
做,
想了半天觉得:「恩!我懒得去计算,还是就用 ::before
、::after
吧!」
效果
HTML
<div class="container">
<div class="item-group">
<div class="item"><img src="https://picsum.photos/300/500/?random=1"></div>
<div class="item"><img src="https://picsum.photos/300/500/?random=2"></div>
<div class="item"><img src="https://picsum.photos/300/500/?random=3"></div>
<div class="item"><img src="https://picsum.photos/300/500/?random=4"></div>
</div>
</div>
CSS
* {
padding: 0;
margin: 0;
list-style: none;
}
img {
width: 100%;
vertical-align: middle;
}
.container {
width: 960px;
margin: auto;
line-height: 100vh;
}
.item-group {
display: inline-block;
vertical-align: middle;
}
.item-group::after {
content: '';
display: block;
height: 0;
clear: both;
}
.item {
width: 210px;
line-height: 1;
margin: 0 15px;
float: left;
position: relative;
}
.item::before,
.item::after {
content: '';
width: 50%;
height: 0%;
background-color: #fff;
position: absolute;
transition: .5s;
}
.item::before {
left: 0;
top: 0;
}
.item::after {
right: 0;
bottom: 0;
}
.item-group:hover .item::before,
.item-group:hover .item::after {
height: 100%;
}
.item-group .item:hover::before,
.item-group .item:hover::after {
height: 0;
}
今天就先到这里啦~
我们明天见。
黑白照片上色 教学原文参考:黑白照片上色 这篇文章会介绍使用 GIMP 的着色功能,搭配图层的遮罩,...
Hashicorp Vault: HA with Integrated Storage 昨天有提到H...
从 IT 技术面细说 Search Console 的 27 组数字 KPI (22) :KPI 总...
今日学习目标 如何选择最佳的模型? 深入理解度拟合与欠拟合 Bias-Variance Tradeo...
用WordPress.org自己架设网站,简单吗? 和我一样的外行人只要跟着买主机,一键安装Word...