纯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图片边框border-image的用法
Jun 30 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
May 03 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 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仿ZOL分页类代码
2008/10/02 PHP
php下Memcached入门实例解析
2015/01/05 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
python k-近邻算法实例分享
2014/06/11 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
python如何爬取个性签名
2018/06/19 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
党员先锋岗事迹材料
2014/05/08 职场文书
档案信息化建设方案
2014/05/16 职场文书
快递员岗位职责
2014/09/12 职场文书
信访工作汇报材料
2014/10/27 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
离婚起诉状范本
2015/05/19 职场文书
党员理论学习心得体会
2016/01/21 职场文书
Pandas数据类型之category的用法
2021/06/28 Python