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 相关文章推荐
详解CSS样式中的 !important * _ 符号
Mar 09 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5不支持标签和新增标签详解
Jun 27 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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面向对象程序设计方法实例详解
2016/12/24 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
js性能优化技巧
2015/11/29 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
vue swipe自定义组件实现轮播效果
2019/07/03 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python获取网页状态码示例
2014/03/30 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
python正则表达式的使用
2017/06/12 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
使用python 3实现发送邮件功能
2018/06/15 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
原生python实现knn分类算法
2019/10/24 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
毕业生自荐信格式
2014/03/07 职场文书
职业生涯规划书范文
2014/03/10 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
班主任工作总结范文
2015/08/13 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
灵能百分百第三季什么时候来?
2022/03/15 日漫
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android