溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS3如何實(shí)現(xiàn)超酷的黑貓警長首頁

發(fā)布時(shí)間：2021-08-27 10:22:06 來源：億速云 閱讀：108 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)CSS3如何實(shí)現(xiàn)超酷的黑貓警長首頁，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

先看看效果圖：

CSS3如何實(shí)現(xiàn)超酷的黑貓警長首頁

具體代碼：

<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>text-shadow</title>  
<style type="text/css">  
body {/*清除頁邊距，設(shè)計(jì)主色調(diào)*/   
    padding: 0px;   
    margin: 0px;   
    color: #666;   
}   
#text-shadow-box {/*設(shè)計(jì)盒子外框樣式*/   
    position: relative;/*讓內(nèi)部的定位元素以這個(gè)框?yàn)閰⒄瘴?/   
    width: 598px;   
    height: 406px;   
    background: #666;   
    overflow: hidden;/*禁止內(nèi)容超過設(shè)定的區(qū)域*/   
    border: #333 1px solid;   
}   
#text-shadow-box div.wall {/*設(shè)置背景墻樣式*/   
    position: absolute;   
    width: 100%;   
    top: 175px;   
    left: 0px   
}   
#text {/*設(shè)計(jì)導(dǎo)航文本樣式*/   
    text-align: center;   
    line-height: 0.5em;   
    margin: 0px;   
    font-family: helvetica, arial, sans-serif;   
    height: 1px;   
    color: #999;   
    font-size: 80px;   
    font-weight: bold;   
    text-shadow: 5px -5px 16px #000;/*設(shè)計(jì)右上偏移的陰影，適當(dāng)進(jìn)行模糊處理，產(chǎn)生色暈效果，陰影色為深色，營造靜謐的效果*/   
}   
div.wall div {/*設(shè)計(jì)前面擋風(fēng)板樣式*/   
    position: absolute;   
    width: 100%;   
    height: 300px;   
    top: 42px;   
    left: 0px;   
    background: #999;   
}   
#spotlight {/*設(shè)計(jì)覆蓋在上面的探照燈效果圖*/   
    position: absolute;/*設(shè)計(jì)一個(gè)層，讓其覆蓋在頁面上，并使其滿窗口顯示，通過前期設(shè)計(jì)好的一個(gè)探照燈背景來營造神秘效果*/   
    width: 100%;   
    height: 100%;   
    top: 0px;   
    left: 0px;   
    background: url(images/spotlight.png) center -300px;   
}   
#spotlight a {   
    color:#ccc;   
    text-decoration:none;   
    position:absolute;   
    left:47%;   
    top:56%;   
    float:left;   
}   
a img { border:none; }   
</style>  
</head>  
  
<body>  
<!--本案例的結(jié)構(gòu)外套-->  
<div id="text-shadow-box">  
    <!--墻體外結(jié)構(gòu)-->  
    <div class="wall">  
        <p id="text">黑貓警長</p>  
        <div></div>  
    </div>  
     <!--外罩，通過他可以為頁面覆蓋一層桌紙，添加特殊的藝術(shù)效果-->  
    <div id="spotlight"><a href="index.htm"><img src="images/cat1.png" /></a></div>  
</div>  
</body>  
</html>

關(guān)于“CSS3如何實(shí)現(xiàn)超酷的黑貓警長首頁”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手