纯CSS实现的大小渐变、渐远效果


Posted in HTML / CSS onApril 15, 2014

效果图:

纯CSS实现的大小渐变、渐远效果

效果差不多也就是上图的这个样子,基本原理如图所示:

纯CSS实现的大小渐变、渐远效果

将所有的盒子都绝对定位,然后将宽高各50%的递缩小,并且在top、right、bottom和left针对性的偏移即可,代码如下:

复制代码
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS to achieve the visual effect and further away[既是安安]</title>
<link rel="stylesheet" rev="stylesheet" type="text/css" href="http://www.jsann.com/framework/reset.css" />
<style type="text/css">
div
{
background-color:#a40000;
position:absolute;
}
div.main
{
width:100px;
height:100px;
top:50%;
left:50%;
}
div.main div
{
width:50%;
height:50%;
}
div.main div div div div
{
overflow:hidden;/* 为了兼容IE6 */
}
div.main div.left-top,div.main div.left-top div
{
top:-50%;
left:-50%;
}
div.main div.right-top,div.main div.right-top div
{
top:-50%;
right:-50%;
}
div.main div.left-bottom,div.main div.left-bottom div
{
left:-50%;
bottom:-50%;
}
div.main div.right-bottom,div.main div.right-bottom div
{
right:-50%;
bottom:-50%;
}
</style>
</head>
<body>
<div class="main">
<div class="left-top"><div><div><div></div></div></div></div>
<div class="right-top"><div><div><div></div></div></div></div>
<div class="left-bottom"><div><div><div></div></div></div></div>
<div class="right-bottom"><div><div><div></div></div></div></div>
</div>
</body>
</html>

这个方法在IE6下有一个BUG,就是最后的一个盒子的高度不能小于6px,原因就是:
大家都知道IE6下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height: 6px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12px 左右高度的层。另一方面,除了中间的那个盒子,其他的盒子都是在其基础之上偏移而来。也就是说,最多的,我们可以给最后的那个div加上overflow:hidden;(因为我们给任何一个div加上overflow:hidden;之后,它将不在会有子级偏移出来)这样的话最后的那个div的最小高度应该在6px左右(假设IE6给盒子设的默认高度是12px;)那样的话才不至于它的父级需要overflow:hidden;。

HTML / CSS 相关文章推荐
CSS3弹性伸缩布局之box布局
Jul 12 HTML / CSS
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
CSS3制作皮卡丘动画壁纸的示例
Nov 02 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
Html5页面内使用JSON动画的实现
Jan 29 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 #HTML / CSS
css3 条纹化和透明化表格Firefox下测试成功
Apr 15 #HTML / CSS
css3新增颜色表示方式分享
Apr 15 #HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 #HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 #HTML / CSS
css3发光搜索表单分享
Apr 11 #HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 #HTML / CSS
You might like
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
JSONP跨域请求
2017/03/02 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python素数筛选法浅析
2018/03/19 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
python excel和yaml文件的读取封装
2021/01/12 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
公务员更新知识培训实施方案
2014/03/31 职场文书
团日活动总结范文
2014/04/25 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
个人买房协议书范本
2014/10/06 职场文书
python基础之文件处理知识总结
2021/05/23 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers