您的位置：首页 > Web前端 > CSS

采用 clip 属性和 CSS3-transition 产生动态效果注意问题

2015-01-11 12:10 513 查看

前面的话 >>
clip似乎是一个很少使用的属性，但最近在学习的时候我发现，它竟是一个很有趣的属性。这让才接触CSS不就得我对它越发的感兴趣了。

在学习的过程中，我也遇到了几点麻烦。有任何新的见解欢迎评论~

(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"></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"></span><div><span id="two"></span></div></div></a>

</body>

</html>
源码：

<span style="font-family:Microsoft YaHei;font-size:14px;"><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: 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"></span>
<span id="two"></span>
</div>
</a>
<a href="#"><div id="div2">
<div id="div3"></div>
</div>
</a>
</body>
</html></span>

具体效果请看本人的另外一篇博文底端
↓

http://www.w3cfuns.com/blog-5460184-5403209.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML css css3 clip transition

相关文章推荐

新的分享

章节导航