网页css设置鼠标移动有特效
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页css设置鼠标移动有特效相关的知识，希望对你有一定的参考价值。
参考技术A 首先我们创建一个html文件，写出html文件的一些基础代码然后我们在网页中新建一个div，并新建一个
无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，
接下来我们使用下面的代码去除标签的格式，其中：list-style:none; 表示去除标签的格式width:160px; 表示设置标签的宽height:240px;表示设置标签的高background:#666666;表示设置标签的背景色float:left;表示设置标签浮动显示，并且为左浮动margin-right:20px;表示设置标签右外边距
刷新浏览器中html文件查看效果，
这里我们开始添加动画：
给
标签添加：
transition:transform 0.1s;
transform表示变换的属性，0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性
li:hovercursor:pointer;transform:translate(0,-10px);
cursor:pointer;表示鼠标滑过显示为小手形状
transform:translate(0,-10px);translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，
进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：
以上是关于网页css设置鼠标移动有特效的主要内容，如果未能解决你的问题，请参考以下文章