css鼠標滑過出現文字效果

本文轉載自查看原文 2017-09-23 23:30 6090 html+css

模仿淘寶上鼠標移動到商品圖片時，出現的文字效果。

1、效果圖

鼠標移動到粉紅色的區域，則出現黃色部分。

2、代碼

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/lobal.css"/>
    <style>
    
        .box1{
            /*定義父級的大小，設置高度為圖片高度，便於隱藏文字部分*/
            width: 210px;
            height: 200px;
            background: blue;
            position: relative;/*overflow: hidden;隱藏文字部分*/
            overflow: hidden;/*隱藏超出的部分，就是隱藏蒙版部分*/
        }
        .box1_cont{
            height: 200px;
            height: 200px;
            background: palevioletred;
            color: #fff;
        }
        .mb{
            /*創建一個蒙版*/
            height: 100px;
            width: 210px;
            background:rgba(255,255,0,0.5);
            position: absolute;/*定好蒙版一開始在的位置*/
            bottom:-100px;/*距離box1底部的距離為mb自身的高*/
            left: 0;
            transition: all linear 0.5s;/*設置蒙版的上升動畫效果*/
        }
        .box1:hover .mb{
            bottom: 0;/*將蒙版底部位置上移,與父級box1底部對齊*/
        }
        .box2{
            width: 210px;
            background: peachpuff;
        }
        
    </style>
</head>
<body>
<div class="box1">
    <div class="box1_cont">我是父容器里面的div</div>
    <div class="mb">
        <a href=""><span>呵呵你們在飛灑的開發</span></a>
    </div>
</div>
<div class="box2">
    <span>由於box1設置了overflow，mb沒有占用位置</span>
</div>
</body>
</html>

2017-09-23

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 鼠標滑過出現下拉菜單的js做法鼠標點擊顯示文字效果 CSS實現漂亮的大標題文字效果 css 實現鼠標滑過流光效果 css實現banner背景圖上文字效果+ 分享十個CSS3鼠標滑過文字動畫特效 6種css3鼠標滑過圖片動畫效果 css文字效果（文字剪貼蒙版，text-shodow的應用，文字排版等…） lua滾動文字效果 css3文字效果空心、發光、文字凸起