CSS中实现动画效果-附案例


Posted in HTML / CSS onFebruary 28, 2022

一、什么是动画?

动画就是一帧又一帧图片,按顺序展现在人的眼前,但是由于人的视觉反应不过来就会产生图画动起来的效果。

二、动画动作

1.动画的声明@keyframes name

动画声明需要使用@keyframes name,后面的name是人为定义的动画名称

@keyframes move {

     0% {

         transform: translate(0, 0);

     }



     25% {

         transform: translate(1000px, 0px);

     }



     50% {

         transform: translate(1000px, 400px);

     }



     75% {

         transform: translate(0px, 400px);

     }



     100% {

         transform: translate(0, 0);

     }

 }

2.动画的动作

在以上代码中,{}内包含的就是动画的动作,每一个完整的动画都会一定的时间,其中

意思是每达到时间的百分之多少就向某状态进行转变。

三、动画属性

<!-- 

    动画属性有很多种

    div {

        动画的名称(必须要有)

        animation-name: move;

        动画的运动曲线(linear是匀速stept()是分步)

        animation-timing-function: linear;

        动画的运动时间

        animation-duration: 3s;

        动画的运动次数(infinite是无限循环)

        animation-iteration-count: infinite;

        动画的开始时间

        animation-delay: 1s;

        动画是否逆序播放

        animation-direction: alternate;



    }

    动画播放期间触碰暂停

    div:hover {

        animation-play-state: paused;

    }

    动画播放完毕是否回到初始位置

    animation-fill-mode: forwards;(不回到初始位置)

    backwards(回到初始位置)

 -->

1.代码示例

<!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>Document</title>

    <style>

        @keyframes move {

            0% {

                width: 0;

                height: 0;

            }



            100% {

                width: 300px;

                height: 300px;

            }

        }



        div {

            margin: 200px auto;

            /* width: 300px;

            height: 300px; */

            background-color: darkviolet;

            animation-name: move;

            animation-timing-function: linear;

            animation-duration: .4s;

            animation-iteration-count: infinite;

            animation-delay: 1s;

            animation-direction: alternate;

            animation-fill-mode: forwards;

        }



        div:hover {

            animation-play-state: paused;

        }

    </style>

</head>



<body>

    <div></div>

</body>



</html>

2.效果展示

 CSS中实现动画效果-附案例

四、项目案例

1.奔跑的小熊

<!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>Document</title>

    <!-- 

        每一帧图片连接到一块就组成了一个动画

     -->

    <style>

        body {

            position: relative;

            background-color: gray;

        }



        @keyframes bear {

            0% {

                background-position: 0px 0px;

            }



            100% {

                background-position: -1600px 0px;

            }

        }



        @keyframes bgcmove {

            0% {

                left: 0;

            }



            100% {

                left: 50%;

                transform: translateX(-50%);

            }

        }



        @keyframes mountains {

            0% {

                background-position: 0px 0px;

            }



            100% {

                background-position: -3840px 0px;

            }

        }



        .mountain {

            /* 

            这里定位定到父类的底部,得不到想要的结果

             */

            position: absolute;

            bottom: -601px;

            width: 100%;

            height: 200px;

            background-image: url(../bg1.png);

            animation: mountains 8s linear infinite;

        }



        .nav {

            position: absolute;

            bottom: -601px;

            width: 200px;

            height: 100px;

            background-image: url(../bear.png);

            /* background-size: 100% 100%; */

            /* animation: name duration timing-function delay iteration-count direction fill-mode; */

            /* 值得注意的是steps与linear不可以混合使用 */

            animation: bear .8s steps(8) infinite, bgcmove 3s linear forwards;

        }

    </style>

</head>



<body>

    <div class="mountain"></div>

    <div class="nav"></div>



</body>



</html>

2.城市热点图

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            background-color: #333;

        }



        .map {

            position: relative;

            width: 747px;

            height: 616px;

            background: url(../map.png) no-repeat;

            margin: 0 auto;

        }



        .city {

            position: absolute;

            top: 227px;

            right: 193px;

            color: #fff;

        }



        .tb {

            top: 500px;

            right: 80px;

        }



        .dotted {

            width: 8px;

            height: 8px;

            background-color: #09f;

            border-radius: 50%;

        }



        .city div[class^="pulse"] {

            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 8px;

            height: 8px;

            box-shadow: 0 0 12px #009dfd;

            border-radius: 50%;

            animation: pulse 1.2s linear infinite;

        }



        .city div.pulse2 {

            animation-delay: 0.4s;

        }



        .city div.pulse3 {

            animation-delay: 0.8s;

        }



        @keyframes pulse {

            0% {}



            70% {

                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/

                width: 40px;

                height: 40px;

                opacity: 1;

            }



            100% {

                width: 70px;

                height: 70px;

                opacity: 0;

            }

        }

    </style>

</head>



<body>

    <div class="map">

        <div class="city">

            <div class="dotted"></div>

            <div class="pulse1"></div>

            <div class="pulse2"></div>

            <div class="pulse3"></div>

        </div>

        <div class="city tb">

            <div class="dotted"></div>

            <div class="pulse1"></div>

            <div class="pulse2"></div>

            <div class="pulse3"></div>

        </div>

    </div>

</body>



</html>

小熊奔跑,背景及小熊:

 CSS中实现动画效果-附案例

到此这篇关于 CSS中实现动画效果-附案例的文章就介绍到这了,更多相关 CSS中实现动画效果内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
css3实现圆锥渐变conic-gradient效果
Feb 12 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
phonegap常用事件总结(必看篇)
Mar 31 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 #HTML / CSS
css3中2D转换之有趣的transform形变效果
css3带你实现3D转换效果
bootstrapv4轮播图去除两侧阴影及线框的方法
企业开发CSS命名BEM代码规范实践
CSS3实现360度循环旋转功能
CSS实现九宫格布局(自适应)的示例代码
Feb 12 #HTML / CSS
You might like
PHP 编程安全性小结
2010/01/08 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
微信小程序 wxapp地图 map详解
2016/10/31 Javascript
快速实现jQuery多级菜单效果
2017/02/01 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Flask配置Cors跨域的实现
2019/07/12 Python
python检测服务器端口代码实例
2019/08/31 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
应届生妇产科护士求职信
2013/10/27 职场文书
就业推荐表自我鉴定
2013/10/29 职场文书
《将心比心》教学反思
2014/04/08 职场文书
副总经理任命书
2014/06/05 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
护士医德医风心得体会
2016/01/25 职场文书
初二数学教学反思
2016/02/17 职场文书