CSS相应式卡包

CSS相应式卡包

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

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

效果展示(大屏+小屏)

大屏

小屏

代码实现

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>pepsih3>
            <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 nowa>
        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%;
    }
}

你可能感兴趣的:(网页特效,css,html,html5,css3)