首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3实现超酷的黑猫警长首页

Posted in HTML / CSS onApril 26, 2016

先看看效果图：

CSS3实现超酷的黑猫警长首页

具体代码：

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>text-shadow</title>  
  5. <style type="text/css">  
  6. body {/*清除页边距，设计主色调*/   
  7.     padding: 0px;   
  8.     margin: 0px;   
  9.     color: #666;   
  10. }   
  11. #text-shadow-box {/*设计盒子外框样式*/   
  12.     position: relative;/*让内部的定位元素以这个框为参照物*/   
  13.     width: 598px;   
  14.     height: 406px;   
  15.     background: #666;   
  16.     overflow: hidden;/*禁止内容超过设定的区域*/   
  17.     border: #333 1px solid;   
  18. }   
  19. #text-shadow-box div.wall {/*设置背景墙样式*/   
  20.     position: absolute;   
  21.     width: 100%;   
  22.     top: 175px;   
  23.     left: 0px   
  24. }   
  25. #text {/*设计导航文本样式*/   
  26.     text-align: center;   
  27.     line-height: 0.5em;   
  28.     margin: 0px;   
  29.     font-family: helvetica, arial, sans-serif;   
  30.     height: 1px;   
  31.     color: #999;   
  32.     font-size: 80px;   
  33.     font-weight: bold;   
  34.     text-shadow: 5px -5px 16px #000;/*设计右上偏移的阴影，适当进行模糊处理，产生色晕效果，阴影色为深色，营造静谧的效果*/   
  35. }   
  36. div.wall div {/*设计前面挡风板样式*/   
  37.     position: absolute;   
  38.     width: 100%;   
  39.     height: 300px;   
  40.     top: 42px;   
  41.     left: 0px;   
  42.     background: #999;   
  43. }   
  44. #spotlight {/*设计覆盖在上面的探照灯效果图*/   
  45.     position: absolute;/*设计一个层，让其覆盖在页面上，并使其满窗口显示，通过前期设计好的一个探照灯背景来营造神秘效果*/   
  46.     width: 100%;   
  47.     height: 100%;   
  48.     top: 0px;   
  49.     left: 0px;   
  50.     background: url(images/spotlight.png) center -300px;   
  51. }   
  52. #spotlight a {   
  53.     color:#ccc;   
  54.     text-decoration:none;   
  55.     position:absolute;   
  56.     left:47%;   
  57.     top:56%;   
  58.     float:left;   
  59. }   
  60. a img { border:none; }   
  61. </style>  
  62. </head>  
  63.   
  64. <body>  
  65. <!--本案例的结构外套-->  
  66. <div id="text-shadow-box">  
  67.     <!--墙体外结构-->  
  68.     <div class="wall">  
  69.         <p id="text">黑猫警长</p>  
  70.         <div></div>  
  71.     </div>  
  72.      <!--外罩，通过他可以为页面覆盖一层桌纸，添加特殊的艺术效果-->  
  73.     <div id="spotlight"><a href="index.htm"><img src="images/cat1.png" /></a></div>  
  74. </div>  
  75. </body>  
  76. </html>  

以上就是本文的全部内容，希望对大家的学习有所帮助。

CSS3实现超酷的黑猫警长首页

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 HTML / CSS
video结合canvas实现视频在线截图功能
Jun 25 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5图片预览实例分享
Jun 04 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 #HTML / CSS
什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条
Apr 26 #HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 #HTML / CSS
CSS3不透明度实例讲解
Apr 26 #HTML / CSS
CSS3弹性盒模型开发笔记（二）
Apr 26 #HTML / CSS
CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义
Apr 26 #HTML / CSS
纯CSS3代码实现文字描边
Apr 25 #HTML / CSS
发报机(1) SW(1) 调幅(1) LW(1) 电磁辐射(1) GWEN(1) SWL(1) 电台(1) 电路图(1) FM(4)
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP简洁函数小结
2011/08/12 PHP
php安全开发 添加随机字符串验证，防止伪造跨站请求
2013/02/14 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
PHP PDOStatement::columnCount讲解
2019/01/30 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
php实现银联商务公众号+服务窗支付的示例代码
2019/10/12 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
Javascript----文件操作
2007/01/18 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
JS组件系列之JS组件封装过程详解
2017/04/28 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
python之wxPython应用实例
2014/09/28 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
廉价连衣裙和婚纱礼服在线销售：Tbdress
2019/02/28 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ？
2014/07/21 面试题
药品业务员岗位职责
2014/04/17 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
中学教师教学工作总结
2015/08/13 职场文书