首页
所有分类
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 相关文章推荐
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
不要在HTML中滥用div
May 08 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
松下(1) Panasonic(1) 根德(2) ICF-SW7600GR(1) 德生9700DX(1) ICF-SW55(1) SRF-S84(1) SRF-S83(1) 德生PL330(2) 德劲1103(3)
You might like
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
浅谈微信JS-SDK 微信分享接口开发（介绍版）
2018/08/15 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
vue实现点击按钮下载文件功能
2019/10/11 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python实现的简单hangman游戏实例
2015/06/28 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
opencv 阈值分割的具体使用
2020/07/08 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
通俗讲解python 装饰器
2020/09/07 Python
python openpyxl模块的使用详解
2021/02/25 Python
美国综合购物商城：UnbeatableSale.com
2018/11/28 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
旅游专业职业生涯规划范文
2014/01/13 职场文书
安全生产专项整治方案
2014/05/06 职场文书
幼儿生日活动方案
2014/08/27 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
2016新年感言
2015/08/03 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Python绘制分类图的方法
2021/04/20 Python
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技