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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
css3背景_动力节点Java学院整理
Jul 11 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
Mar 08 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
php简单截取字符串代码示例
2016/10/19 PHP
php测试kafka项目示例
2020/02/06 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
JS定时器实例
2013/04/17 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
Python argv用法详解
2016/01/08 Python
使用Python+Splinter自动刷新抢12306火车票
2018/01/03 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
函授本科毕业生自我鉴定
2013/10/16 职场文书
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
新闻专业大学生找工作的自我评价
2013/10/30 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
如何拟写通知正文?
2019/04/02 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis