首页
所有分类
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的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS中垂直居中的简单实现方法
Jul 06 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 HTML / CSS
利用html5的websocket实现websocket聊天室
Dec 12 HTML / CSS
微信浏览器取消缓存的方法
Mar 28 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 HTML / CSS
HTML页面点击按钮关闭页面的多种方式
Dec 24 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
Odoo(1) BeautifulSoup4(2) OpenGL(1) ftpserver(1) ElementTree(1) 面向接口(1) SeaTunnel(1) tfx(1) OpenAI baselines(1) tkFileDialog(1)
You might like
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHP实现数组根据某个字段进行水平合并，横向合并案例分析
2019/10/08 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
2018/06/11 Javascript
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
django定期执行任务(实例讲解)
2017/11/03 Python
更新修改后的Python模块方法
2019/03/03 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
python编写俄罗斯方块
2020/03/13 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
乌克兰在线商店的价格比较：Price.ua
2019/07/26 全球购物
马来西亚网上花店：FlowerAdvisor马来西亚
2020/01/03 全球购物
英国最大的在线照明商店：Litecraft
2020/08/31 全球购物
考试作弊检讨书大全
2014/02/18 职场文书
元旦活动感言
2014/03/08 职场文书
明星员工获奖感言
2014/08/14 职场文书
购房委托书
2014/10/15 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
餐厅营销的秘密：为什么老顾客会流水？
2019/08/08 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Python数据类型最全知识总结
2021/05/31 Python
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers