CSS3在hover下的效果

高洛峰
Lepaskan: 2017-03-01 15:05:35
asal
1587 orang telah melayarinya

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

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

* {
       transition:All 0.4s ease-in-out;
       -webkit-transition:All 0.4s ease-in-out;
       -moz-transition:All 0.4s ease-in-out;
       -o-transition:All 0.4s ease-in-out;
   }
*:hover {
       transform:rotate(360deg);
       -webkit-transform:rotate(360deg);
       -moz-transform:rotate(360deg);
       -o-transform:rotate(360deg);
       -ms-transform:rotate(360deg);
   }

效果二:放大 修改scale(放大的值)
* {
       transition:All 0.4s ease-in-out;
       -webkit-transition:All 0.4s ease-in-out;
       -moz-transition:All 0.4s ease-in-out;
       -o-transition:All 0.4s ease-in-out;
   }
*:hover {
       transform:scale(1.2);
       -webkit-transform:scale(1.2);
      -moz-transform:scale(1.2);
       -o-transform:scale(1.2);
       -ms-transform:scale(1.2);
   }


效果三:旋转放大 修改rotate(旋转度数) scale(放大值)

* {
       transition:All 0.4s ease-in-out;
       -webkit-transition:All 0.4s ease-in-out;
      -moz-transition:All 0.4s ease-in-out;
       -o-transition:All 0.4s ease-in-out;
   }
*:hover {
       transform:rotate(360deg) scale(1.2);
       -webkit-transform:rotate(360deg) scale(1.2);
       -moz-transform:rotate(360deg) scale(1.2);
       -o-transform:rotate(360deg) scale(1.2);
       -ms-transform:rotate(360deg) scale(1.2);
   }


效果四:上下左右移动 修改translate(x轴,y轴)

* {
       transition:All 0.4s ease-in-out;
       -webkit-transition:All 0.4s ease-in-out;
       -moz-transition:All 0.4s ease-in-out;
       -o-transition:All 0.4s ease-in-out;
  }
*:hover {
       transform:translate(0,-10px);
       -webkit-transform:translate(0,-10px);
       -moz-transform:translate(0,-10px);
       -o-transform:translate(0,-10px);
       -ms-transform:translate(0,-10px);
   }

 更多CSS3在hover下的效果相关文章请关注PHP中文网!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!