做一个从中心向两边水平扩展的动画效果

最新推荐文章于 2021-12-23 15:13:05 发布

侠之大者为国为民

最新推荐文章于 2021-12-23 15:13:05 发布

阅读量6.3k

点赞数 3

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

本文链接：https://blog.csdn.net/sofeien/article/details/54897892

版权

css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

用到了css3的transition属性，其实是从左往右扩展的。因为设置了块居中，产生从中心向左右扩展的感觉

<!doctype html>
<html>
<head>
<style>
	#box{
		background-color:gray;
		height:20px;
		overflow:hidden;
	}
	.a{
		background-color:red;
		width:0;
		height:20px;
		margin: 0 auto;
		transition:width .8s;
		-webkit-transition:width .8s;
	}
	#box:hover .a{
		width:100%;
		transition:width .8s;
		-webkit-transition:width .8s;
	}
</style>
</head>
<body>
<div id="box">
<div class="a"></div>
</div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

侠之大者为国为民

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
做一个从中心向两边水平扩展的动画效果

用到了css3的transition属性，其实是从左往右扩展的。因为设置了块居中，产生从中心向左右扩展的感觉 #box{ background-color:gray; height:20px; overflow:hidden; } .a{ background-color:red; width:0; height:20px; margin: 0
复制链接

扫一扫