css3使用animation属性实现炫酷效果

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.png) center no-repeat;

        animation-name:circle_inner;

    }

    .middle{

        background:url(source/circle_middle.png) center no-repeat;

        animation-name:circle_middle;

    }

    .outer{

        background:url(source/circle_outer.png) center no-repeat;

        animation-name:circle_outer;

    }

    .pic{

        background:url(source/pic.png) 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.png) 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.png) 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.png) 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.png) 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>

动画性能优化：

用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属性实现炫酷效果的更多相关文章

百度前端技术学院2018笔记之利用 CSS animation 制作一个炫酷的 Slider
前言题目地址利用 CSS animation 制作一个炫酷的 Slider 思路整理首先页面包含三种东西一个是type为radio的input其实就是单选框二是每个单选框对应的label 三 ...
仿网易/QQ空间视频列表滚动连播炫酷效果
代码地址如下:http://www.demodashi.com/demo/11201.html 一.准备工作 AndroidStudio 开发环境需要下载七牛的开源播放器SDK 本例子实现了仿网易/ ...
用AI制作炫酷效果
PART1:制作第一个效果步骤一:新建一个800*600的画布. 骤二:从工具栏选“矩形工具”,创建一个800*600的矩形.白色的是画布,浅红色(我的AI之前保留的填充颜色,每个人都不一样)的是你 ...
No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
基于skitter的轮播图炫酷效果，幻灯片的体验
概述包含各种炫酷的轮播切换效果,插件小巧,与其他插件无冲突,可用于移动端和PC端详细代码下载:http://www.demodashi.com/demo/11939.html 你还在用原生的js ...
css3中animation属性animation-timing-function知识点以及其属性值steps()
在animation中最重要的其实就是时间函数(animation-timing-function)这个属性,他决定了你的动画将以什么样的速度执行,所以最关键的属性值也就是cubic-bezier(n ...
CSS3之animation属性
CSS中的animation属性可用于为许多其他CSS属性设置动画,例如颜色,背景色,高度或宽度. 每个动画都需要使用@keyframes这种at-rule语句定义,然后使用animation属性来调 ...
网页样式——各种炫酷效果持续更新ing...
1.evanyou效果-彩带的实现,效果如下注:这个主要用的是Canvas画布实现的,点击背景绘制新的图形,代码如下: /*Html代码:*/ <canvas id=">< ...
学习 CSS 之用 CSS 3D 实现炫酷效果
一.前言把大象关进冰箱需要几步?三步,把冰箱门打开,把大象关进去,把冰箱门关上. 用 CSS 实现 3D 效果需几步?三步,设置透视效果 perspective,改变元素载体为 preserve-3 ...

随机推荐

screen配置窗口显示
screen的下方不显示,可以复制如下的代码 cd /root && vim .screenrc 贴上如下内容 hardstatus on hardstatus alwayslastl ...
使用RKE快速部署k8s集群
一.环境准备 1.1环境信息 IP地址角色部署软件 10.10.100.5 K8s Master Etcd.Control 10.10.100.17 K8s Worker1 Worker 10.1 ...
springcloud 依赖版本问题
SpringCloud 版本: 版本名称版本 Finchley snapshot版 Edgware snapshot版 Dalston SR1 当前最新稳定版本 Camden SR7 稳定版本 Br ...
SSH（三）
在Spring中引用属性文件: 优点: 1.防止随意更改jdbc的连接 2.给不懂代码的人使用步骤: 1.数据库连接信息写在属性文件中 ...
python day01练习和作业
习题:1.简述编译型与解释型语言的区别,且分别列出你知道的哪些语言属于编译型,哪些属于解释型编译型语言:优点:执行速度快缺点:维护成本高,跨平台性差解释型语言:优点:维护成本低,跨平台性好缺点:执 ...
pugixml简单实用
实现快递查询,调用快递100的API,未完成. #include <iostream> #include <fstream> #include <string> # ...
css-box-shadowing
box-shadow: h-shadow v-shadow blur spread color inset; 注释:box-shadow 向框添加一个或多个阴影.该属性是由逗号分隔的阴影列表,每个阴影 ...
基于TensorFlow的MNIST手写数字识别-初级
一:MNIST数据集下载地址 MNIST是一个包含很多手写数字图片的数据集,一共4个二进制压缩文件分别是test set images,test set labels,training se ...
SpringBoot+Mybatis+MybatisPlus整合实现基本的CRUD操作
SpringBoot+Mybatis+MybatisPlus整合实现基本的CRUD操作 1> 数据准备 -- 创建测试表 CREATE TABLE `tb_user` ( `id` ) NOT ...
14-Response
今日知识 1. response 2. ServletContext对象 response * 功能:设置响应消息 1. 设置响应行 1. 格式:HTTP/1.1 200 ok 2. 设置状态码:se ...

css3使用animation属性实现炫酷效果

css3使用animation属性实现炫酷效果的更多相关文章

随机推荐

热门专题