过渡
作用:可以为一个元素在不同的状态之间切换的时候添加过渡效果
属性名:transition(复合属性)
属性值:过渡的属性 花费时间(s)
提示:
- 过渡的属性可以是具体的CSS属性
- 也可以为all(两个状态属性值不同的所有属性,都产生过渡效果)
- transition设置给元素本身
示例:
<style>
img {
width: 200px;
}
img:hover {
width: 300px;
}
</style>
</head>
<body>
<img src="./images/a.jpg" alt="">
</body>
当鼠标悬停在图片后,图片立刻变大,添加过渡 transition: all 3s在img之后,就会有3秒的动画过渡效果
透明度
作用:设置整个元素的透明度(包括背景和内容)
属性名:opacity
属性值:0-1
- 0:完全透明
- 1:不透明
示例:
img {
width: 200px;
transition: all 3s;
opacity: 0.5;
}
光标类型
作用:鼠标悬停在元素上时指针显示样式
属性名:cursor
属性值:
属性值 | 效果 |
---|---|
default | 默认值,通常是箭头 |
pointer | 小手效果,提示用户可以点击 |
text | 工字型,提示用户可以选择文字 |
move | 十字光标,提示用户可以移动 |