视频号上的案例效果源码:

HTML代码:
<!doctype html><html><head><title>【视频号】03-CSS实现创意产品卡片效果</title><link rel=”stylesheet” type=”text/css” href=”style.css”></head><body><div class=”container”><div class=”card”><div class=”imgBx”><img src=”shoes.png”></div><div class=”contentBx”><h2>Nike Shoes</h2><div class=”size”><h3>Size :</h3><span>7</span><span>8</span><span>9</span><span>10</span></div><div class=”color”><h3>Color :</h3><span></span><span></span><span></span></div><a href=”https://www.webqdkf.com” target=”_blank”>Buy Now</a></div></div></div></body></html>
CSS代码:
*{margin: 0;padding: 0;font-family: ‘Poppins’, sans-serif;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #131313;overflow: hidden;}.container{position: relative;}.container .card{position: relative;width: 320px;height: 450px;background: #232323;border-radius: 20px;overflow: hidden;}.container .card:before{content: ”;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #9bdc28;clip-path: circle(150px at 80% 20%);transition: 0.5s ease-in-out;}.container .card:hover:before{clip-path: circle(300px at 80% -20%);}.container .card:after{content: ‘Nike’;position: absolute;top: 30%;left: -20%;font-size: 12em;color: rgba(255,255,255,0.02);font-weight: 800;font-style: italic;z-index: 1;}.container .card .imgBx{position: absolute;top: 50%;transform: translateY(-50%);z-index: 1000;width: 100%;height: 220px;transition: 0.5s;}.container .card:hover .imgBx{top: 0;transform: translateY(0);}.container .card .imgBx img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) rotate(-25deg);width: 270px;}.container .card .contentBx{position: absolute;bottom: 0;width: 100%;height: 100px;text-align: center;transition: 1s;z-index: 10;}.container .card:hover .contentBx{height: 210px;}.container .card .contentBx h2{position: relative;font-weight: 600;letter-spacing: 1px;color: #fff;}.container .card .contentBx .size,.container .card .contentBx .color{display: flex;justify-content: center;align-items: center;padding: 8px 20px;opacity: 0;visibility: hidden;transition: 0.5s;}.container .card:hover .contentBx .size{opacity: 1;visibility: visible;transition-delay: 0.5s;}.container .card:hover .contentBx .color{opacity: 1;visibility: visible;transition-delay: 0.6s;}.container .card .contentBx .size h3,.container .card .contentBx .color h3{color: #fff;font-weight: 300;font-size: 14px;text-transform: uppercase;letter-spacing: 2px;margin-right: 10px;}.container .card .contentBx .size span{width: 26px;height: 26px;text-align: center;line-height: 24px;font-size: 14px;display: inline-block;color: #111;background: #fff;border-radius: 4px;margin: 0 5px;transition: 0.5s;cursor: pointer;}.container .card .contentBx .size span:hover{color: #111;background: #9bdc28;}.container .card .contentBx .color span{width: 20px;height: 20px;background: #f00;border-radius: 50%;margin: 0 5px;cursor: pointer;}.container .card .contentBx .color span:nth-child(2){background: #9bdc28;}.container .card .contentBx .color span:nth-child(3){background: #03a9f4;}.container .card .contentBx .color span:nth-child(4){background: #e91e63;}.container .card .contentBx a{display: inline-block;padding: 10px 30px;background: #fff;border-radius: 4px;margin-top: 10px;text-decoration: none;font-weight: 600;color: #111;opacity: 0;transform: translateY(50px);transition: 0.5s;}.container .card:hover .contentBx a{opacity: 1;transform: translateY(0px);transition-delay: 0.75s;}
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...