css3动画 360°旋转放大旋转放大上下左右移动例子

原创

已于 2022-04-09 17:54:39 修改 · 534 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3

于 2020-10-26 13:53:01 首次发布

本文通过实例展示了如何使用CSS3实现元素的360度旋转、放大、旋转放大以及上下左右移动的效果，详细解析了相关的CSS3动画属性和技术要点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:120px;
            height:120px;
            line-height:120px;
            margin: 20px;
            background-color: #5cb85c;
            float: left;
            font-size: 12px;
            text-align: center;
            color:#000;
        }
        /*效果一：360°旋转 修改rotate(旋转度数)*/
        .img1 {
            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;
        }
        .img1:hover {
            transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
        }

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