hover后执行过渡效果

最新推荐文章于 2023-11-02 13:54:25 发布

VIP文章 Byte_Dance

最新推荐文章于 2023-11-02 13:54:25 发布

阅读量2.8k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/byte_dance/article/details/84981027

版权

hover后执行过渡效果

元素标签上添加过渡的标准 :

.course-item{
    position: relative;
    top:0;
    transition:box-shadow,top  0.5s;
}

hover 后要改变的内容

.course-item:hover{
    box-shadow:0 2px 15px -2px #8b8b8b;
    top: -5px;
}

这个和使用动画去做不同的是,动画执行一次后,hover离开元素,动画就会立刻停止,给人感官上很突兀,所以不建议用动画去做,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <style>
        body{
            background: #e7e7e7;
        }
        .container{
            padding:10px;
        }
        .row {
            margin:0;
            margin-top:20px;
        }
        .col-md-9{
            padding:0;
        }
        .col-sm-4{
            padding: 0 12px 15px 12px;
        }
        .course-item{
            position: relative;
            top:0;
            transition:box-shadow,top  0.5s;
        }
        .course-item:hover{
            box-shadow:0 2px 15px -2px #8b8b8b;
            top: -5px;
        }
        .course-info{
            background: #fff;
            padding:16px;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3  visible-lg visible-md">
            <img class="img-responsive"
                 src="http://www.itlike.com/files/system/block_picture_1539651730.png?version=8.3.5" alt="">
        </div>
        <div class="col-md-9">
            <div class="col-sm-4">
                <div class="course-item">
                    <span class="tags"><span class="tag-serialing"></span></span>
                    <a href="">
                        <img src="http://www.itlike.com/files/course/2018/10-14/11390594215b545619.png" alt="撩课大前端—Vue项目实战—撩多多商城"
                             class="img-responsive">
                    </a>
                    <div class="course-info">
                        <div class="course-title">
                            <a title="撩课大前端—Vue项目实战—撩多多商城" class="text-overflow"
                                                     href="">撩课大前端—Vue项目实战—撩</a>
                        </div>
                        <div class="course-number clearfix">
                            <span class="course-price-widget">
                                    <span class="price">168元</span>
                            </span>
                            <span class="course-student pull-right">已有82人在学</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="course-item">
                    <span class="tags">

最低0.47元/天解锁文章

Byte_Dance

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
7
评论
hover后执行过渡效果

hover后执行过渡效果元素标签上添加过渡的标准 : .course-item{ position: relative; top:0; transition:box-shadow,top 0.5s;}hover 后要改变的内容.course-item:hover{ box-shadow:0 2px 15px -2px #8b8b8b; ...
复制链接

扫一扫