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

最新推荐文章于 2024-05-02 20:30:37 发布

Five-Sheep

最新推荐文章于 2024-05-02 20:30:37 发布

阅读量619

点赞数

分类专栏： HTML CSS3 文章标签： HTML css css3 clip transition

本文链接：https://blog.csdn.net/MysticFiveSheep/article/details/42610041

版权

HTML 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS3

2 篇文章 0 订阅

订阅专栏

前面的话 >>
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

Five-Sheep

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
采用 clip 属性和 CSS3-transition 产生动态效果注意问题

越来越觉得CSS是个了不起的工具，这让我想起了中学老师让我们折腾Flash时候的情景。clip似乎是一个使用率极低的属性，但不得不说在某些时候还是挺简单凑效的。在学习的时候我遇上了一些麻烦（主要是被clip的部分放上鼠标来悬浮的时候已经相当于消失、不再凑效了），这导致transition不能完美的运行起来。所以，我们要在被clip的对象外加个盒子，就像这样。
复制链接

扫一扫