CSS3を使ってかっこいい黒猫保安官ホームページを実現しよう-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3を使ってかっこいい黒猫保安官ホームページを実現しよう

不言

Jun 20, 2018 pm 01:57 PM

css3表紙

この記事では、超クールな Black Cat Sheriff ホームページを実装するための 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="/static/imghwm/default1.png"  data-src="images/cat1.png"  class="lazy"   / alt="CSS3を使ってかっこいい黒猫保安官ホームページを実現しよう" ></a></p>
</p>
</body>
</html>

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 でプリロードアニメーション効果を実現するいくつかの方法

CSS で六角形の画像を実装する方法について

以上がCSS3を使ってかっこいい黒猫保安官ホームページを実現しようの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。