clip+transition实现过渡效果

最新推荐文章于 2022-12-18 09:45:17 发布

转载最新推荐文章于 2022-12-18 09:45:17 发布 · 549 阅读

本文探讨了CSS中关于clip属性的应用技巧，包括如何解决鼠标hover部分被clip后的问题、如何更高效地利用选择器来实现样式变化，以及如何在同一选择器内处理多个属性。

(1)先是发现当鼠标hover的部分被clip处理后，竟然不能继续clip下去——html模型的构建，像这样：
起初——直接对两个盒子进行clip导致被clip后鼠标无法对消失的部分hover

<div id="div1">
<div id="div2"></div>
</div>

改进——用一个不会被变化的div包裹住两个span标签，只对span进行clip

<a>
<div id="div1">
<span id="one">http://www.0771ybyy.com/news/1803.html</span>
<span id="two"></span>
</div>
</a>

(2)后来以为只能对鼠标hover的内容进行属性处理——没有掌握selector的使用，像这样：
起初

#div1:hover{property:value;}

改进——可以在父元素hover后面选择子元素设置样式

#div1:hover #two{property:value;}

(3)最后发现，可以在一个选择器内对同一元素的多个属性进行处理，像这样：
改进——之前我一次只用一个属性过度的，这个不管，直接跳到CSS3学习这个了（我怎么这么不安分！快滚回去学CSS先-_-#）

#div2{property:value;transition:All 1s ease-in-out;}
#div1:hover #two{property:value;property:value;property:value;}
<html>
<body>
<a><div id="div1"><span id="one">http://www.0771ybyy.com/news/1802.html</span><div><span id="two"></span></div></div></a>
</body>
</html>

在这里可以看到左边和右边这两个过渡是不一样的（显然左边那个就没这么酷了）

<html>
<head>
<style type="text/css">
#div2{
width:150px;
height:150px;
border-radius:75px;
background-color:orange;
position:absolute;
top:200px;
left:440px;
clip:rect(0px,150px,150px,0px);
transition:All 1s ;
-o-transition:All 1s;
-webkit-transition:All 1s;
-moz-transition:All 1s;
}
#div3{
width:136px;
height:136px;
border-radius:68px;
position:absolute;
top:7px;
left:7px;
background-color:white;
}
#div2:hover{
clip:rect(75px,150px,75px,0px)
}
/***************************************/
#div1{
width: 150px;
height: 150px;
border-radius: 75px;
position: absolute;
top: 200px;
left:730px;
}
#one{
display: block;
width:> http://www.0771ybyy.com/news/1801.html<150px;
height: 150px;
border-radius: 75px;
background-color: orange;
position: absolute;
clip:rect(0px,150px,150px,0px)

}
#two{
display: block;
width: 136px;
height: 136px;
border-radius: 68px;
background-color: white;
position: absolute;
top: 7px;
left: 7px;
}
#div1:hover #one{
clip:rect(75px,150px,75px,0px)
}
#one{

transition:All 1s ;
-o-transition:All 1s;
-webkit-transition:All 1s;
-moz-transition:All 1s;
}
</style>
</head>
<body>
<a href="#"><div id="div1">
<span id="one">http://www.0771ybyy.com/news/1800.html</span>
<span id="two"></span>
</div>
</a>
<a href="#"><div id="div2">
<div id="div3"></div>
</div>
</a>
</body>
</html>