纯div+css实现翻书loading

最新推荐文章于 2024-05-11 09:11:41 发布

专业前端小白

最新推荐文章于 2024-05-11 09:11:41 发布

阅读量480

点赞数

分类专栏： css3 3D效果文章标签： css3 loading 动画翻书

本文链接：https://blog.csdn.net/qq_41756580/article/details/108389663

版权

css3 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

3D效果

2 篇文章 0 订阅

订阅专栏

效果图：

话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css3实现翻书效果</title>
    <link href="reset.css" rel="stylesheet" type="text/css">
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .perspective {
            margin-top: 100px;
            perspective: 800px;
            transform-style: preserve-3d;
        }
        .book-wrap {
            width: 100px;
            height: 60px;
            position: relative;
            margin: 0 auto;
            transform: rotateX(30deg);
            transform-style: preserve-3d;
        }
        .page {
            position: absolute;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 5px solid #bc3442;
            background-color: #bc3442;
            border-radius: 4%;
        }
        .book-cover-first{
            left: 0;
            width: 50%;
            height: 100%;
        }
        .book-cover-first .left-content{
            width: calc(100% + 5px);
            height: 100%;
            box-shadow: 0px 5px #FFCC99;
            position: absolute;
            top: -5px;
            left: 0px;
            border-radius: 4%;
            background-color: #FFF6D9;
        }
        .book-cover-first .left-content .page-item{
            width: 100%;
            height: 100%;
            background-color: #FFF6D9;
            border-radius: 4%;
            padding: 5px;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .book-cover-end{
            right: 0;
            width: 50%;
            height: 100%;
        }
        .book-cover-end .right-content{
            width: calc(100% + 5px);
            height: 100%;
            box-shadow: 0px 5px #FFCC99;
            position: absolute;
            top: -5px;
            right: 0px;
            border-radius: 4%;
            background-color: #FFF6D9;
        }
        .book-cover-end .right-content .page-item{
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: #FFF6D9;
            animation: roll 2s ease 0s infinite;
            transform-origin: left;
            border-radius: 4%;
            border: 1px solid #FFCC99;
            padding: 5px;
        }
        .book-cover-end .right-content .page-cover{
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-color: #FFF6D9;
            border-radius: 4%;
            border: 1px solid #FFCC99;
            padding: 5px;
        }
        .page-line{
            height: 4px;
            border-radius: 2px;
            margin-bottom: 4px;
            background-color: #FFCC99;
        }

        @keyframes roll {
            from {transform: rotateY(0)}
            to {transform: rotateY(-180deg)}
        }
    </style>
</head>
<body>

<div class="perspective">
    <div class="book-wrap">
        <div class="page book-cover-first">
            <div class="left-content">
                <div class="page-item">
                    <div class="page-line" style="width: 100%;"></div>
                    <div class="page-line" style="width: 30%;"></div>
                    <div class="page-line" style="width: 70%;"></div>
                    <div class="page-line" style="width: 50%;"></div>
                    <div class="page-line" style="width: 10%;"></div>
                </div>
            </div>
        </div>
        <div class="page book-cover-end">
            <div class="right-content">
                <div class="page-item">
                    <div class="page-line" style="width: 100%;"></div>
                    <div class="page-line" style="width: 30%;"></div>
                    <div class="page-line" style="width: 70%;"></div>
                    <div class="page-line" style="width: 50%;"></div>
                    <div class="page-line" style="width: 10%;"></div>
                </div>
                <div class="page-cover">
                    <div class="page-line" style="width: 100%;"></div>
                    <div class="page-line" style="width: 30%;"></div>
                    <div class="page-line" style="width: 70%;"></div>
                    <div class="page-line" style="width: 50%;"></div>
                    <div class="page-line" style="width: 10%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

专业前端小白

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
纯div+css实现翻书loading

效果图：话不多说，直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯css3实现翻书效果</title> <link href="reset.css" rel="stylesheet" type="text/css"> <style> *{
复制链接

扫一扫