css奇淫巧计

纯css实现半圆

	width:100px;
	height:200px;
	background-color:red;
	border-radius:100px;
	border-top-left-radius:100px;
	border-bottom-left-radius:100px;

纯css实现文字渐变色动画效果

<div class="list">
	<span class="list-item">今天又是元气满满的一天</span>
    <span class="list-item">让眼睛休息一下把</span>
    <span class="list-item">小姐姐今天好漂漂哟~</span>
    <span class="list-item">明天要放假了真开心</span>
    <span class="list-item">每天进步一点点</span>
</div>

@supports (-webkit-transform: scale(0)) {
    .list {
        background-image: linear-gradient(to right, red, orange, yellow, green, yellow, orange, red, orange, yellow, green, yellow, orange, red);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-background-size: 200% 100%;
        animation: bgp 5s infinite linear;
    }
}
@keyframes bgp {
    0%  { background-position: 0 0;}
    100% { background-position: -100% 0;}
}

切记：span元素不可设置display:inline-block。

纯css实现文字下面波浪动画效果

https://www.zhangxinxu.com/wordpress/2019/04/css-wave-wavy-animation/

纯css实现树型布局中的层级线条

li {
	position:relative;
	line-height:26px;
}
li:before {
	content:'';
	position:absolute;
	width:1px;
	height:100%;
	top:-3px;
	left:-13px;
	background-color:red;
}
li:after {
	content:'';
	position:absolute;
	width:10px;
	height:1px;
	top:13px;
	left:-13px;
	background-color:blue;
}
li:last-child:not(:only-child):before {
	height:20px;
}
li:only-child:before {
	height:16px;
	top:-3px;
}

overflow选项卡，可用于实现单页应用

<div class="box">
    <ul class="show">
        <li class="show-in" id="one">1</li>
        <li class="show-in" id="two">2</li>
        <li class="show-in" id="three">3</li>
        <li class="show-in" id="four">4</li>
    </ul>
    <nav class="con">
        <a class="con-in" href="#one">1</a>
        <a class="con-in" href="#two">2</a>
        <a class="con-in" href="#three">3</a>
        <a class="con-in" href="#four">4</a>
    </nav>    
</div>   

body{
    margin: 0;
    text-align: center;
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
.show{
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 1px solid black;
    line-height: 100px;
    font-size: 40px;
}    
.show-in{
    width: 100px;
    height: 100px;
}
#one{
    background-color: lightgreen;
}
#two{
    background-color: lightyellow;
}
#three{
    background-color: lightblue;
}
#four{
    background-color: pink;
}
.con{
    margin: 10px 0 0 10px;
    width: 100px;
}
.con-in{
    display:inline-block;
    width: 16px;
    line-height: 16px;
    border: 1px solid black;
    background-color: gray;
}