Heim > Artikel > Web-Frontend > Verwenden Sie CSS3, um die coole Black Cat Sheriff-Homepage zu realisieren

Verwenden Sie CSS3, um die coole Black Cat Sheriff-Homepage zu realisieren

不言Original: 2018-06-20 13:57:241826Durchsuche

Dieser Artikel führt Sie hauptsächlich in den relevanten Code von CSS3 ein, um die supercoole Black Cat Sheriff-Homepage zu implementieren. Der Effekt ist cool und hat einen gewissen Referenzwert.

Werfen wir einen Blick darauf Schauen Sie sich zuerst die Darstellungen an:

Spezifischer Code:

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

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass dies der Fall ist Seien Sie nützlich für das Lernen aller. Wenn Sie Hilfe benötigen, besuchen Sie bitte die chinesische PHP-Website für weitere verwandte Inhalte!

Verwandte Empfehlungen:

Mehrere Möglichkeiten, vorab geladene Animationseffekte in CSS3 zu erzielen

Über CSS zur Implementierung der Methode für sechseckige Bilder

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um die coole Black Cat Sheriff-Homepage zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css css3

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie CSS, um den automatischen Zeilenumbruch reiner englischer Zahlen zu realisierenNächster Artikel：Verwenden Sie CSS, um den automatischen Zeilenumbruch reiner englischer Zahlen zu realisieren

In Verbindung stehende Artikel

Mehr sehen