box-shadow + animation 实现loading

.loading{ width:3px; height:3px; border-radius:100%; margin-left:20px;
box-shadow:0 -10px 0 1px #333,10px 0px #333,0 10px #333,-10px 0 #333,-7px -7px 0 .5px #333,7px -7px 0 1.5px #333,7px 7px #333,-7px 7px #333;}
.spin{
-webkit-transform: rotate(360deg);
-webkit-animation:spin 1s linear infinite;
}
@-webkit-keyframes spin{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
.spin{
transform: rotate(360deg);
animation:spin 1s linear infinite;
}
@keyframes spin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

无限循环的CSS都是使用 spin 作为类名以及动画关键字,约定俗成的使用

时间: 2024-11-15 13:55:18

box-shadow + animation 实现loading的相关文章

CSS animation动画loading

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>logging</title> <style> @keyframes beat{ 70%{ transform: scale(1,1); } 100%{ transform: scale(1.3,1.3); } } body{ margin: 0

如何设置box shadow的透明度

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-24) 今天发现使用box-shadow属性,可以很好的给div添加阴影效果,但是添加的效果如果是: -moz-box-shadow:0 4px 4px #999; -webkit-box-shadow:0 4px 4px #999; box-shadow:0 4px 4px #999; 使用#设置的颜色是没有透明效果的.这样设置阴影的颜色,如果阴影落在的位置不是白色的,甚至是动态的,例如落在了幻灯片上,好几张不同颜

box shadow 单边阴影 两边阴影

box-shadow语法:x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect,其中阴影半径可以为负值,意思是增加或减少指定数值的阴影半径 正常阴影 box-shadow: 5px 5px 5px black; 阴影半径为负值  box-shadow: 5px 5px 5px -5px black; 阴影半径为正值 box-shadow: 5px 5px 5px 5px black; 双边阴影 box-shadow: 5px 0px 5px -5px black, -5px 0p

animation循环滚动

css3 简单循环滚动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> @keyframes lbody { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(

CSS3的变形transform、过渡transition、动画animation学习

学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.-ms-.-o-),本文为简化内容,直接使用了原版属性 根据不同属性的支持度,在实际使用的时候需要添加相应的浏览器前缀支持 目录: 变形transform 过渡transition 动画animation 一.变形transform 变形有rotate旋转.scale缩放.translate位移.sk

移动端HTML5开发问题汇总-样式篇

问题:Android 上圆形图片使用 border 时,边框显示变形 解决:给 img 外嵌套一个元素,为其使用圆角 <div> <img src=""> </div> div{ display: inline-block; border-radius: 50%; border: 4px solid #FF7000; } img{ vertical-align: top; } 问题:Android 上圆角元素,背景颜色会溢出 解决: { backgr

compass模块

Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/layout" 只有这两个模块是需要明确 指定引入的@import "compass"默认包含了其他五大模块却不包含resrt,layout 其他四个功能模块和Browser support模块CSS3:跨浏览器的CSS3能力Helpers:内含一系列的函数,跟SASS的函数列表

CSS 奇技淫巧十八招

http://www.tuicool.com/articles/VZneI3 開始覺得自己會寫 CSS 也算有一段時間了,常常遇到一些非常實用的技巧不斷地反覆使用,但是我個人覺得對初學者來說很難從樣式作用上自己發現可以如此的用法. 例如 border-radius: 50% 現在已經成了大家隨手都會用來搓圓仔的標準寫法了,但不知道可以這樣直接設百分比從正方形變成圓形的初學者我猜應該也是不少. 正好最近在教人學習 CSS ,整理下來也方便自己備忘參考. 設定 margin 讓區塊置中 對,擺在第一

一款基于的jQuery仿苹果样式焦点图插件

这次我们要分享的这款jQuery焦点图非常特别,它的外观特别简单,但是又相当大气.焦点图的整体样式是仿苹果样式的,由于jQuery的运用,我们只要点击图片下方的缩略图即可达到图片切换的焦点图特效,这款jQuery焦点图插件非常适合在产片展示的网页上使用. 在线预览   源码下载 接下来我们一起分享一下实现这款苹果焦点图的过程及源码. HTML代码: <div id="gallery"> <div id="slides" style="wi