网页卡片切换效果
昨天做了网页卡片效果与之分享下其实很简单
效果: 鼠标悬停图片放大且价格展示变化成三个功能按钮
代码如下
- <!DOCTYPE html>
- <HTML lang="zh">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <link href="http://cdn.bootCSS.com/font-awesome/4.7.0/css/font-awesome.min.css"
- rel="stylesheet">
- <title>
- 卡片切换特效
- </title>
- <style>
- body { overflow-y: hidden; } .product-grid { display: flex; min-width:
- 960px; } .product-item { position: relative; text-align: center; margin:
- 0 15px; transition: all 0.5s ease 0s; } .product-img { overflow: hidden;
- } .product-item:hover { box-shadow: 0 0 10px rgba(0, 0, 0, .3); } .product-item:hover
- img { transform: scale(1.1) } .product-item:hover .product-content { opacity:
- 0; } img { width: 100%; height: auto; vertical-align: middle; border: 0;
- transition: all 0.5s ease 0s; } .product-content { position: relative;
- padding: 8px 10px; transition: all 0.5s ease 0s; } .product-content h3
- { font-size: 20px; font-weight: 600; margin: 0 0 10px; } .price { font-size:
- 18px; color: #4A8AF4; font-weight: 600; } .price span { font-size: 14px;
- font-weight: normal; color: #999; margin-left: 5px; text-decoration: line-through;
- } ul { background-color: #fff; width: 100%; padding: 0; margin: 0; list-style:
- none; opacity: 0; transform: translateX(-50%); position: absolute; bottom:
- 15px; left: 50%; z-index: 1; transition: all 0.5s linear 0s; } ul li {
- display: inline-block; } .product-item ul li a { text-decoration: none;
- display: block; color: #666; font-size: 16px; text-align: center; margin:
- 0 7px; height: 45px; width: 45px; line-height: 45px; border-radius: 50px;
- border: 1px solid #666; transition: all .5s ease 0s; } .product-item:hover
- ul { opacity: 1; } .product-item ul li a:hover { border: 1px solid transparent;
- color: #FFF; background: #4989F4; width: 60px; }
- </style>
- </head>
- <body>
- <div class="product-grid">
- <div class="product-item">
- <div class="product-img">
- <a href="#">
- <img src="images/img-1.jpg" alt="img-1">
- </a>
- </div>
- <div class="product-content">
- <h3>
- Men's shirt
- </h3>
- <div class="price">
- $11.00
- <span>
- $14.00
- </span>
- </div>
- </div>
- <ul>
- <li>
- <a href="#">
- <i class="fa fa-search">
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <i class="fa fa-shopping-bag">
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <i class="fa fa-shopping-cart">
- </i>
- </a>
- </li>
- </ul>
- </div>
- <div class="product-item">
- <div class="product-img">
- <a href="#">
- <img src="images/img-2.jpg" alt="img-2">
- </a>
- </div>
- <div class="product-content">
- <h3>
- Women's Red Top
- </h3>
- <div class="price">
- $8.00
- <span>
- $12.00
- </span>
- </div>
- </div>
- <ul>
- <li>
- <a href="#">
- <i class="fa fa-search">
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <i class="fa fa-shopping-bag">
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <i class="fa fa-shopping-cart">
- </i>
- </a>
- </li>
- </ul>
- </div>
- <div class="product-item">
- <div class="product-img">
- <a href="#">
- <img src="images/img-3.jpg" alt="img-3">
- </a>
- </div>
- <div class="product-content">
- <h3>
- Women's Shirt
- </h3>
- <div class="price">
- $10.00
- <span>
- $12.00
- </span>
- </div>
- </div>
- <ul>
- <li>
- <a href="#">
- <i class="fa fa-search">
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <i class="fa fa-shopping-bag">
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <i class="fa fa-shopping-cart">
- </i>
- </a>
- </li>
- </ul>
- </div>
- <div class="product-item">
- <div class="product-img">
- <a href="#">
- <img src="images/img-4.jpg" alt="img-4">
- </a>
- </div>
- <div class="product-content">
- <h3>
- Men's Tshirt
- </h3>
- <div class="price">
- $8.00
- <span>
- $11.00
- </span>
- </div>
- </div>
- <ul>
- <li>
- <a href="#">
- <i class="fa fa-search">
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <i class="fa fa-shopping-bag">
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <i class="fa fa-shopping-cart">
- </i>
- </a>
- </li>
- </ul>
- </div>
- </div>
- </body>
- </HTML>
图片素材如下:
来源: http://www.qdfuns.com/article/50158/23030400b6b1e9dabbc6934fd49ecfa2.html