首先推荐一下:W3school(http://www.w3school.com.cn/cssref/index.asp#transition)上面讲解挺详细的,而且可以立即的写代码尝试结果。笔者的也是通过此处进行学习的。
一共4个属性,第一个是下面四个的简写。
笔者自己亲手学习了下,目标是做一个方块,当鼠标悬浮上去的时候,改变大小、背景颜色和字体颜色,且有过渡效果。
之前:
悬浮后:
然后粘贴代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition的过渡效果</title>
<style>
div {
background-color: green;
color: white;
padding: 10px;
width: 40px;
border-radius: 10%;
text-align: center;
/*-webkit-transition: prop time;*/
/*-moz-transition: prop time;*/
/*-ms-transition: prop time;*/
/*-o-transition: prop time;*/
transition: background-color 1s,width 1s;
}
div:hover {
background-color: yellow;
font-weight: bold;
color: green;
width: 800px;
}
</style>
</head>
<body>
<div>点我</div>
</body>
</html>
实现的过程中没有任何问题,but笔者发现了一个bug,就是多次悬浮之后,会有痕迹残留:(右上这一条横杠杠)
笔者用的是chrome,然后换成Safari之后,是这样:(右侧上下都有很多小点点)
???
这个问题,笔者现在无法解决,能解决的朋友欢迎留言。