利用transition过渡实现hover效果出现一个背景样式

趋之

已于 2023-11-02 13:54:53 修改

阅读量292

点赞数 8

分类专栏： css 文章标签： css html 前端

于 2023-11-02 13:54:25 首次发布

本文链接：https://blog.csdn.net/csgojingyu/article/details/134180603

版权

css 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

一、首先构建一个html结构

先引入一个基础样式base.css，再引入一个首页样式index.css。

创建结构li里面用超链接a包裹主体内容，兄弟标签div创建需要移出的背景样式

 <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="hot clearfix">
        <div class="bd wrapper">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./images/1.webp" alt=""></div>
                        <div class="info">
                            <h4>双味千层，手抓饼烤肉组合</h4>
                        </div>
                    </a>
                    <div class="cover" style="text-align: center;">
                        <p><img src="./images/1.png" alt=""></p>
                        <p><img src="./images/2.png" alt="" class="one">口水菌品鉴 | 宅男宅女觅食记<img src="./images/3.png" alt=""
                                class="two"></p>
                        <p><a href="">立即查看</a></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>

二、css样式

base.css就是最基本的清除默认样式代码

/* 基础公共样式：清除默认样式 + 设置通用样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li {
  list-style: none;
}

body {
  font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: red;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.wrapper {
  margin: 0 auto;
  width: 1280px;
}

index.css是首页需要的样式

.hot {
    margin-top: 100px;
}

.bd li {
    float: left;
    margin-right: 20px;
    position: relative;
    height: 160px;
    margin-bottom: 20px;
    overflow: hidden;
}

.bd li:last-of-type {
    margin-right: 0;
}

.hot .bd .pic img {
    width: 400px;
}

.hot .bd .info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 400px;
    text-align: center;
    background-color: rgba(255, 192, 203, .5);
    line-height: 30px;
}

/* 产品底部绿色区域 */
.hot .bd li .cover {
    position: absolute;
    left: 0;
    bottom: -160px;
    padding-top: 20px;
    width: 400px;
    height: 160px;
    background-color: rgba(104, 102, 84, .5);
    text-align: center;
    color: #fff;
    transition: all 0.5s;
}

.hot .bd .cover p {
    margin: auto;
}

.hot .bd .cover p:nth-child(1) {
    font-size: 18px;
}

.hot .bd .cover p:nth-child(2) {
    position: relative;
    width: 260px;
    border-bottom: 1px solid #000;
    line-height: 30px;
    background-color: rgba(255, 255, 255, 0.11);
}

.hot .bd .cover p:nth-child(2) img.one {
    position: absolute;
    top: 0px;
    left: 5px;
}

.hot .bd .cover p:nth-child(2) img.two {
    position: absolute;
    top: 0px;
    right: 5px;
}

.hot .bd .cover p:nth-child(3) {
    font-size: 13px;
    width: 100px;
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #000;
}


/* 鼠标悬停到li，显示cover，改变位置 */
.hot .bd li:hover .cover {
    bottom: 0px;
}

.hot .bd li:hover {
    border: 2px solid #00BE9A;
}

使用transition实现过渡效果，设置时间等属性

趋之

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
利用transition过渡实现hover效果出现一个背景样式

创建结构li里面用超链接a包裹主体内容，兄弟标签div创建需要移出的背景样式。先引入一个基础样式base.css，再引入一个首页样式index.css。使用transition实现过渡效果，设置时间等属性。base.css就是最基本的清除默认样式代码。index.css是首页需要的样式。一、首先构建一个html结构。
复制链接

扫一扫