css3实现翻书页效果

╰+哭是因爲堅強的太久メ 2023-02-27 15:59 17阅读 0赞

效果图：  
![在这里插入图片描述][20200718182333704.gif]

源代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { 
                float: left;
                overflow: hidden;
                height: 200px;
                width: 150px;
                margin-right: 30px;
                border: 1px solid #ccc;
                cursor: pointer;
            }
            
            div::before { 
                content: " ";
                display: block;
                width: 100%;
                height: 100%;
                background-color: #00a4ff;
                transform-origin: left bottom;
                transform: rotate(180deg);
                transition: all ease .5s;
            }
            
            div:hover::before { 
                transform: rotate(0deg);
            }
        </style>
    </head>
    
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    
    </body>
    
    </html>

[20200718182333704.gif]: /images/20230209/ab518739bbd14a8d862b0c3fbada4c18.png

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android书页翻页设计：android-flip

Android书页翻页设计：android-flip 在一些常见的电子书或者内容阅读类的Android项目中，会实现一种效果：比如，用户在屏幕左翻右翻时候，电子书就像

痛定思痛。/ 2024年02月17日 17:12/ 0 赞/ 4 阅读

相关 css3实现翻书页效果

效果图： ![在这里插入图片描述][20200718182333704.gif] 源代码： <!DOCTYPE html> <html lang="en"> <

╰+哭是因爲堅強的太久メ/ 2023年02月27日 15:59/ 0 赞/ 18 阅读

相关 CSS 知识碎片[二] CSS3 3d 特效翻页 & 立方体效果

> 业精于勤荒于嬉今天今天今天，读完了本月的第三本书，书中自有黄金屋一点都没错了。开始一件事情最好的时机是十年前，其次是现在。今天来写一个css3 的3d 特效。

左手的ㄟ右手/ 2022年12月27日 08:41/ 0 赞/ 207 阅读

相关翻页效果实现，小程序，H5，翻书效果

本代码是实现小程序的左右滑动，点击翻书的效果，改改在H5也可以用。效果图： ![20201110143733943.gif][] 实现代码： <image c

布满荆棘的人生/ 2022年12月20日 03:19/ 0 赞/ 302 阅读

相关 css3实现毛玻璃效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRk

一时失言乱红尘/ 2022年10月16日 06:05/ 0 赞/ 182 阅读

相关 html翻牌动画效果,js+css3翻牌动画效果

这是一款js+css3翻牌动画效果，界面设计感不错的，喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器。 ![e962dcabf12d07a50339717d086dd58c

冷不防/ 2022年10月06日 04:48/ 0 赞/ 206 阅读

相关纯CSS实现3D翻牌效果

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果。简易效果请大家狠戳这里[在线体验][Link 1]，或[下载收藏][Link 2]。改进效果请

待我称王封你为后i/ 2022年08月25日 08:36/ 0 赞/ 385 阅读

相关 CSS3实现三角形效果

原文：[Magic of CSS border property][] 译文：不可思议的CSS border属性译者：dwqs 在CSS中，其border属性有很多的规

Bertha 。/ 2022年06月12日 22:38/ 0 赞/ 302 阅读

相关纯css实现翻书效果

前言最近研究了一下css3的3D效果，写了几个demo，写篇博客总结一下实现的经过。PS:如果对transform-origin/perspective/transfo

一时失言乱红尘/ 2021年09月29日 16:58/ 0 赞/ 483 阅读

相关 CSS3实现移动效果

CSS3实现移动效果任务描述相关知识 transform属性 transition属性代码文件任务描

﹏ヽ暗。殇╰゛Y/ 2021年05月16日 20:37/ 0 赞/ 598 阅读