网页css设置鼠标移动有特效

html-css022

网页css设置鼠标移动有特效,第1张

首先我们创建一个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:hover{cursor:pointertransform:translate(0,-10px)}

cursor:pointer表示鼠标滑过显示为小手形状

transform:translate(0,-10px)translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，

进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：

您好！您要的效果应该是以下示例，供参考：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS让元素缓慢移动</title>

<style>

#div1 {

    -webkit-transition: margin-left .8s

    -moz-transition: margin-left .8s

    -o-transition: margin-left .8s

}

#div1:hover {

    margin-left: 10px

}

</style>

</head>

<body>

<div id='div1'>>>> 鼠标移入此行会缓慢向右路移动 >>> </div><br>

注：支持Chrome/Safari/Firefox/Opera/Edge浏览器, 不支持IE。

</body>

</html>

文本虚拟化效果可以通过css的text-shadow来实现。

text-shadow语法:

text-shadow

：

none

|

none

|

[

,

]

*

或none

|

[,

]*

也就是：

text-shadow:[颜色(Color)

x轴(X

Offset)

y轴(Y

Offset)

模糊半径(Blur)],[颜色(color)

x轴(X

Offset)

y轴(Y

Offset)

模糊半径(Blur)]...

或者

text-shadow:[x轴(X

Offset)

y轴(Y

Offset)

模糊半径(Blur)

颜色(Color)],[x轴(X

Offset)

y轴(Y

Offset)

模糊半径(Blur)

颜色(Color)].

例子：

.demo

{background:

#666666width:

440pxpadding:

30px

font:

bold

55px/100%

"微软雅黑",

"Lucida

Grande",

"Lucida

Sans",

Helvetica,

Arial,

Sanscolor:

#ffftext-transform:

uppercase}