核心代码：

.ease{
-webkit-transition:all 4s ease;
}

.ease-in{
-webkit-transition:all 4s ease-in;
}

.ease-out{
-webkit-transition:all 4s ease-out;
}

.ease-in-out{
-webkit-transition:all 4s ease-in-out;
}

.linear{
-webkit-transition:all 4s linear;
}

#trs:hover .trs{
margin-left: 400px;/向右偏移/
-webkit-transform:rotate(25deg);/旋转/
color:red;/更换字体颜色/
font-size: 1.5em;/更换字体大小/
background:-webkit-gradient(linear, left bottom, left top,color-stop(0, #b6ebf7), color-stop(0.80, #fff));/背景平滑过渡/
border-radius: 25px;/增加圆角/
}

 

demo