纯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结构性伪类选择器九种写法
Apr 18 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
CSS3实现的炫酷菜单代码分享
Mar 12 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
sass 常用备忘案例详解
Sep 15 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中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
JavaScript生成简单等差数列
2017/11/28 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
编写strcpy函数
2014/06/24 面试题
数控专业毕业生自荐信范文
2014/03/04 职场文书
个人考核材料
2014/05/15 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
springboot + mongodb 通过经纬度坐标匹配平面区域的方法
2021/11/01 MongoDB
MySQL笔记 —SQL运算符
2022/01/18 MySQL