【前端基础】1 - 10 过渡属性

§1-10 过渡属性

目录

1-10.1 元素过渡

默认情况下，当条件满足时，元素在不同样式之间的转换是瞬间完成的。这样的显示在一些情景中可能会很突兀。使用元素过渡，可以让元素在不同样式之间切换时更为平滑自然。该属性由 transition 控制。

/* 应用到一个属性 */
transition: property_name duration;
transition: property_name duration delay;
transition: property_name duration timing_function;
transition: property_name duration timing_function delay;

/* 控制所有属性 */
transition: all duration;
transition: all duration delay;
transition: all duration timing_function;
transition: all duration timing_function delay;

该属性应当施加到某个具体的元素上。

1-10.2 示例

示例一：鼠标悬停时，图片缩放至原始尺寸的 110%。

缩放可以使用 transform: scale() 实现。

<img src="../../resources/images/bliss.png" alt="XP Wallpaper">

body {
    background-color: #fff;
}

img {
    display: block;
    
    margin: 10px auto;
    transition: all 0.5s;
}

img:hover {
    transform: scale(110%);
}

示例二：仿造华为主页的新闻栏目，实现鼠标悬停图片放大与施加背景。

<div class="news">
    <a href="#" target="_self">
        <img src="../../resources/images/huawei.jpg" alt="6G">
        <div class="mask"></div>

        <div class="heading">
            <p class="category">前沿探索</p>
            <h4 class="title">憧憬6G，共同定义6G</h4>
            <p class="intro">《6G无线通信新征程》序言</p>
        </div>
    </a>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #fff;
}

a {
    text-decoration-line: none;
    color: black;
}

.news {
    margin: 15px auto;
    width: 446px;
    height: 315px;

    overflow: hidden;
    transition: all 0.5s;
}

.news:hover img {
    transform: scale(110%);
}

.news a {
    position: relative;

    display: inline-block;
    width: inherit;
    height: inherit;
}

.news img {
    width: inherit;
    height: inherit;
    transition: all 0.5s;
}

.news .mask {
    position: absolute;
    top: 0;
    width: inherit;
    height: inherit;
    background-color: transparent;
    transition: all 0.5s;
}

.news:hover .mask {
    background-color: rgba(0, 0, 0, 50%);
}

.heading {
    position: absolute;
    bottom: 0;

    padding: 20px;

    color: white;
}

.category {
    font-size: 0.91em;
    line-height: 1.8em;
}

.title {
    font-size: 1.2em;
    line-height: 1.4em;
}

.intro {
    font-size: 0.875em;
    line-height: 1.8em;
    opacity: 0.7;
}

1-10.3 不透明度和光标类型

元素不透明度由属性 opacity 控制，接受 0~1 之间的实数。0 表示完全透明，1 表示不透明，0 到 1 之间的小数为半透明。该属性会设置整个元素（含背景和内容）的不透明度。

光标类型由属性 cursur 控制，用于控制鼠标悬停在元素上时的指针显示样式，接受关键字。

值 说明
default 默认指针，通常为箭头
pointer 悬浮于链接上时，通常为手
progress 程序后台繁忙，用户可交互
wait 程序繁忙，用户不可交互
text 文字可被选中
not-allowed 不能执行
posted @ 2024-03-09 20:42  Zebt  阅读(1)  评论(0)  编辑  收藏  举报