头像旋转
语法:
(1) transition-property：检索或设置对象中的参与过渡的属性 -> 一般都用all
(2) transition-duration：检索或设置对象过渡的持续时间 -> 过渡的时间，自己定
(3) transition-timing-function：检索或设置对象中过渡的动画类型 -> 默认是ease
(4) transition-delay：检索或设置对象延迟过渡的时间 -> 默认是0秒
动画过渡类型
简单案例
<style>
div {
width: 200px;
height: 100px;
border: 1px solid red;
border-radius: 15px;
/*transition: width 0.5s ease 0s;*/
/*transition: all 0.5s ease 0s;*/
/*transition: all 0.5s;*/
}
div:hover {
width: 300px;
height: 150px;
background: #f30;
}
</style>
头像旋转
<style>
img {
border: 4px solid #093;
border-radius: 50%;
margin: 10px auto;
display: block;
transition: all 0.5s;
}
img:hover {
transform: rotate(360deg);
}
</style>
图片移入放大
<style>
div[class=con] {
border: 4px solid #666;
margin: 10px auto;
transition: all 0.5s;
overflow: hidden;
position: relative;
}
div img {
display: block;
position: absolute;
top: -30px;
cursor: pointer; /*鼠标移入时变成可点击状态*/
}
img:hover {
transform: scale(1.1);
}
</style>
