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属性实现炫酷效果,希望对大家有所帮助!

HTML / CSS 相关文章推荐
html5+css3气泡组件的实现
Nov 21 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
使用CSS实现音波加载效果
May 07 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
You might like
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
基于php权限分配的实现代码
2013/04/28 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
vue超时计算的组件实例代码
2018/07/09 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
python3连接MySQL数据库实例详解
2018/05/24 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
tensorflow的计算图总结
2020/01/12 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
elf彩妆英国官网:e.l.f. Cosmetics英国(美国平价彩妆品牌)
2017/11/02 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
党员公开承诺践诺书
2014/03/25 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server