纯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的列表toggle特效实例教程
Jan 04 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
May 20 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
Dec 14 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
May 21 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
php cookie 登录验证示例代码
2009/03/16 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python中修改字符串的四种方法
2018/11/02 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python os.access()用法实例
2019/02/18 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python数组循环处理方法
2019/08/26 Python
Python print不能立即打印的解决方式
2020/02/19 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
大学毕业感言
2014/01/10 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2015年科室工作总结
2015/04/10 职场文书
士兵突击观后感
2015/06/16 职场文书
开工典礼致辞
2015/07/29 职场文书
2016教师节问候语
2015/11/10 职场文书