4种CSS3效果(360度旋转、旋转放大、放大、移动)
旋转:
* { 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); }
放大:
* { 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); }
放大旋转
* { 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); }
上下左右移动:
* { 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); }
人如代码,规矩灵活;代码如诗,字句精伦。