CSS3综合实例二（旧样式，仿天猫商品过渡效果）

最新推荐文章于 2024-03-06 09:55:02 发布

mufengs16

最新推荐文章于 2024-03-06 09:55:02 发布

阅读量208

点赞数

分类专栏： CSS3.0 文章标签： css3

本文链接：https://blog.csdn.net/qq_44087363/article/details/109730892

版权

该博客介绍了如何使用CSS3来创建一个仿天猫商品的过渡效果，包括鼠标移入时底环凸显、图片透明度变化以及商品主图放大等细节。

摘要由CSDN通过智能技术生成

旧样式，仿天猫商品过渡效果

实例需求

商品被包裹在圆形的底环下，为此要制作一个底环
当鼠标移入商品栏时，边距凸显红色
当鼠标移入商品栏时，图片变得透明几许
当鼠标移入商品栏时，商品主图过渡比例扩大，突出底环

实例详情

<!DOCTYPE html>
<html>
  <head>
    <title>旧样式，仿天猫商品过渡效果</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0"/>
    <link rel="stylesheet" href="./pattern.css"/>
  </head>
  <body>
    <div class="goods">
      <ul>