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

最新推荐文章于 2025-07-01 21:10:56 发布

塞上江南果

最新推荐文章于 2025-07-01 21:10:56 发布

阅读量7k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS JavaScript 文章标签： css javascript

本文链接：https://blog.youkuaiyun.com/Picking_up_stones/article/details/61615429

JavaScript 同时被 2 个专栏收录

27 篇文章

订阅专栏

CSS

16 篇文章

订阅专栏

本文介绍了CSS中clip属性的使用方法，包括其语法、单位及JavaScript设置方式，并通过一个实例展示了如何利用clip属性实现元素的渐显渐隐效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：只想说一句，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>