CSS的clip实现元素的逐渐显示和消失

前言：只想说一句，CSS的功能太强大了！！！

一. clip属性的用法

clip属性的值指定了元素的剪切区域，目前它的剪切区域只能是矩形的。

语法：clip: rect(top right bottom left)；
单位：为像素为长度值，不允许使用百分比，可以使用负数，表示剪切区域的可以延伸到指定元素的长度之外；
可以使用auto：表示剪切区域与相应边界一致；
JavaScript语法：element.style.clip = “rect(top right bottom left)”;

二. 小例子代码：

<!DOCTYPE html>
<html>
<head>
<style>.container{clip: rect(0px 0px 0px 0px);position: absolute;width: 400px;height:500px;
}.item{width:100%;height:20%;
}.item1{background: red;
}.item2{background: blue;
}.item3{background: yellow;
}.item4{background: green;
}.item5{background: pink;
}</style>
</head>
<body><div class="container"><div class="item item1"></div><div class="item item2"></div><div class="item item3"></div><div class="item item4"></div><div class="item item5"></div>
</div><script type="text/javascript">var height = 0;
var divid = document.querySelector('.container');/*这两个标记为了完成出现和消失的相互转换*/
var addflag = 0;
var subflag = 0; /*逐渐出现*/
function changeAdd(){height = height + 100;divid.style.clip = "rect(0px 400px "+ height+"px 0px)";if (height == 500)addflag = 1;
}
/*逐渐消失*/
function changeSub(){height = height - 100;divid.style.clip = "rect(0px 400px "+ height+"px 0px)";if (height == 0)subflag = 1;
}setInterval(function(){if (addflag == 0){changeAdd();}else if(subflag == 0){changeSub();}else{/*循环显示*/addflag = 0;subflag = 0;}
}, 500);
</script></body>
</html>

三. 效果图

效果图不是很好，应该是每种颜色的高度都是一样的，表达意思就好。如果有好的制图工具，欢迎推荐啊！

CSS的clip实现元素的逐渐显示和消失相关推荐

html中鼠标悬浮显示与隐藏,css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
CSS常用技巧（元素显示隐藏、用户界面样式、垂直对齐、溢出文字省略号显示、精灵技术、滑动门、margin负值之美和css三角之美）
CSS常用技巧 CSS常用技巧(元素显示隐藏.用户界面样式.垂直对齐.溢出文字省略号显示.精灵技术.滑动门.margin负值之美和css三角之美) 1.元素显示隐藏 1.1display 显示(重点) ...
css隐藏状态,CSS元素隐藏和显示
动态的隐藏和显示: // 隐藏元素 document.getElementById("div").style.visibility = "hidden"; // ...
认识CSS中高级技巧之元素的显示与隐藏
前端之HTML,CSS(八) CSS高级技巧元素的显示与隐藏 CSS中有三个属性可以设置元素的显示于隐藏,分别是:display.visibility和overflow. display 隐藏元素: ...
css中clip属性的使用
css的clip属性经常用不到,使用率很低. 简述clip属性 w3c介绍clip属性: 通过元素进行剪切来控制元素的可显示区域,默认情况下,元素是不进行任何剪切的,但是也有可能剪切区域也显示的设置了 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：在元素获取焦点时显示(如：键盘操作的用户)...
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>菜鸟 ...
css让四个div并排显示,css如何让两个div并排显示？
让两个Div并排显示的方法有很多,使用display的inline属性.通过设置float来让Div并排显示都可以实现,下面我们来看一下CSS实现两个div并排显示的方法. 让两个Div并排显示一. ...
CSS复合选择器，元素的显示模式，CSS背景设置
CSS复合选择器,元素的显示模式,CSS背景设置欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页- ...
CSS复合选择器、元素显示模式、背景
[CSS复合选择器.元素显示模式.背景] 一.CSS的复合选择器 1.1 什么是复合选择器在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器和复合选择器,复合选择器是建立在基础选择器之 ...

CSS的clip实现元素的逐渐显示和消失

CSS的clip实现元素的逐渐显示和消失相关推荐

最新文章

热门文章