首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3使用animation属性实现炫酷效果(推荐)

Posted in HTML / CSS onFebruary 04, 2020

animation-name 动画名称，可以有多个值，用逗号隔开，表示绑定了多个动画

animation-name属性为动画指定一个名称

animation-name兼容主流的浏览器，不过还是需要加前缀去兼容

animation-name有两个属性值，分别是keyframename和none

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    div{    
        width:800px;
        height:800px;
        margin:0 auto;    
    }
    .container{
        position: relative;
    }
    .inner, .middle, .outer, .pic{
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;        
    }
    .inner{
        background:url(source/circle_inner.jpg) center no-repeat;
        animation-name:circle_inner;
    }
    .middle{
        background:url(source/circle_middle.jpg) center no-repeat;
        animation-name:circle_middle;
    }
    .outer{
        background:url(source/circle_outer.jpg) center no-repeat;
        animation-name:circle_outer;
    }
    .pic{
        background:url(source/pic.jpg) center no-repeat;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
        <div class="middle"></div>
        <div class="outer"></div>
        <div class="pic"></div>
    </div>
</body>
</html>

animation-duration 动画持续时间 默认是0

animation-timing-function 动画时间函数

animation-delay 动画延迟时间

animation-delay 属性定义动画什么时候开始，单位可以是秒（s）或毫秒（ms），允许负值，-2s使动画马上开始，但会跳过2s进入动画

animation-iteration-count 动画循环次数

animation-iteration-count: number | infinite 默认为1

animation-direction: normal | reverse | alternate | alternate-reverse 正常； 反向； 正反交替； 反正交替

alternate 和 alternate-reverse ，如果animation-itreation-count 不是设置成 infinite ，则只会执行一次就停止

animation-fill-mode 动画延迟未执行时，或者动画执行完毕后的停留状态（动画不能设置为循环，否则无法停止）

animation-fill-mode: none | forwards | backwards | both 无 结束状态 开始状态 看情况

animation-play-state: running | paused 动画运行状态：运行 | 暂停

animation 简写

animation: name duration timing-function delay iteration-count direction fill-mode play-state

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    div{    
        width:800px;
        height:800px;
        margin:0 auto;    
    }
    .container{
        position: relative;
        -webkit-transform-style:preserve-3d;
           -moz-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
             -o-transform-style:preserve-3d;
                transform-style:preserve-3d;
    }
    .inner, .middle, .outer, .pic{
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        margin:auto;        
    }
    .container:hover div{
        -webkit-animation-play-state:paused;
           -moz-animation-play-state:paused;
            -ms-animation-play-state:paused;
             -o-animation-play-state:paused;
                animation-play-state:paused;
    }
    .inner{
        background:url(source/circle_inner.jpg) center no-repeat;    
        /*循环*/
        -webkit-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
           -moz-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
            -ms-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
             -o-animation:circle_inner 10s ease-in-out 1s infinite alternate running;
                animation:circle_inner 10s ease-in-out 1s infinite alternate running;    
        /*不循环，填充效果*/
        /*-webkit-animation:circle_inner 10s ease-in-out 1s forwards running;
           -moz-animation:circle_inner 10s ease-in-out 1s forwards running;
            -ms-animation:circle_inner 10s ease-in-out 1s forwards running;
             -o-animation:circle_inner 10s ease-in-out 1s forwards running;
                animation:circle_inner 10s ease-in-out 1s forwards running;*/
    }
    .middle{
        background:url(source/circle_middle.jpg) center no-repeat;
        -webkit-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
           -moz-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
            -ms-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
             -o-animation:circle_middle 10s ease-in-out 1s infinite alternate running;
                animation:circle_middle 10s ease-in-out 1s infinite alternate running;    
    }
    .outer{
        background:url(source/circle_outer.jpg) center no-repeat;
        -webkit-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
           -moz-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
            -ms-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
             -o-animation:circle_outer 10s ease-in-out 1s infinite alternate running;
                animation:circle_outer 10s ease-in-out 1s infinite alternate running;    
    }
    .pic{
        background:url(source/pic.jpg) center no-repeat;
    }
    @keyframes circle_inner{
        0%{ transform:rotateX(0deg); }
        50%{ transform:rotateX(90deg); }
        100%{ transform:rotateX(360deg); }
    }
    @keyframes circle_middle{
        0%{ transform:rotateY(0deg); }
        50%{ transform:rotateY(90deg); }
        100%{ transform:rotateY(360deg); }
    }
    @keyframes circle_outer{
        0%{ transform:rotateZ(0deg); }
        50%{ transform:rotateZ(90deg); }
        100%{ transform:rotateZ(360deg); }
    }
</style>
</head>
<body>
    <div class="container">
        <div class="inner"></div>
        <div class="middle"></div>
        <div class="outer"></div>
        <div class="pic"></div>
    </div>
</body>
</html>

css3使用animation属性实现炫酷效果(推荐)

动画性能优化：

用position-fixed代替background-attachment

带图片的元素放在伪元素中

will-change

兼容性IE13+ 感觉可以放弃了……

向下提示箭头效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    div{    
        width:30px;
        height:30px;
        position: fixed;
        left:0;
        right:0;
        bottom:100px;
        margin:0 auto;    
        cursor:pointer;
        -webkit-transform:rotate(90deg);
           -moz-transform:rotate(90deg);
            -ms-transform:rotate(90deg);
             -o-transform:rotate(90deg);
                transform:rotate(90deg);
        -webkit-animation:upDown 2s ease-in-out infinite;
          -moz-animation:upDown 2s ease-in-out infinite;
           -ms-animation:upDown 2s ease-in-out infinite;
            -o-animation:upDown 2s ease-in-out infinite;
               animation:upDown 2s ease-in-out infinite;
    }
    @-webkit-keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
    @-moz-keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
    @-ms-keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
    @-o-keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
    @keyframes upDown{
        0%{ bottom:100px; }
        50%{ bottom:80px; }
        100%{ bottom:100px; }
    }
</style>
</head>
<body>
    <div>></div>
</body>
</html>

css3使用animation属性实现炫酷效果(推荐)

总结

以上所述是小编给大家介绍的css3使用animation属性实现炫酷效果，希望对大家有所帮助！

css3使用animation属性实现炫酷效果(推荐)

- Author -

陈莺莺呀

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
CSS3弹性盒模型开发笔记（二）
Apr 26 HTML / CSS
CSS3圆角边框和边界图片效果实例
Jul 01 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 #HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 #HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 #HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 #HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 #HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 #HTML / CSS
Grid 宫格常用布局的实现
Jan 10 #HTML / CSS
接收机(2) 放大器(1) TECSUN(1) DSP(2) 车机(1) 德生(17) 电子管(5) 修复(2) PL-365(1) 海燕B411(1)
You might like
php中取得文件的后缀名？
2012/02/20 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
javascript  Error 对象 错误处理
2008/05/18 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
从零学习node.js之模块规范（一）
2017/02/21 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦：EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
使用CSS3来实现滚动视差效果的教程
2015/08/24 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
Links of London官方网站：英国标志性的珠宝品牌
2017/04/09 全球购物
如何查找网页漏洞
2016/06/22 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
法律专业实习鉴定
2013/12/22 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
项目总经理岗位职责
2014/02/14 职场文书
人资专员岗位职责
2014/04/04 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
环境建议书
2015/02/04 职场文书
市场总监岗位职责
2015/02/11 职场文书
出国留学自荐信模板
2015/03/06 职场文书
项目合作意向书
2015/05/08 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python