css 實現文字提示說明、文字繞圖效果

本文轉載自查看原文 2019-03-31 01:23 578 css/ html

鼠標放在某個文字上時，展示文字的解釋說明

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display屬性</title>
    <style type="text/css">
        .con h3{
            font-size:25px;
            color:red;
        }

        .box{
            width:200px;
            height:50px;
            background-color:gold;
            line-height:50px;
            text-indent:10px;

            display:none;  /* 隱藏不顯示 */
        }

        .con:hover .box{
            display:block;  /* 懸浮時顯示 */
        }
    </style>
</head>
<body>
    <div class="con">
        <h3>鼠標懸浮，試試看會出現什么</h3>
        <div class="box">很遺憾，什么也沒有出現</div>
    </div>
</body>
</html>

文字繞圖：

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動文字繞圖</title>
    <style type="text/css">
        .con{
            width:450px;
            height:210px;
            border:1px solid #000;
            margin:50px auto 0;
        }

        .pic{
            width:100px;
            height:100px;
            background-color:gold;
            float:left;
            margin:10px;
        }

        .text{
            /*background-color:green;*/
            height:130px;
            color:#666;
        }

    </style>
</head>
<body>
    <div class="con">
        <div class="pic"><img src="images/頭像2.png" alt="頭像" /></div>
        <div class="text">植樹造林不僅可以綠化和美化家園，
            同時還可以起到擴大山林資源、防止水土流失，世界
            首枚植樹節郵票 、保護農田、調節氣候、促進經濟發
            展等作用，是一項利於當代、造福子孫的宏偉工程。
            為了保護林業資源，美化環境，保持生態平衡。植樹
            造林不僅可以綠化和美化家園，同時還可以起到擴大山
            林資源、防止水土流失，世界首枚植樹節郵票 、保護
            農田、調節氣候等。
        </div>
    </div>
</body>
</html>

頁面效果：

免責聲明！

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

猜您在找 CSS實現文字陰影的效果 CSS3實現文字浮雕效果，鏤刻效果，火焰文字【css】純css實現文字循環滾動效果純css實現文字循環滾動效果純css3實現文字間歇滾動效果 CSS3實現文字掃光效果純css實現文字跳動的動畫效果純css實現文字循環滾動效果 CSS實現漂亮的大標題文字效果 css圖片上懸浮文字（絲帶效果）實現