css实现折叠卡片效果

最新推荐文章于 2024-06-12 21:13:52 发布

乘风破浪PL

最新推荐文章于 2024-06-12 21:13:52 发布

阅读量1.4k

点赞数 2

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/qq_44699174/article/details/106403055

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文字和视频什么的可以自己改变
HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/折叠卡片.css">
</head>
<body>
    <div class="card">
        <!-- 封面 -->
        <div class="card-outside">
            <div class="card-outside-container">
                <!-- 正面 -->
                <div class="card-front">
                    <div class="card-front-top">
                        <img src="images/1.jpg" alt="">
                    </div>
                    <div class="card-front-bot">我最帅</div>
                </div>
                <!-- 反面 -->
                <div class="card-back">
                    <video class="video-container" autoplay muted loop>
                        <!-- //自动播放 静音  循环播放 -->
                        <source src="video/1.mp4">
                    </video>
                </div>
            </div>
        </div>
        <!-- 封底 -->
        <div class="card-inside">
            <div class="card-inside-container">
                <h3>for urban lovers</h3>
                <p>for urban loversfor urban loversfor urban lovers</p>
                <a href="#" class="btn">view deals</a>

            </div>
        </div>
    </div>
</body>
</html>

css：

* {
    margin: 0;
    padding: 0;
  }
  
  a {
    text-decoration: none;
  }
  
  html, body {
    width: 100%;
    height: 100%;
  }
  
  body {
    background: linear-gradient(to bottom right, #eee8dd, #e3d9c6);
  }
  .card{
    width: 300px;
    height: 300px;
    background-color: #e3d9c6;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    transition: all 1s ease;
  }
  .card-outside,.card-inside{
    position: absolute;
    right: 0;
    width: 300px;
    height: 300px;
  
  }
  .card-outside{
    z-index:100;
    perspective: 1000px;
  }
  .card-outside-container{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform-origin: left;
    transition: all 1s ease;
  }
  .card:hover .card-outside-container{
    transform: rotateY(-180deg);
  }
  .card:hover{
    width: 600px;
  }
  .card-front,.card-back{
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    background-color: #e3d9c6;
  }
  .card-front-top{
    width: 100%;
    height: 240px;
    background: linear-gradient(to bottom,#ff73b9,#ff40a1);
    clip-path: polygon(0 0,100% 0,100% 90%,57% 90%,50% 100%,43% 90%,0 90%);
  }
  .card-front-top img{
    width: 100%;
    height: 100%;
  }
  .card-front-bot{
    font-size:26px;
    color:#ff40a1;
    font-weight: 800;
    text-align: center;
  }
  .card-back{
    transform: rotateY(180deg);
  }
  .video-container{
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(0 0,100% 0,90% 50%,100% 100%,0 100%);
  }
  .card-inside{
    z-index: 99;
  }
  .card-inside-container{
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size:24px;
    color:#ff40a1;
    font-weight: 800;
    padding:20px;
    box-sizing: border-box;
  }
  .card-inside-container p{
    color:#333;
    font-size:20px;
  }
  .card-inside-container .btn{
    width: 90%;
    height: 50px;
    line-height: 50px;
    border:3px solid #ff40a1;
    color:#ff40a1;
    border-radius: 5px;
  }

乘风破浪PL

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
css实现折叠卡片效果

文字和视频什么的可以自己改变HTML：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="styl.
复制链接

扫一扫