CSS3翻书效果

这里用css3实现翻书效果 注意下文html 没有给li标签闭合 是为了处理inline-block元素间隙问题，因浏览器会自动闭合，偷个懒，不建议这么做。

CSS3呼吸灯效果

翻书效果

关键代码：

<ul>
    <li>
    <li class="anim">
    <li class="anim2">
</ul>

ul {
        background: gray;
        width: 100%;
        padding: 20px;
				text-align: center;
        -webkit-perspective: 200;
    }
    
    li {
        list-style: none;
        height: 50px;
        width: 100px;
        padding: 0;
        margin: 0;
        display: inline-block;
        background: white;
        border-radius: 2px;
    }

    .anim {
        animation: anim 1s infinite;
        width: 100px;
        margin-left: -100px;
        background: white
    }

    @keyframes anim {
        to {
            transform: rotateY(-360deg);
        }
    }

    .anim2 {
        animation: anim2 1s infinite;
        width: 100px;
        margin-left: -100px;
        background: white
    }

    @keyframes anim2 {
        25% {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(-360deg);
        }
    }