使用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邮箱登陆入口在哪里

7695

Java教程

1640

CakePHP 教程

1393

Laravel 教程

1287

PHP教程

1229

显示更多

Related knowledge

纯CSS3怎么实现波浪效果？（代码示例） Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！

如何设置谷歌浏览器首页 Mar 02, 2024 pm 04:04 PM

如何设置谷歌浏览器首页？谷歌浏览器是如今最受欢迎的一款网络浏览器软件，这款浏览器拥有简洁高效的特性，神兽用户喜欢，在使用浏览器的时候，不同的人有不同的设置喜好，有人喜欢将谷歌浏览器设置成默认首页，也有人喜欢将首页设置成其他搜索引擎，那么具体要在哪里设置呢。接下来小编就给大家带来快速设置谷歌浏览器首页方法，希望能够给大家带来帮助。快速设置谷歌浏览器首页方法1、打开谷歌浏览器(如图所示)。2、点击界面右上角的菜单键(如图所示)。3、选择“设置”选项(如图所示)。4、在设置菜单中，找到“搜索引擎”(如