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模块的目前的状况分析
Feb 24 HTML / CSS
举例详解CSS3中的Transition
Jul 15 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
May 19 HTML / CSS
css 边框添加四个角的实现代码
Oct 16 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
Nov 01 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
Python通过解析网页实现看报程序的方法
2014/08/04 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python django中8000端口被占用的解决
2019/12/17 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
一款恶搞头像特效的制作过程 利用css3和jquery
2014/11/21 HTML / CSS
《临死前的严监生》教学反思
2014/02/13 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
利群广告词
2014/03/20 职场文书
园林专业毕业生自荐信
2014/07/04 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
党员作风建设整改方案
2014/10/27 职场文书
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript