CSS相應式卡包-有解無憂

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://www.uj5u.com/qianduan/280372.html

標籤：其他

上一篇：JavaScript學習手冊十六：瀏覽器物件模型

下一篇：溫故而知新之CSS篇-盒子水平垂直居中的方法