CSS3动画的基本使用（CSS3）

不念不忘少年蓝@ 2023-10-03 13:46 69阅读 0赞

## CSS3动画的基本使用（CSS3） ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS3动画的基本使用</title>
        <style>
            /*  我们想要页面一打开 一个盒子就从左边走到右边 */
            /*   1.定义动画 */
            @keyframes move {
        
    
                /*  开始状态 */
                0% {
        
                    transform: translateX(0px);
                }
    
                /* 结束状态 */
                100% {
        
                    transform: translateX(1000px);
                }
            }
    
            div {
        
                width: 200px;
                height: 200px;
                background-color: skyblue;
    
    
                /*   2.调用动画  */
                /* 动画名称 */
                animation-name: move;
                /* 持续时间 */
                animation-duration: 5s;
    
            }
        </style>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，69人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

文章目录一、需求说明二、动画代码分析 1、地图背景设置 2、热点动画位置测量 3、热点动画布局分析

àì夳堔傛蜴生んèń/ 2023年10月14日 16:43/ 0 赞/ 81 阅读

相关【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

文章目录一、CSS3 动画简介二、CSS3 动画实现步骤三、动画定义四、代码示例一、CSS3 动画简介

我不是女神ヾ/ 2023年10月14日 15:47/ 0 赞/ 167 阅读

相关 CSS3动画序列（CSS3）

CSS3动画序列（CSS3） <!DOCTYPE html> <html lang="en"> <head> <meta

旧城等待，/ 2023年10月03日 13:46/ 0 赞/ 22 阅读

相关 CSS3动画的基本使用（CSS3）

CSS3动画的基本使用（CSS3） <!DOCTYPE html> <html lang="en"> <head> <m

不念不忘少年蓝@/ 2023年10月03日 13:46/ 0 赞/ 70 阅读

相关 CSS3动画的常见属性（CSS3）

CSS3动画的常见属性（CSS3） <!DOCTYPE html> <html lang="en"> <head> <m

浅浅的花香味﹌/ 2023年10月03日 13:39/ 0 赞/ 50 阅读

相关 Css3动画库Animate.css的使用

演示地址：[https://daneden.github.io/animate.css/][https_daneden.github.io_animate.css] 下载an

蔚落/ 2022年05月27日 03:12/ 0 赞/ 301 阅读

相关 CSS3动画

最新更新时间：2019年1月10日19:34:50 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：动画 360°循环旋转

浅浅的花香味﹌/ 2022年05月17日 02:04/ 1 赞/ 351 阅读

相关 CSS3动画

CSS3动画 CSS3动画可以分为过渡动画变形动画（平移，放大，旋转）和自定义动画（帧动画）。变形动画一般和过渡动画或者自定义动画搭配使用。过渡动画

一时失言乱红尘/ 2022年04月11日 11:11/ 0 赞/ 363 阅读

相关 css3 3D动画

3D 在2d的基础上添加 z 轴的变化 3D 位移：在2d的基础上添加 translateZ（），或者使用translate3d（）　　translateZ（）：以

た入场券/ 2021年11月29日 23:50/ 0 赞/ 455 阅读

相关 CSS3动画

CSS3动画 > 网页的动态效果实现动画效果的四种方式 1. 动态图片 2. Flash 3. CSS动画相关属性 4. JavaScript 实现

Dear 丶/ 2021年11月16日 07:38/ 0 赞/ 843 阅读