效果一：360°旋转 修改rotate(旋转度数)
01* {
02transition:All 0.4s ease-in-out
03-webkit-transition:All 0.4s ease-in-out
04-moz-transition:All 0.4s ease-in-out
05-o-transition:All 0.4s ease-in-out
06}
07*:hover {
08transform:rotate(360deg)
09-webkit-transform:rotate(360deg)
10-moz-transform:rotate(360deg)
11-o-transform:rotate(360deg)
12-ms-transform:rotate(360deg)
13}
效果二：放大 修改scale(放大的值)
01* {
02transition:All 0.4s ease-in-out
03-webkit-transition:All 0.4s ease-in-out
04-moz-transition:All 0.4s ease-in-out
05-o-transition:All 0.4s ease-in-out
06}
07*:hover {
08transform:scale(1.2)
09-webkit-transform:scale(1.2)
10-moz-transform:scale(1.2)
11-o-transform:scale(1.2)
12-ms-transform:scale(1.2)
13}
效果三：旋转放大 修改rotate(旋转度数) scale(放大值)
01* {
02transition:All 0.4s ease-in-out
03-webkit-transition:All 0.4s ease-in-out
04-moz-transition:All 0.4s ease-in-out
05-o-transition:All 0.4s ease-in-out
06}
07*:hover {
08transform:rotate(360deg) scale(1.2)
09-webkit-transform:rotate(360deg) scale(1.2)
10-moz-transform:rotate(360deg) scale(1.2)
11-o-transform:rotate(360deg) scale(1.2)
12-ms-transform:rotate(360deg) scale(1.2)
13}
效果四：上下左右移动 修改translate(x轴,y轴)
01* {
02transition:All 0.4s ease-in-out
03-webkit-transition:All 0.4s ease-in-out
04-moz-transition:All 0.4s ease-in-out
05-o-transition:All 0.4s ease-in-out
06}
07*:hover {
08transform:translate(0,-10px)
09-webkit-transform:translate(0,-10px)
10-moz-transform:translate(0,-10px)
11-o-transform:translate(0,-10px)
12-ms-transform:translate(0,-10px)
13}
我没有看出来问题啊。div2有个样式是单行截字不换行，多余的隐藏
div2{overflow:hiddentext-overflow:ellipsisoverflow:hidden}
然后div2:hover{overflow:visible}这里设置成鼠标放上去显示隐藏的字。
hover的意思是鼠标放上去的效果，当然移出去了，效果就还原了。
还是说我没懂问题是什么意思？
下面两种效果 ，一种是鼠标移走后回原位，一种是鼠标移上去的时候文字像右边滑动30px 滑动完了之后再滑到原位<div class="demo1">我是黎明</div>
<div class="demo2">我是黎明</div>
<style>
.demo1{transition: 1s}
.demo1:hover{margin-left:30px}
.demo2:hover
{
animation: myfirst 1s
-moz-animation: myfirst 1s/* Firefox */
-webkit-animation: myfirst 1s /* Safari 和 Chrome */
-o-animation: myfirst 1s/* Opera */
}
@keyframes myfirst{
0% {margin-left: 0px}
50% {margin-left: 30px}
100% {margin-left: 0px}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {margin-left: 0px}
50% {margin-left: 30px}
100% {margin-left: 0px}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% {margin-left: 0px}
50% {margin-left: 30px}
100% {margin-left: 0px}
}
@-o-keyframes myfirst /* Opera */
{
0% {margin-left: 0px}
50% {margin-left: 30px}
100% {margin-left: 0px}
}
</style>
