首页
所有分类
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的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
实现CSS3中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
HTML5新增的Css选择器、伪类介绍
Aug 07 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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
调频(4) 短波(8) 保养(1) 电台频率(32) 中波(3) 收音机(62) 立体声(1) 长波(3) Harman Kardon(1) KDKA(1)
You might like
PHP输出时间差函数代码
2013/01/28 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
Yii2 queue的队列使用详解
2019/07/19 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
Javascript实现商品秒杀倒计时（时间与服务器时间同步）
2015/09/16 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python如何通过protobuf实现rpc
2016/03/06 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
迪斯尼商品官方网站：ShopDisney
2016/08/01 全球购物
采购内勤岗位职责
2013/12/10 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
八年级英语教学计划
2015/01/23 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
世界十大儿童漫画书排名，法国国宝漫画排第五，第二是轰动日本连环
2022/03/18 欧美动漫
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby