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 ...
随机推荐
- 暑假第六周总结（对HBASE进行编程实践并且安装Redis）
本周主要是根据教程对HBASE进行了编程实践,对于hadoop的编程来说需要用到很多的.jar 包,在进行编程实践的时候需要参照相关的教程将jar包添加至程序当中去.教程上给的代码还是比较详细的,加上 ...
- SpringBoot学习(2) - 自定义starter
自己开发一个spring boot starter的步骤1.新建一个项目(全部都基于maven),比如新建一个spring-boot-starter-redis的maven项目 pom.xml: &l ...
- 2.OpenStack 网络简介(neutron)
OpenStack 网络简介(neutron) 概述和组件 OpenStack 网络允许您创建和管理网络对象, 如网络.子网和端口, 其他 OpenStack 服务可以使用.插件可以实现, 以适应不同 ...
- 简单处理IP XML数据
///* 编译环境: visual c++ */ //#include <stdio.h> //#include <winsock2.h> //#pragma comment( ...
- 开源项目SMSS发开指南（五）——SSL/TLS加密通信详解（下）
继上一篇介绍如何在多种语言之间使用SSL加密通信,今天我们关注Java端的证书创建以及支持SSL的NioSocket服务端开发.完整源码 一.创建keystore文件 网上大多数是通过jdk命令创建秘 ...
- HotSpot虚拟机对象创建
2.3.1对象创建 Java是一门面向对象的语言,在Java程序的运行过程中无时无刻都有新的对象被创建出来.从语言的层面看,创建对象通常仅仅是一个new关键字而已,从虚拟机的角度看,创建对象又是怎样的 ...
- CCF_ 201509-2_日期计算
水. #include<iostream> #include<cstdio> using namespace std; ] = {{,,,,,,,,,,,,},{,,,,,,, ...
- Asp.Net Core IdentityServer4 管理面板集成
前言 IdentityServer4(以下简称 Id4) 是 Asp.Net Core 中一个非常流行的 OpenId Connect 和 OAuth 2.0 框架,可以轻松集成到 Asp.Net C ...
- 教你如何快速上手markdown语法，编写技术博客（史上最全最简，用MarkDown写博客）
首先,进行有道云笔记官网,新建一份markdown文档, 如下图 然后,在文档编辑区,左边,复制如下段落文字 加粗 斜线 标记颜色 下划线 废弃线 一级标题 二级标题 三级标题 四级标题 五级标题 六 ...
- 【UEFI】--- 探究BIOS NvRam空间的的位置以及大小
按照国际惯例--先上问题:1. 什么是NvRam空间,里面存储了什么数据 2. 如何找到NvRam空间在BIOS-bin文件中的位置 NvRam空间的学名为: Non-Volatile Ram即非易失 ...