ul和li实现翻书动画效果

HTML与CSS实现翻书动画

最新推荐文章于 2021-08-04 07:25:51 发布

原创最新推荐文章于 2021-08-04 07:25:51 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #翻书效果 #css

Web前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用HTML的ul和li元素结合CSS的perspective和rotateY属性，创建逼真的翻书动画效果。通过避免li元素间的间距并巧妙运用CSS动画，实现了翻页的视觉体验。

来看看HTML部分：

由于li是inline-block元素，所有没有写li的闭合，写了的话每个li之间会有4px的间距，不写浏览器也会自动补全。

CSS部分

    body {
        text-align: center;
    }
    
    ul {
        background: gray;
        width: 100%;
        padding: 20px;
        -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);
        }
    }