CSS Tricks
在现代Web开发中，CSS3的兼容性已经十分之高，有很多以前需要使用JS来实现的功能，对于现代CSS来说已经变得轻而易举，
交互
Tab栏
xml
<div>
Todo
</div>Tooltip
html
<!-- reactive -->
<div class="box">
<div class="content">Hover me</div>
<div class="tooltip">Tooltip</div>
</div>
<style>
.box {
position: relative;
}
.tooltip {
position: absolute;
opacity: 0;
transition: all ease 0.2s;
box-shadow: 0 1px 1px black;
border-radius: 4px;
padding: 2px 4px;
}
.box:hover .tooltip {
opacity: 1;
}
</style>动画
加载文本指示器
html
<!-- reactive -->
<div class="box">
<div class="ellipsis-loading">Loading</div>
<style>
.ellipsis-loading::after {
content: "";
animation: dots 3s steps(3) infinite;
}
@keyframes dots {
0% { content: ""; }
33% { content: " ."; }
66% { content: " .."; }
100% { content: " ..."; }
}
</style>