CSS3鼠标滑过放大突出效果

最新推荐文章于 2023-10-25 15:40:54 发布

无公害的小bug

最新推荐文章于 2023-10-25 15:40:54 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css3 文章标签： css3动画 transform

本文链接：https://blog.youkuaiyun.com/weixin_43545329/article/details/84976742

css3 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了使用CSS实现列表项缩放和平移阴影的过渡效果，包括-webkit-transform、-moz-transform和-o-transform属性的应用，以及-webkit-transition-duration和-moz-transition-duration等过渡时长设置。

li{
	    		-webkit-transform:scale(0.9);
	-moz-transform:scale(0.9);
	-o-transform:scale(0.9);
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	    	}

li:hover{
	    		-webkit-transform:scale(1.0);
	-webkit-box-shadow:0px 0px 30px #ccc;
	-moz-transform:scale(1.0);
	-moz-box-shadow:0px 0px 30px #ccc;	
	-o-transform:scale(1.0);
	-o-box-shadow:0px 0px 30px #ccc;

鼠标未划过前
未点击
鼠标悬停在蓝色框上
在这里插入图片描述