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让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
css3中背景尺寸background-size详解
Sep 02 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
HTML5是否真的可以取代Flash
Feb 10 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
打造基于jQuery的高性能TreeView(asp.net)
2011/02/23 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python实现树形打印目录结构
2018/03/29 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
tensorflow自定义激活函数实例
2020/02/04 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
区域总监的岗位职责
2013/11/21 职场文书
大学生如何写自荐信
2014/01/08 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
岗位竞聘报告范文
2014/11/06 职场文书