CSS鼠标滑过div上移效果

最新推荐文章于 2022-09-24 20:39:15 发布

洪洪呀

最新推荐文章于 2022-09-24 20:39:15 发布

阅读量8.4k

点赞数 8

分类专栏： css3

本文链接：https://blog.csdn.net/H_hongai/article/details/108492116

版权

css3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS鼠标滑过div上移效果

css鼠标滑过div向上移动效果主要用到c3的transform属性该属性允许我们对元素进行旋转缩放倾斜或移动

1.效果展示

在这里插入图片描述

2.html代码

<body>
	<div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>

3.css代码

<style>
	body{ background-color: rgba(0,0,0,.5); }
	
	li{
		list-style: none;
		width: 160px;
		height: 240px;
		background-color: white;
		float:left;
		margin-left:40px;
		border-radius: 10px;
	}
	
	li:hover{
		cursor:pointer;
		/* transform属性 */
		transform:translate(0,-20px)
		/* 第一个参数指定X轴的位移量,必填, 第二个参数指定Y轴的位移量,不必填 默认0*/
	}
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

洪洪呀

关注关注

8
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
CSS鼠标滑过div上移效果

CSS鼠标滑过div上移效果css鼠标滑过div向上移动效果主要用到c3的transform属性该属性允许我们对元素进行旋转缩放倾斜或移动1.效果展示2.html代码<body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li&gt
复制链接

扫一扫