CSS特效四：四個方向的淡入效果（B站常用效果）-有解無憂

今天來說下一個很拉風同時也很實用的css效果，B站同款哦！
下面是在小破站截取的效果圖：
請添加圖片描述

請添加圖片描述

這個效果稱為淡入淡出效果，可以從上下左右淡入淡出，今天直講一種，其余三種自己可以動手做，效果圖：
請添加圖片描述

請添加圖片描述

實作思路：

設定一個div包含一個img圖片和一個子div，
子div包含一個文本div，
設定圖片上的文字隱藏且居中，overflow為hidden，
在子div設定一個hover效果即可
最后加上一些影片效果修飾即可

最后附上代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>從下至上</title>
    <style>
        body {
            text-align: center;
        }
        
        .container {
            position: relative;
            width: 17%;
            margin: auto;
        }
        
        .image {
            display: block;
            width: 100%;
            height: auto;
        }
        
        .overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #008CBA;
            /* 隱藏文本 */
            overflow: hidden;
            width: 100%;
            height: 0;
            /* 設定一個淡入淡出的效果 */
            transition: .5s ease;
        }
        
        .container:hover .overlay {
            height: 100%;
        }
        
        .text {
            /* 設定文本不換行 */
            white-space: nowrap;
            color: white;
            font-size: 20px;
            position: absolute;
            overflow: hidden;
            /* 設定文字居中 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <h2>淡入效果 - 從下至上</h2>
    <p>滑鼠移動到圖片上查看效果</p>

    <div class="container">
        <img src="img/1.jpg" alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">Hello World</div>
        </div>
    </div>
</body>

</html>

剩余三個方向的淡入淡出效果的代碼可以私聊我哦！
加油，共勉！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/229215.html

標籤：其他

上一篇：Vue的生命周期的理解

下一篇：ES6 Promise原始碼決議（從Promise功能的角度看Promise原始碼實作）