首页 > 网页制作  > 前端开发

CSS相应式卡包

admin 前端开发 2021-04-26 16:00:45 css   html   html5   css3  
后台-系统设置-扩展变量-手机广告位-内容正文底部

CSS相应式卡包

    • 效果展示(大屏+小屏)
    • 代码实现
      • HTML
      • CSS

点击在线体验
bilibili视频
github地址

效果展示(大屏+小屏)

大屏
在这里插入图片描述
小屏
在这里插入图片描述

代码实现

HTML

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可口可乐</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="cart">
        <div class="circle"></div>
        <img src="./imgs/real-sugar.png" alt="">
        <div class="context">
            <h3>pepsi</h3>
            <p>This article is about the beverage. For its manufacturer, see PepsiCo. For other uses, see Pepsi disambiguation. Pepsi is a carbonated soft drink manufactured by PepsiCo. </p>
            <a href="#">buy now</a>
        </div>
    </div>
</body>

</html>

CSS

* {
    padding: 0;
    margin: 0;
}

body {
    height: 100vh;
    background-color: #131313;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
}

.cart {
    position: relative;
    width: 450px;
    height: 260px;
}

.cart img {
    position: absolute;
    z-index: 1;
    height: 300px;
    left: 50%;
    top: 50%;
    transition-duration: 1s;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cart:hover img {
    left: 74%;
}

.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.circle::after {
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    background-color: red;
    transition-duration: 1s;
    clip-path: circle(35% at 50% 50%);
}

.cart:hover .circle::after {
    clip-path: circle(100% at 50% 50%);
    background-color: #0077B8;
}

.context {
    position: absolute;
    width: 45%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    transition-duration: 1s;
    opacity: 0;
    visibility: hidden;
    padding: 10px 10px 10px 30px;
    text-transform: uppercase;
}

.cart:hover .context {
    left: 27%;
    opacity: 1;
    visibility: visible;
}

.context h3 {
    padding: 10px 0;
}

.context p {
    font-size: .8em;
    line-height: 1.5em;
}

.context a {
    padding: 5px 10px;
    font-size: .8em;
    display: inline-block;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    margin-top: 15px;
    background-color: #fff;
    color: #131313;
}

@media screen and (max-width:990px) {
    .cart {
        max-width: 300px;
    }
    .cart:hover {
        height: 600px;
    }
    .circle::after {
        clip-path: circle(45% at 50% 50%);
    }
    .cart .context {
        width: 60%;
    }
    .cart:hover .context {
        left: 50%;
        padding: 10px 10px 10px 10px;
    }
    .cart:hover img {
        top: 72%;
        left: 50%;
    }
}

文章来源:https://blog.csdn.net/weixin_47529373/article/details/116088870

后台-系统设置-扩展变量-手机广告位-内容正文底部
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:https://jcdi.cn/wyzz/1be5defd7a7dbd4c7a1a0e2b46790e16.html

留言与评论(共有 0 条评论)
   
验证码:
后台-系统设置-扩展变量-手机广告位-评论底部广告位

教程弟

https://www.jcdi.cn/

统计代码 | 京ICP1234567-2号

Powered By 教程弟 教程弟

使用手机软件扫描微信二维码