admin 管理员组

文章数量: 1086866

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

本文标签： CSS相应式卡包

版权声明：本文标题：CSS相应式卡包 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1693564007a229493.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。