CSS3代码实现旋转、放大和移动动画效果

发布时间：2024-01-05  栏目：建站知识   浏览：   分类：css教程 CSS3动画 CSS3教程

CSS3提供了丰富的动画效果，包括旋转、放大和移动等。以下是一个简单的示例代码： ```css /* 旋转动画 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate { animation: rotate 2s linear infinite; } /* 放大动画 */ @keyframes scale { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .scale { animation: scale 2s linear infinite; } /* 移动动画 */ @keyframes move { 0% {

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

.img1{transition:All0.4sease-in-out;-webkit-transition:All0.4sease-in-out;-moz-transition:All0.4sease-in-out;-o-transition:All0.4sease-in-out;}.img1:hover{transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);}

效果二：放大 修改scale(放大的值)

.img2{transition:All0.4sease-in-out;-webkit-transition:All0.4sease-in-out;-moz-transition:All0.4sease-in-out;-o-transition:All0.4sease-in-out;}.img2: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(放大值)

.img3{transition:All0.4sease-in-out;-webkit-transition:All0.4sease-in-out;-moz-transition:All0.4sease-in-out;-o-transition:All0.4sease-in-out;}.img3: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轴)

.img4{transition:All0.4sease-in-out;-webkit-transition:All0.4sease-in-out;-moz-transition:All0.4sease-in-out;-o-transition:All0.4sease-in-out;}.img4: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);}