css3旋转动画
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 加载动画</title> <style>
body {
background-color: #fff;
}
#demo {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#loading {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin: -90px 0 0 -90px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: red;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loading:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #000;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loading:after {
content: "";
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FF00FF;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style> </head>
<body> <div id="demo">
<div id="loading"></div>
</div> </body>
</html>
效果图:
css3旋转动画的更多相关文章
- css3旋转倾斜3d小动画
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css3制作旋转动画
现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...
- CSS3 skew倾斜、rotate旋转动画
css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂: 若需要实现倾斜.旋转之类的动画难度将更高(我还没试过用JavaScript或Jque ...
- 超绚丽CSS3多色彩发光立方体旋转动画
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.css3动画的属性主要分为三类:transform.transition以及anim ...
- 纯CSS3浮雕质感的立体文字旋转动画
还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果.今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且 ...
- CSS3实现3D木块旋转动画
CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...
- css3立体旋转动画
demo地址 效果图 在别人网站上看到一个立体旋转的例子,然后突然想到自己前几天学习的css3旋转,就试着做了一个例子,看起来有一些粗糙. html结构很简单: <div> <ul ...
- css3 3d旋转动画
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- css3 一个六边形 和 放大旋转动画DEMO演示
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...
随机推荐
- Timer控件的使用限制和注意事项
Timer的Interval 属性当编写 Timer 组件时,需要考虑 Interval 属性的几点限制:1. 如果应用程序或另一个应用程序对系统需求很大(如长循环.大量的计算或驱动程序.网络或端口访 ...
- Creating Self-Signed SSL Certificates
http://weblogic-wonders.com/weblogic/2011/05/25/ssl-configuration-for-weblogic-server/ http://m-butt ...
- Thrift分析
[Thrift分析] Thrift定义一套IDL(Interface Definition Language)用于描述接口,通常后缀名为.thrift,通过thrift程序把.thrift文件导出成各 ...
- classpath 和 classpath* 的区别:
classpath指的是java代码生成的class的路径. classpath 和 classpath* 区别: classpath:只会到你的class路径中查找找文件; classpath*:不 ...
- 使用SQL查询所有数据库名和表名
使用SQL查询所有数据库名和表名 MySQL中查询所有数据库名和表名 查询所有数据库 show databases; 1 1 查询指定数据库中所有表名 select table_name from i ...
- iis 搭建ftp
1.打开iis,添加FTP站点 2.在电脑上建立的FTP服务器别的电脑不能访问 关闭防火墙即可访问防火墙 程序员的基础教程:菜鸟程序员
- QuartJob的CronExpressionString规则详解
字段 允许值 允许的特殊字符 秒 0-59 , - * / 分 0-59 , - * / 小时 0-23 , - * / 日期 1-31 , - * ? ...
- re 正则模块
re模块(* * * * *) 就其本质而言,正则表达式(或 RE)是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列 ...
- 如何求数字n的因数个数及因数和
我们有可能在某些数学题中会求到某个数的因数和,那我们怎么求呢? 因为我们知道任意一个合数都可以由两个或多个质数相乘得到,那么我们就先分解质因数吧 例:我们随便去一个数吧,嗯,就108了,好算... 我 ...
- Java程序设计8——抽象类、接口与内部类
1 抽象类 当编写一个类时,常常会为该类定义一些方法,这些方法用以描述该类的行为方式,那么这些方法都有具体的方法体.但在某些情况下,某个父类并不需要实现,因为它只需要当做一个模板,而具体的实现,可以由 ...