使用CSS3實現超酷的黑貓警長首頁-css教學-PHP中文網

首頁

web前端

css教學

使用CSS3實現超酷的黑貓警長首頁

不言

Jun 20, 2018 pm 01:57 PM

css3 首頁

這篇文章主要為大家介紹了CSS3實現超酷的黑貓警長首頁的相關代碼，效果酷炫，具有一定的參考價值，感興趣的小伙伴們可以參考一下

#先看看效果圖：

具體程式碼：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-shadow</title>
<style type="text/css">
body {/*清除页边距，设计主色调*/   
    padding: 0px;   
    margin: 0px;   
    color: #666;   
}   
#text-shadow-box {/*设计盒子外框样式*/   
    position: relative;/*让内部的定位元素以这个框为参照物*/   
    width: 598px;   
    height: 406px;   
    background: #666;   
    overflow: hidden;/*禁止内容超过设定的区域*/   
    border: #333 1px solid;   
}   
#text-shadow-box p.wall {/*设置背景墙样式*/   
    position: absolute;   
    width: 100%;   
    top: 175px;   
    left: 0px   
}   
#text {/*设计导航文本样式*/   
    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;/*设计右上偏移的阴影，适当进行模糊处理，产生色晕效果，阴影色为深色，营造静谧的效果*/   
}   
p.wall p {/*设计前面挡风板样式*/   
    position: absolute;   
    width: 100%;   
    height: 300px;   
    top: 42px;   
    left: 0px;   
    background: #999;   
}   
#spotlight {/*设计覆盖在上面的探照灯效果图*/   
    position: absolute;/*设计一个层，让其覆盖在页面上，并使其满窗口显示，通过前期设计好的一个探照灯背景来营造神秘效果*/   
    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>
<!--本案例的结构外套-->
<p id="text-shadow-box">
    <!--墙体外结构-->
    <p class="wall">
        <p id="text">黑猫警长</p>
        <p></p>
    </p>
     <!--外罩，通过他可以为页面覆盖一层桌纸，添加特殊的艺术效果-->
    <p id="spotlight"><a href="index.htm"><img src="images/cat1.png" /></a></p>
</p>
</body>
</html>

登入後複製

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7720

Java教學

1641

CakePHP 教程

1396

Laravel 教程

1289

PHP教程

1233

Related knowledge

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

如何設定谷歌瀏覽器首頁 Mar 02, 2024 pm 04:04 PM

如何設定谷歌瀏覽器首頁？谷歌瀏覽器是如今最受歡迎的網頁瀏覽器軟體，這款瀏覽器擁有簡潔高效的特性，神獸用戶喜歡，在使用瀏覽器的時候，不同的人有不同的設定喜好，有人喜歡將Google瀏覽器設定成預設首頁，也有人喜歡將首頁設定成其他搜尋引擎，那麼具體要在哪裡設定呢。接下來小編就帶給大家快速設定Google瀏覽器首頁方法，希望能帶給大家幫助。快速設定Google瀏覽器首頁方法1、開啟Google瀏覽器(如圖)。 2.點選介面右上角的選單鍵(如圖)。 3、選擇「設定」選項(如圖)。 4、在設定選單中，找到「搜尋引擎」(如