<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百事可乐推荐</title>
<link rel="stylesheet" href="new_file.css">
<!-- 添加网站logo图标 -->
<link rel="icon" href="img/白可乐.png">
</head>
<body>
<div class="card">
<div class="circle">
<h2>PEPSI COLA</h2>
<p>
百事可乐(英文名称Pepsi-Cola)，诞生于19世纪90年代，以碳酸水、糖、香草、生油、胃蛋白酶（pepsin）及可乐果制成，并于1903年6月16日将之注册为商标。后来逐渐发展为美国百事公司推出的一种碳酸饮料，也是美国可口可乐公司的主要竞争对手。2016年6月8日，《2016年BrandZ全球最具价值品牌百强榜》公布，百事可乐排第86名。2017年6月，《2017年BrandZ最具价值全球品牌100强》公布，百事可乐排名第84位。作为潮流文化引领者，百事可乐始终保持着年轻、潮流的姿态，并成为每代年轻人的选择。2019年10月，Interbrand发布的全球品牌百强榜排名24。
</p>
<a href="#">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: 300px;
/* background-color: yellow; */
border-radius: 20px;
position: relative;
}
.circle{
width: 100%;
height: 100%;
background-color: red;
clip-path: circle(120px);
position: relative;
transition: all 0.5s;
border-radius: 20px;
}
.card:hover .circle{
clip-path: circle(400px);
background-color: #0a69bd;
}
img{
height: 300px;
display: block;
position: absolute; /* 子绝父相 */
top: 0px;
left: 50%;
transform: translateX(-50%);
transition: all 0.5s;
}
.card:hover img{
transform: translateX(calc(-50% + 150px)) scale(1.5);
}
.circle h2{
color: white;
position: absolute;
left: 5%;
top: 10%;
opacity: 0;
}
.circle p{
font-size: 14px;
color: white;
position: absolute;
left: 5%;
top: 25%;
width: 250px;
height: 55%;
overflow: auto;
opacity: 0;
}
.circle p::-webkit-scrollbar{
display: none;
}
.circle a{
padding: 10px;
border-radius: 10px;
background-color: white;
color: black;
text-decoration: none;
position: absolute;
left: 5%;
top: 85%;
opacity: 0;
}
.card:hover h2{
opacity: 1;
transition: all 0.5s 1s;
}
.card:hover p{
opacity: 1;
transition: all 0.5s 1.5s;
}
.card:hover a{
opacity: 1;
transition: all 0.5s 2s;
}