需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html。
2、在index.html中的<style>标签中,输入css代码:button {background-color: #00a7d0}
button:hover {background-color: #ff7701}。
3、浏览器运行index.html页面,此时显示出了蓝色背景颜色的按钮。
4、将鼠标移入按钮,此时按钮的背景颜色变成了橙色。
首先我们创建一个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表示移动,第一个参数为水平移动值,第二个参数为垂直移动值,
进入浏览器直接查看效果,如下图实现了鼠标滑过块,块上移的动画特效,如下图:
1、打开hbuilder,在空白的html文件上面设置一个div,给div一个class并命名为img:
2、在css里设置img的类一定的宽和高,引入示例图片,设置图片为不重复。并且给img的类设置“:hover”伪类,设置伪类内的透明度为0.6:
3、打开浏览器,在浏览器内查看效果:
4、将鼠标移入图片,就会发现图片已经变亮了。以上就是用CSS设置鼠标经过图片变亮,移开变变暗效果的演示: