百事可乐 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>百事可乐</title>
        <link rel="stylesheet" href="new_file.css">
        <link rel="icon" href="img/白可乐.png">
    </head>
    <body>
        
        <div class="card">
            <div class="circle">
                <h2>PEPSI COLA</h2>
                <p>
                    1893年，在美国北卡罗莱纳州伯恩市，年轻的药剂师科尔贝•布莱德汉姆（Caleb Bradham）试验时发现了一种新口味，深受苏打柜台顾客的喜爱。他由此意外发明了一种由可乐果、香草和珍贵精油混合而成的碳酸饮料，取名为“布莱德（Brad）饮料”。1898年8月28日，科尔贝将其易名为“百事可乐” (Pepsi-Cola) ，这种饮料能够发挥类似胃蛋白酶的功能，有助于消化。1902年，科尔贝创建了百事可乐公司。起初，科尔贝自己将浆液混合配制，通过苏打柜台出售。后来他意识到一个巨大的商机的存在——将百事可乐灌装起来，这样各地的人们就都可以享用到。
                </p>
                <a href="https://item.jd.com/1642481.html">Buy Now</a>
            </div>
            <img src="img/蓝可乐.png" >
        </div>
        
        <div class="card">
            <div class="circle">
                <h2>PEPSI COLA</h2>
                <p>
                    1893年，在美国北卡罗莱纳州伯恩市，年轻的药剂师科尔贝•布莱德汉姆（Caleb Bradham）试验时发现了一种新口味，深受苏打柜台顾客的喜爱。他由此意外发明了一种由可乐果、香草和珍贵精油混合而成的碳酸饮料，取名为“布莱德（Brad）饮料”。1898年8月28日，科尔贝将其易名为“百事可乐” (Pepsi-Cola) ，这种饮料能够发挥类似胃蛋白酶的功能，有助于消化。1902年，科尔贝创建了百事可乐公司。起初，科尔贝自己将浆液混合配制，通过苏打柜台出售。后来他意识到一个巨大的商机的存在——将百事可乐灌装起来，这样各地的人们就都可以享用到。
                </p>
                <a href="https://item.jd.com/1642481.html">Buy Now</a>
            </div>
            <img src="img/黑可乐.png" >
        </div>
        
    </body>
</html>


*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card{
    width: 600px;
    height: 350px;
    /* background-color: yellow; */
    position: relative;
}
.card img{
    height: 300px;
    position: absolute;/* 子绝父相 */
    top: 25px;
    left: 50%; 
    transform: translateX(-50%);
    transition: all 0.5s;
}
.card:hover img{
    transform: translateX(50px) scale(1.5);
}
.card .circle{
    width: 100%;
    height: 100%;
    background-color: red;
    border-radius: 20px;
    clip-path: circle(120px);
    transition: all 0.5s;
    position: relative;
}
.card:nth-of-type(1):hover .circle{
    clip-path: circle(350px);
    background-color: #0a69bd;
}
.card:nth-of-type(2):hover .circle{
    clip-path: circle(350px);
    background-color: #222;
}

.card .circle h2{
    color: white;
    position: absolute;
    left: 30px;
    top: 30px;
    opacity: 0;
}
.card .circle p{
    color: white;
    position: absolute;
    left: 30px;
    top: 80px;
    width: 250px;
    height: 200px;
    overflow: auto;
    opacity: 0;
}
.card .circle p::-webkit-scrollbar{
    display: none;
}
.card .circle a{
    position: absolute;
    left: 30px;
    top: 300px;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    color: black;
    font-weight: bold;
    text-decoration: none;
    opacity: 0;
}
.card:hover .circle h2{
    opacity: 1;
    transition: all 0.5s 0.25s;
}
.card:hover .circle p{
    opacity: 1;
    transition: all 0.5s 0.5s;
}
.card:hover .circle a{
    opacity: 1;
    transition: all 0.5s 0.75s;
}
posted @ 2023-01-04 18:20  不尽人意的K  阅读(43)  评论(0)  编辑  收藏  举报