css3 动画制作练习之热点地图

最新推荐文章于 2021-04-26 10:20:13 发布

weixin_40551017

最新推荐文章于 2021-04-26 10:20:13 发布

阅读量205

点赞数

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

本文链接：https://blog.csdn.net/weixin_40551017/article/details/104488949

版权

最主要的一点，position: absolute;绝对定位，根据子绝父相，给子元素添加绝对定位后，在不清楚父元素宽高的情况下，使子元素上下左右居中对齐，一定要写成top、left都是50%，且只是这两个条件，然后transform里面的translate()属性，移动x和y到各自的-50，就可以使子元素垂直水平居中且扩散动画呈四周发散。否则动画不是中心点发散的！top:50%;left:5...

摘要由CSDN通过智能技术生成

最主要的一点，
position: absolute;绝对定位，根据子绝父相，给子元素添加绝对定位后，在不清楚父元素宽高的情况下，使子元素上下左右居中对齐，一定要写成top、left都是50%，且只是这两个条件，然后transform里面的translate()属性，移动x和y到各自的-50，就可以使子元素垂直水平居中且扩散动画呈四周发散。否则动画不是中心点发散的！
top:50%;
left:50%;
/transform移动，移动round本身的xy各-50%/
transform:translate(-50%,-50%);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
   
			background-color: black;
		}
		.map  {
   
			/*直接在网上找的背景地图*/
			background:  url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582539140109&di=09a50d5a61d76f7e54dadbcf07364501&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D261267754%2C886272796%26fm%3D214%26gp%3D0.jpg) 0 0 no-repeat;
			height: 634px;
			width: 900px;
			margin:100px auto;
		}
		.city_bj,.city_wh,.city_gz,.city_tb{
   
			/*相对定位relative，子绝父相*/
			position: relative;
			color: yellow;
		}
		.city_bj {
   
			top: 275px

最低0.47元/天解锁文章

weixin_40551017

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 动画制作练习之热点地图

最主要的一点，position: absolute;绝对定位，根据子绝父相，给子元素添加绝对定位后，在不清楚父元素宽高的情况下，使子元素上下左右居中对齐，一定要写成top、left都是50%，且只是这两个条件，然后transform里面的translate()属性，移动x和y到各自的-50，就可以使子元素垂直水平居中且扩散动画呈四周发散。否则动画不是中心点发散的！top:50%;left:5...
复制链接

扫一扫