CSS动画

QmagicianRX

已于 2023-06-10 23:13:12 修改

阅读量1k

点赞数

分类专栏： JavaScript+HTML+CSS 文章标签： css 动画 css3 javascript html

于 2023-06-10 23:12:50 首次发布

本文链接：https://blog.csdn.net/wuxiaoquan_520/article/details/131147909

版权

JavaScript+HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、CSS动画实现的不同方式及对应描述：

方式	描述
CSS3 transition	基于CSS3的过渡效果，可以控制属性变化的速度、时间、函数类型等
CSS3 transform	基于CSS3的变换效果，可以对元素的位置、大小、旋转、倾斜等进行操作
CSS3 animation	基于CSS3的动画效果，可以实现复杂的帧动画、逐帧动画、缓动动画等
SVG动画	使用SVG实现动画效果，可以实现矢量图形的动态变化和交互效果
JavaScript控制CSS	使用JavaScript控制CSS实现动画效果，可以实现更加复杂的动画效果，如点击交互、响应式布局等

CSS3 transition、CSS3 transform、CSS3 animation是常用的CSS动画实现方式，keyframes可以进一步定制动画效果，JavaScript控制CSS可以实现更加复杂的动画效果，SVG动画则适用于矢量图形的动态变化和交互效果。

2、示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- meta 1、指定网页编码信息；2、使用name和content添加一些辅助说明 3、使用http-equiv和content添加一些指定动作，如自动刷新并跳到新页面-->
        <meta charset="UTF-8">
        <!-- <meta name="description" content="transition动画"> -->
        <!-- <meta http-equiv="refresh" content="2" url="http://www.baidu.com"> -->
        <title>transition动画</title>
        <style>
            .box-transition {
                width: 100px;
                height: 100px;
                background-color: red;
                /* transition: background-color 1s ease-in-out; */
                transition: width 1s, height 1s;
            }
            .box-transition:hover {
                /* background-color: blue; */
                width: 200px;
                height: 200px;
            }

            .box-transform {
                width: 50px;
                height: 50px;
                background-color: red;
                transition: transform 1s;
            }
            .box-transform:hover {
                /* transform: scale(2); */
                transform: translateX(100px) translateY(100px) rotate(180deg) scale(2); 
            }

            .box-animation {
                width: 100px;
                height: 100px;
                background-color: red;
                /**
                * 水平来回移动
                * ease-in-out 慢快慢；其次还有 linear 匀速；ease 慢快慢；ease-in 慢快；ease-out 快慢
                * infinite为重复不停止运动，也可以是具体重复次数，如2
                */
                animation: move 3s ease-in-out infinite; 
            }

            @keyframes move {
                0% {
                    transform: translateX(0);
                }
                50% {
                    transform: translateX(200px);
                }
                100% {
                    transform: translateX(0);
                }
            }

            .box-js {
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                left: 0;
                transition: left 1s ease-in-out;
            }

        </style>
        <!--
        js依赖放在此处加载，在下载和执行时会阻塞html渲染
        <script></script>
        添加 defer 属性，下载不会阻塞html渲染，并在html渲染完毕后执行
        <script defer></script>
        添加 async 属性，下载不会阻塞html渲染，但在下载完毕执行时会阻塞html渲染
        <script async></script>
        -->
    </head>
    <body>
        <p>
            1、transition: 鼠标移入，宽度从100px到200px
            <div class="box-transition"></div>
        </p>

        <p>
            2、transition+transform: 鼠标移入，旋转飞出（水平向右，向下分别移动100px，过程旋转180度，且放大2倍）<br/>
            另外，transform的变换是不会影响其他布局的，所以她比transition要流畅(即性能影响相对较小)
            <div class="box-transform"></div>
        </p>

        <p>
            3、animation+keyframes: 左右来回移动
            <div class="box-animation"></div>
        </p>

        <p>
            4、SVG动画：
        </p>
            <svg width="200" height="100">
                <rect x="10" y="10" width="50" height="50" fill="red">
                    <animate attributeType="XML" attributeName="x" from="10" to="100" dur="3s" repeatCount="indefinite" />
                </rect>
            </svg>
        

        <p>
            5、通过js和transition结合，交互式动画：
            <div class="box-js"></div>
            <button onclick="move()">Move Right</button>
        </p>
        <script>
            function move() {
                var box = document.querySelector('.box-js');
                box.style.left = '100px';
            }
        </script>
    </body>
</html>

QmagicianRX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS动画

基于CSS3的过渡效果，可以控制属性变化的速度、时间、函数类型等基于CSS3的变换效果，可以对元素的位置、大小、旋转、倾斜等进行操作基于CSS3的动画效果，可以实现复杂的帧动画、逐帧动画、缓动动画等SVG动画使用SVG实现动画效果，可以实现矢量图形的动态变化和交互效果JavaScript控制CSS使用JavaScript控制CSS实现动画效果，可以实现更加复杂的动画效果，如点击交互、响应式布局等是常用的CSS动画实现方式，keyframes可以进一步定制动画效果，
复制链接

扫一扫