css3有哪些不错的hover效果

CSS3在hover下的几种效果代码分享，CSS3在鼠标经过时的几种效果集锦

10年积累的成都网站制作、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有余杭免费网站建设让你可以放心的选择与我们合作。

效果一：360°旋转 修改rotate(旋转度数)

01 * {

02 transition: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 {

08 transform: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 * {

02 transition: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 {

08 transform: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 * {

02 transition: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 {

08 transform: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 * {

02 transition: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 {

08 transform: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 }

CSS里的hover样式

通过hover伪类了可以控制鼠标悬停在元素上的样式

例如，a:hover{color:red}在鼠标悬停到链接上时，链接变成红色

css的hover用法

元素添加hover伪类选择器时候一定要 紧贴 这hover， 不能有空格 ，有空格的话表示给该元素的所有子元素设置里hover样式。

错误例子：

ul :hover{} //ul的所有子元素设置了hover样式

正确例子：

ul:hover{} //ul会显示出想要的效果

ul:hover .one{ // 子元素写在hover后面空格隔开

          transform:rotateY(90deg);

      }

ul:hover .two{

          transform:rotateY(0deg);

      }

ul:hover .thr{

          transform:rotateY(360deg);

      }

仅可以给自身的子元素设置样式 ，给其他元素子元素设置无效

接着上个例子举例子：

div:hover .one{}//不显示任何效果，hover失效

给兄弟元素设置：

ul:hover+.one

名称栏目：csshover样式,css里的hover
标题来源：http://chengdu.cdxwcx.cn/article/dsedsco.html