首頁 > 文章 > web前端 > css怎麼實現字型放大特效？（首字符變化代碼實測）

css怎麼實現字型放大特效？（首字符變化代碼實測）

藏色散人原創: 2018-08-09 14:59:036457瀏覽

css在網頁製作中有著在非常重要的作用，一個頁面或頁面中的一篇文章除了內容上的吸引力，如何在樣式上抓住用戶的眼球呢？例如本篇文章就是介紹css字體放大的特效及css首字符放大的效果展示實現。有需要的朋友可以參考下。

css字體放大特效具體程式碼範例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字母放大测试</title>
</head>
<body>
<div class="contain">
    <p>This is the CSS test</p>
    <p>This is the CSS test</p>
    <p>这是一个css测试</p>
</div>
</body>
</html>

style.css程式碼如下：

<style>
    body {
        background-color: #FFFFFF;
        color: #595959;
    }
    .contain {
        width: 150px;
    }
    .contain p {
        font: 80%/1.6 Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    .contain p:first-letter {
        font-size: 2em;
        padding: 0.1em;
        color: #000000;
        vertical-align: middle;
    }
    .contain p:first-line {
        color: red;
    }
    .contain p:first-child:first-letter {
        color: red;
    }
    .contain p:first-child:first-line {
        color: inherit;
    }
</style>

本機程式碼測試結果如下截圖：

css怎麼實現字型放大特效？（首字符變化代碼實測）