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>  

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

HTML / CSS 相关文章推荐
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 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
You might like
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
2017/06/16 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
和孩子一起学习python之变量命名规则
2018/05/27 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
医院学雷锋活动策划方案
2014/02/15 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
植树节标语
2014/06/27 职场文书
班级心理活动总结
2014/07/04 职场文书
公司授权委托书范文
2014/08/02 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
西安导游词
2015/02/12 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
党性修养心得体会2016
2016/01/21 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python
MySQL中order by的使用详情
2021/11/17 MySQL
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫