最新消息:

CSS第7款:28款过渡过渡样式loader.css

CSS模块 杨红伟 1969浏览 0评论

一:介绍

过渡效果,常规方式都是用JS来制作的,CSS3的出生,带来了革命性的变革,同时也衍生了众多的CSS插件,本文用到的loader.css,加载它之后,再用几句代码简单的代码,就可以完成一个神奇的效果。缩略图如下:

二:CSS下载地址

本站查看: http://www.ijquery.cn/democss/loaders/loadersDemo.html
本站下载: http://www.ijquery.cn/democss/loaders/loaders.zip

三:最简使用教程

查看地址: http://www.ijquery.cn/democss/loaders/simple/simple.html

1、HTML代码:

<main class="loaded">
	<div class=" ball-pulse">
		<div></div>
		<div></div>
		<div></div>
	</div>
</main>

注:这里的 loaded 是透明效果, ball-pulse 是过渡的类型。过渡类型有28种。详细类型可以看第四大点。

一个<div></div>是一个元素,这里有3个元素,所以就是3个div。

2、引用的CSS代码:

<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/loaders.css"/>

其中 loader.css 就是我们想要的 css插件,而demo是主要的文件,最简的 demo.css 包括如下文件

html {background: #448402;}
main.loaded {opacity: 1; }

这里的过渡效果是白色的,如果想改变颜色,对于 ball-pulse这种效果,修改 loaders.css 中的文件第55行

.ball-pulse > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }

将 background-color:#fff,修改为自己需要的颜色即可!

PS:最简的都会了,难的其实就不难了,参考下边的,一步一步来做吧。

四:28种类型(图片展示)

一些英文单词用来扫盲

ball : 球状  ,
pulse : 辐射状 ,
grid :网格 ,
clip : 裁剪 ,
rotate : 旋转 ,
square : 正方形 ,
spin :  快速旋转 ,
multiple : 多个 ,
rise : 上升 ,
cube : 立方体 ,
transition : 过渡 ,
zig : 之字形 ,
zag : 急转 ,
deflect : 使弯曲,
triangle : 三角形 ,
path : 路径 ,
scale : 规模、鱼鳞 ,
line : 线 ,
party : 共同的 ,
sync : 同步,
beat : 敲打 ,
out : 向外,
rapid : 快速,
ripple : 脉动、涟渏,
fade : 银色,
triangle : 三角形,
skew : 斜的,
pacman : 食豆小子,
semi :  半挂车 。

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址