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 ...

随机推荐

虚拟机 ubuntu系统忘记密码如何进入
重启虚拟机按住shift键会出现下面的界面按住‘e’进入下面的界面往下翻更改红框勾到的字符串为: rw init=/bin/bash 然后按F10进行引导然后输入 :”passwd” ...
Java 加密/解密Excel
概述设置excel文件保护时,通常可选择对整个工作簿进行加密保护,打开文件时需要输入密码:或者对指定工作表进行加密,即设置表格内容只读,无法对工作表进行编辑.另外,也可以对工作表特定区域设置保护,即 ...
jmeter性能测试2：基础功能介绍
对于英语不好的同学建议先改为简体中文再进行使用 1.添加->threads->线程组(控制总体并发) 线程数:虚拟用户数.一个虚拟用户占用一个进程或线程 ...
tmobst5
(单选题)SQL语言又称为() A)结构化定义语言 B)结构化控制语言 C)结构化查询语言 D)结构化操纵语言 2.(单选题)只有满足联接条件的记录才包含在查询结果中,这种联接为( ) A)左联接 B ...
C++调用DLL方法
调用的原理: 调用DLL,首先需要将DLL文件映像到用户进程的地址空间中,然后才能进行函数调用,这个函数和进程内部一般函数的调用方法相同.Windows提供了两种将DLL映像到进程地址空间的方法:隐式 ...
virtualenv 指定 python 解释器的版本
使用如下命令为 ubuntu 系统安装 virtualenv sudo apt-get install python-virtualenv 当我们使用 virtualenv 命令创建虚拟环境时,默认使 ...
POJ_3450_KMP
http://poj.org/problem?id=3450 直接暴力枚举第一行的每一个字串,在下面的字符串中查找就行了,注意不符合就及时break. 然后试了一下strstr,发现效率是KMP的3- ...
曹工说Spring Boot源码（16）-- Spring从xml文件里到底得到了什么（aop：config完整解析【上】）
写在前面的话相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享曹工说Spring Boot源码(2)-- Bean ...
php扩展模块的安装
PHP的扩展模块安装模块安装总则: 进入到ext/目录下对应的模块执行/usr/local/php/bin/phpize 也就是执行一遍phpize生成编译文件 ./configure --wit ...
BZOJ 3343 教主的魔法（分块）
题意: 有一个1e6的数组,t次操作:将[l,r]内的值增加w,或者查询[l,r]内的值大于等于add的思路: 分块,块大小为sqrt(n),每次只需要暴力头尾两块,中间的整块打标记, 对于查询查操 ...

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

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

随机推荐

热门专题