Utilisez CSS3 pour créer la superbe page d'accueil de Black Cat Sheriff-tutoriel CSS-php.cn

Utilisez CSS3 pour créer la superbe page d'accueil de Black Cat Sheriff

不言

Libérer： 2018-06-20 13:57:24

original

1872 Les gens l'ont consulté

Cet article vous présente principalement le code CSS3 pertinent pour implémenter la page d'accueil super cool de Black Cat Sheriff. L'effet est cool et a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Jetons un coup d'œil. aux rendus en premier :

Code spécifique :

<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>

Copier après la connexion

Ce qui précède est tout le contenu de cet article, j'espère cela sera utile à tout le monde. Apprendre est utile. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Plusieurs façons d'obtenir des effets d'animation de préchargement en CSS3

À propos du CSS pour implémenter la méthode des images hexagonales

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!