H5可翻转的卡片效果

最新推荐文章于 2024-04-07 20:48:02 发布
最新推荐文章于 2024-04-07 20:48:02 发布
阅读量783 收藏
点赞数
分类专栏： 前端 HTML5 CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/masterajoe/article/details/110872951
版权
前端 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
HTML5
5 篇文章 0 订阅
订阅专栏
CSS3
3 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .mrajoe-card{
            background: #eff2f8;
            box-shadow: 0 10px 15px rgba(31,45,61,.1), inset 0 0 0 1px hsla(0,0%,100%,.06);
            border-radius: 10px;
            padding: 0 8px 8px;
            perspective: 650px;
            position: relative;
            z-index: 0;
            margin-bottom: 30px;
            margin: 0 auto;
            transition: background .25s;
        }
        .mrajoe-card-label{
            position: relative;
            margin: 5px 0 15px -10px;
            filter: drop-shadow(5px 6px 5px rgba(32,160,255,.3));
            font-size: 0;
        }
        .mrajoe-card-label>h4{
            display: inline-block;
            margin: 0;
            color: #fff;
            background: linear-gradient(90deg, #E2804C, #E28076 6px, #e25a53);
            font-weight: 700;
            font-size: 16px!important;
            line-height: 30px;
            height: 30px;
            padding: 0 22px 0 34px;
            border-top-left-radius: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 1030px;
            vertical-align: bottom;
        }
        .mrajoe-card-label:before{
            content: "";
            display: block;
            position: absolute;
            left: 0;
            bottom: -10px;
            border-left: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 5px solid #e25a53;
            border-top: 5px solid #e25a53;
            transform-origin: bottom;
            transform: scaleY(1);
        }
        .mrajoe-card-label:after{
            content: "";
            display: inline-block;
            border-top: 15px solid #e25a53;
            border-left: 15px solid #e25a53;
            border-left-width: 8px;
            border-right: 8px solid transparent;
            border-bottom: 15px solid transparent;
            vertical-align: bottom;
        }
        .metas {
            position: absolute;
            bottom: 10px;
            left: 15px;
            right: 15px;
            text-align: center;
            font-size: 12px;
            z-index: -1;
            visibility: hidden;
            opacity: 0;
            transform: scale(.8);
            transition: .45s;
            color: #8492a6;
        }
        .read-more {
            margin-top: 8px;
            font-size: 14px;
            display: inline-block;
            padding: 7px 15px;
            min-width: 60%;
            color: #fff;
            border-radius: 100px;
            transition: .25s;
            text-decoration: none;
        }
        .mrajoe-card-url {
            display: block;
            padding-bottom: 89.453125%;
            position: relative;
            overflow: hidden;
            border-radius: 6px;
            transform-origin: top;
            box-shadow: 0 3px 6px rgba(31,45,61,.3);
            transition: transform .35s,background-color .1s ease .25s;
            transform-style: preserve-3d;
        }
        .mrajoe-card-url img {
            position: absolute;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            transition: .35s;
        }
        .mrajoe-card .title {
            font-size: 15px;
            line-height: 1.15em;
            height: 45px;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
        .mrajoe-card .title span {
            margin-top: 5px;
            display: block;
            line-height: 1.3em;
            max-height: 2.8em;
            overflow: hidden;
            color: #657487;
            margin-left: -8px;
            padding: 2px 8px;
            border-left: 2px solid #cad1db;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            transition: .35s;
        }
        .mrajoe-card:hover .mrajoe-card-url{
            transition:transform .5s cubic-bezier(.3,1.5,.5,1)
        }
        .mrajoe-card:hover .mrajoe-card-url{
            transform: translateY(-51px) rotateX(45deg)
        }
        .mrajoe-card:hover .metas{
            transform: scale(1);
            opacity: 1;
            z-index: 1;
            visibility: visible;
        }
    </style>
</head>
<body style="width: 100%;height: 100%;overflow-x: hidden;padding-top: 50px">
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="mrajoe-card">
                <div class="title">
                    <span style="border-left-color: rgb(69,84,192);">那些年做过的Slider</span>
                </div>
                <div class="mrajoe-card-label">
                    <h4>热门</h4>
                </div>
                <a class="mrajoe-card-url" href="javascript:void(0)">
                    <img alt="" src="http://www.tianshaojiao.com/wp-content/uploads/2020/11/html5.jpg">
                </a>
                <div class="metas">
                    <div class="metas-info">
                        <time class="time">2020-08-24</time>
                    </div>
                    <a class="read-more" href="javascript:void(0)" style="background-image: linear-gradient(90deg, rgb(93, 125, 60), rgb(133, 163, 78));
             box-shadow: rgba(105, 153, 56, 0.4) 0 7px 7px;">ReadMore</a>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="mrajoe-card">
                <div class="title">
                    <span style="border-left-color: rgb(69,84,192);">那些年做过的Slider</span>
                </div>
                <div class="mrajoe-card-label">
                    <h4>热门</h4>
                </div>
                <a class="mrajoe-card-url" href="javascript:void(0)">
                    <img alt="" src="http://www.tianshaojiao.com/wp-content/uploads/2020/12/php.jpg">
                </a>
                <div class="metas">
                    <div class="metas-info">
                        <time class="time">2020-08-24</time>
                    </div>
                    <a class="read-more" href="javascript:void(0)" style="background-image: linear-gradient(90deg, rgb(93, 125, 60), rgb(133, 163, 78));
             box-shadow: rgba(105, 153, 56, 0.4) 0 7px 7px;">ReadMore</a>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="mrajoe-card">
                <div class="title">
                    <span style="border-left-color: rgb(69,84,192);">那些年做过的Slider</span>
                </div>
                <div class="mrajoe-card-label">
                    <h4>热门</h4>
                </div>
                <a class="mrajoe-card-url" href="javascript:void(0)">
                    <img alt="" src="http://www.tianshaojiao.com/wp-content/uploads/2020/11/java.jpg">
                </a>
                <div class="metas">
                    <div class="metas-info">
                        <time class="time">2020-08-24</time>
                    </div>
                    <a class="read-more" href="javascript:void(0)" style="background-image: linear-gradient(90deg, rgb(93, 125, 60), rgb(133, 163, 78));
             box-shadow: rgba(105, 153, 56, 0.4) 0 7px 7px;">ReadMore</a>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="mrajoe-card">
                <div class="title">
                    <span style="border-left-color: rgb(69,84,192);">那些年做过的Slider</span>
                </div>
                <div class="mrajoe-card-label">
                    <h4>热门</h4>
                </div>
                <a class="mrajoe-card-url" href="javascript:void(0)">
                    <img alt="" src="http://www.tianshaojiao.com/wp-content/uploads/2020/02/kubernetes.jpg">
                </a>
                <div class="metas">
                    <div class="metas-info">
                        <time class="time">2020-08-24</time>
                    </div>
                    <a class="read-more" href="javascript:void(0)" style="background-image: linear-gradient(90deg, rgb(93, 125, 60), rgb(133, 163, 78));
             box-shadow: rgba(105, 153, 56, 0.4) 0 7px 7px;">ReadMore</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

效果展示：
在这里插入图片描述
鼠标放上去的效果：
在这里插入图片描述
在这里插入图片描述

CoreCmd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 css3仿谷歌卡片翻转动画特效
09-13
html5 css3仿谷歌卡片翻转动画特效
【每日一练】96—Bootstrap实现一个响应式卡片效果
web前端开发
11-12 325
作者 | 杨小爱写在前面今天这个练习是使用Bootstrap实现的一个卡片效果，关于这个卡片式的效果，我们在前面也分享过，主要是用纯CSS实现。当然，用什么方式实现自己想要的效果，主要是根据自己当前开发项目的需求来，同一个效果，实现的方式有多种，选择合适的就可以了，因此，我们在练习时，需要多尝试不同的实现方式，这样可以为实际开发项目时，找到合适的方式。现在，我们就来看一下今天这个练习的最终效果：看...
html卡片左右切换,HTML5 很酷的系统设置卡片（可扩展、可翻转）
weixin_36018748的博客
06-07 803
CSS语言：CSSSCSS确定html {box-sizing: border-box;font-size: 10px;}*,*:before,*:after {box-sizing: inherit;position: relative;tap-highlight-color: transparent;}html,body {height: 100%;}body {color: #3b3b3b;...
h5卡片翻转特效
feifeiwuxian的专栏
12-22 885
卡片翻转特效，在card 后面加上card-flipped即可 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <st
html5左右滑动页面效果实现
anai20010816的博客
05-04 2566
The Demo of h5 slider achiev by Myself 主要思路： 　　设置一个容器container，然后里面有几个page，获取到屏幕的宽度并将其赋值给page，然后container设置宽度为page.length*width; 　　这时所有的page将会一字排开，将body设置overflow:hidden; width:100%;这样的就只能显示一个...
H5刮刮卡效果
weixin_45675581的博客
09-30 617
效果图： 核心就是使用ctx.globalCompositeOperation = ‘destination-out’; 全部代码： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .ggk{ width:200px; ...
H5+CSS3社交媒体头像卡片特效
06-24
4. **动画（Animations）**：CSS3的`@keyframes`规则可以创建复杂的动画效果，例如卡片翻转、旋转等动态效果。 5. **变形（Transforms）**：`transform`属性可以对元素进行旋转、缩放、移动等操作，用于实现头像...
CSS3 SVG图文卡片内容翻转切换特效
07-02
这是一款简单又创意个性的CSS3 SVG图文卡片内容翻转切换特效，左右箭头按钮控制切换。 文章来自 陌佑网 ym.tenpic.cn 转载请保留本链接，谢谢!
3d翻转动画
09-22
在IT领域，3D翻转动画是一种常见的视觉效果，它为用户界面和应用程序带来生动而引人入胜的交互体验。3D翻转动画通常应用于网页设计、移动应用、游戏开发等多个场景，使得内容的展示更加立体且动态。在本讨论中，我们...
H5移动端新年快乐祝福
11-05
这些功能使开发者能够创建平滑的动画效果，如卡片翻转、淡入淡出等。在“新年快乐”贺卡中，可能有各种CSS3动画，比如按钮点击时的色彩变换，或者背景图片的滑动切换，为用户营造出节日的氛围。 再者，JavaScript...
CSS3实现漂亮的卡片翻转效果
04-08
纯CSS3实现的漂亮卡片翻转效果，包含完整的图片资源，解压即可在浏览器使用，简单方便，兼容性好！2020.06.22更新降低下载积分需求，我个人原意是免费下载的，奈何网站规则不允许！
CSS3 方向感知卡片翻转动画特效
04-05
使用CSS3 制作的 方向感知卡片翻转动画特效。。。。。
html5 卡牌翻转效果,cocos2d-x 翻转卡牌 效果 动画 flip card effect
weixin_30802367的博客
06-03 202
//*** .hclass FakeRotateY : public cocos2d::RotateTo{public:/* creates the action/static FakeRotateY* create(float duration,float startAngle,float dstAngle,float depth);/* creates the action with defa...
H5页面，上下滑动翻页（整页翻书切换效果）
羽筠的博客
09-07 2400
页面间的切换：整页翻书的切换效果。
HTML5+CSS3小实例：3D旋转卡片
小王的技术库
05-29 1045
HTML5+CSS3实现3D旋转卡片，开发工具：VS Code。 先看效果： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-82YkNLBC-1653803901135)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c53c2c237c74057a4190617668f404a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)] 源代码： <div clas
HTML5+CSS3小实例：3D卡片hover翻转效果
艾恩小灰灰的博客
11-30 351
实例：3D卡片hover翻转效果。技术栈：HTML+CSS。
卡片的翻转效果--纯html+css实现
XXCJLRC的博客
04-02 756
（比比一句）：在做的时候，也有遇到一个问题，就是img图片再反转动画结束后会先空白，然后又闪一下，再次展示，我也不知道为啥，然后再使用一个div包裹以后，将class转移到div上边去，在给定img的宽高，就不会出现这种情况了，我也解释不了为啥，因为我是菜狗。话不多比，到此结束，如果有哪位大佬能教一下我，为啥会出现上面那种情况，我给你磕一个！话不多比，先上效果，符合要求就看，不符合要求就换！既然符合，那么话不多比，直接上代码。
H5 点击图片翻转效果
最新发布
路过人间
04-07 332
鼠标点击后原图消失/隐藏，在原来的位置上取而代之的是翻转后的图....
模仿探探的左右滑动切换卡片功能
热门推荐
ShallCheek
06-23 3万+
有一阵耍探探看着效果图还可以，然后又在网上看到了一个动态切换的开源库Swipecards便拿来修改成探探滑动界面导入
移动端h5毛玻璃卡片
09-17
移动端H5毛玻璃卡片是一种常见的UI设计效果，在移动端APP的页面中常用于突出展示某个特定内容。毛玻璃卡片通过模糊处理和半透明效果，给用户一种模糊和扩散的效果，增加页面的层次感和视觉冲击力。 实现移动端H5毛玻璃卡片效果需要以下几个步骤： 1. 创建一个主容器div，设置其宽高和背景图片。 2. 在主容器内添加一个卡片容器div，设置其宽高和背景图片，同时设置模糊和透明度。 3. 编写CSS样式，给主容器设置position: relative属性，保证子元素的定位相对于主容器进行。 4. 使用CSS3的z-index属性将卡片容器放在主容器的上方，覆盖住主容器部分内容。 5. 使用transform属性给卡片容器添加动画效果，可以添加旋转、缩放等效果，使卡片动态展示。 除了以上步骤，还可以通过其他一些技巧增强毛玻璃卡片效果，例如给卡片容器添加阴影效果、调整模糊和透明度的数值、搭配其他过渡效果等。 总之，移动端H5毛玻璃卡片通过模糊和透明效果，给用户带来独特的视觉体验。在实现过程中，需要结合CSS样式和动画效果来达到最佳效果。这种效果可以用于各种移动应用中，如图片展示、产品介绍等，提升用户对页面的吸引力和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值