CSS 小效果记录
CSS Tips: https://markodenic.com/css-tips/
1. 弹性盒子布局(所有浏览器都兼容)
<style>
.box {
width: 256px;
height: 256px;
text-align: justify;
}
.box::before {
content: '';
display: inline-block;
height: 100%;
}
.box::after {
content: '';
display: inline-block;
width: 100%;
}
.bar {
display: inline-block;
width: 20px;
background: pink;
}
</style>
<!-- 第一个 i 标签不要换行 -->
<div class="box"><i class="bar" style="height: 100px;"></i>
<i class="bar" style="height: 70px;"></i>
<i class="bar" style="height: 80px;"></i>
<i class="bar" style="height: 100px;"></i>
<i class="bar" style="height: 60px;"></i>
</div>
效果如下:
2. 正在加载… 动效
<style>
dot {
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before {
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot {
33% { transform: translateY(-2em); }
66% { transform: translateY(-1em); }
}
</style>
<div>正在加载中<dot>...</dot></div>
效果:
3. 菜单项(三道横线)
<style>
.icon-menu {
display: inline-block;
padding: 35px 0;
width: 120px;
height: 10px;
border-top: 10px solid;
border-bottom: 10px solid;
background-color: pink;
background-clip: content-box;
}
</style>
<a class="icon-menu"></a>
效果:
(待补充)
至此,结束。