css3 :hover添加特效

来源：互联网发布：物流信息发布平台源码编辑：程序博客网时间：2024/05/22 01:02

为改变hover动画效果，可以为hover添加transition 增加过度效果

1、第一种写法（事件前有动画效果）：

<style>        body{ padding: 100px}        .demo{            width: 100px;            height: 100px;            background-color: blue;        }        .demo:hover{            -webkit-transform: scale(2);            -moz-transform: scale(2);            -ms-transform: scale(2);            -o-transform: scale(2);            transform: scale(2);            -webkit-transition: transform 2s linear;            -moz-transition: transform 2s linear;            -ms-transition: transform 2s linear;            -o-transition: transform 2s linear;            transition: transform 2s linear;        }    </style>    <div class="demo"></div>

此效果可以改变鼠标移入目标区域上的hover效果，缺点：鼠标移出区域还原之前效果时，没有过度效果，很生硬；改善此效果参看方法二（如下）；

2、方法二（事件前后有动画效果）

<style>        body{ padding: 100px}        .demo{            width: 100px;            height: 100px;            background-color: blue;            -webkit-transition: transform 2s linear;            -moz-transition: transform 2s linear;            -ms-transition: transform 2s linear;            -o-transition: transform 2s linear;            transition: transform 2s linear;        }        .demo:hover{            -webkit-transform: scale(2);            -moz-transform: scale(2);            -ms-transform: scale(2);            -o-transform: scale(2);            transform: scale(2);        }    </style>    <div class="demo"></div>

将transition放在目标节点css中，即可在hover前后均有动画效果；
*transition还可以指定其他效果,并且可以同时指定多个效果，比如：transition : width 1s； opacity : 0.5s;

0 0