CSS3 Case
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
margin:0;
}
div{
width:150px;
height:150px;
background: #ffb568;
font:30px/202px 'Arial';
color:red;
text-align: center;
margin: 0 auto;
border-radius:50%;
}
.yuan3{
display: none;
/*transition指的是变换，参数有变换时间，延迟时间，变化曲线，宽度高度颜色变化等*/
transition:1s;
}
.yuan2:hover~.yuan3{
display: block;
background: #3fb8ff;
}
.yuan3:hover{
display:block;
}
.yuan5{
/*opacity是不透明度*/
opacity: 0;
width:0;
height: 0;
/*transition写在这里才是.yuan5常有的属性，无论出现还是消失都会有动画的效果*/
transition:1s;
overflow:hidden;/*如果圆圈中的数字超过区域就隐藏*/
}
.yuan4:hover~.yuan5{
/*如果将transition写在这里的话，只有当鼠标悬停在.yuan4上的时候才会有效果，
当鼠标移出.yuan2的区域时，因为不出发hover的条件，所以消失的时候就没有变化效果了，
结果就是瞬间消失*/
opacity: 1;
width:150px;
height: 150px;
background: #43ff0b;
}
.yuan5:hover{
opacity: 1;
width:150px;
height: 150px;
background: #43ff0b;
}
</style>
<body>
<div class="yuan1">1</div>
<div class="yuan2">2</div>
<div class="yuan3">3</div>
<div class="yuan4">4</div>
<div class="yuan5">5</div>
<div class="yuan6">6</div>
</body>
</html>transition
The color change may be provided, width, height, etc. curve;
If you need to change to achieve animation from scratch, the two values must exist an intermediate value, such as 0 and 1; and none will be no intermediate values and block, so this change can not be presented in the form of animation, only achieve a moment of change.
opacity
Set the opacity, 0 indicates transparency, but also the region occupied position.