经过 CSS3,咱们能够创立动画,这能够在许多网页中替代动画图片、Flash 动画以及 JavaScript。
CSS3带来了圆角,半透明,暗影,突变,多布景图等新的特征,轻松完成了规划稿中常见的图层款式,用简练的代码替代图片,替代了剩余的空标签。
现成的CSS3动画库:
.background-color { background:#708090; animation:1s ease 0s alternate none infinite background-color;} @keyframes background-color{ from{ background:#708090;} to{ background:#000;} }1
background-position 特点设置布景图画的开端方位,默许值:0% 0%,作用等同于left top
.background-position-1 { background-image: -moz-linear-gradient(-45deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px; animation:1s ease 0s alternate none infinite background-position-1;} @keyframes background-position-1{ from{ background-position:0 0;} to{ background-position:100% 100%;} }1
.background-position-2 { background-color: #E04332; background-repeat: repeat-x; background-size: 24px 300px; background-image: linear-gradient(-45deg, slategray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, slategray 75%), linear-gradient(45deg, slategray 25%, transparent 25%), linear-gradient(-45deg, transparent 75%, slategray 75%); animation:1s ease 0s alternate none infinite background-position-2;} @keyframes background-position-2{ from{ background-position:3px 0, 3px 0, 15px -150px, 15px -150px;} to{ background-position:3px -70px, 3px -70px, 15px -80px, 15px -80px;} }1
background-size 特点规矩布景图片的尺度。在 CSS3 之前,布景图片的尺度是由图片的实践尺度决议的。在CSS3中,能够规矩布景图片的尺度,这就答应咱们在不同的环境中重复使用布景图片。
.background-size {background-image: repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-position:center; animation:1s ease 0s alternate none infinite background-size;} @keyframes background-size{ from{ background-size:5px 5px;} to{ background-size:150px 150px;} }1
border-radius 特点是一个简写特点,用于设置四个 border-*-radius 特点。
.border-radius-1 { animation:1s ease 0s alternate none infinite border-radius-1;} @keyframes border-radius-1{ from{ border-radius:0;} to{ border-radius:50%;} }1
.border-radius-2 { animation:1s ease 0s alternate none infinite border-radius-2;} @keyframes border-radius-2{ from{ border-radius:0 100%;} to{ border-radius:100% 0;} }1
.border-width-1 {border-style:solid; border-color: black; animation:1s ease 0s alternate none infinite border-width-1;} @keyframes border-width-1{ from{ border-width:0;} to{ border-width:75px;} }1
.border-width-2 {border-style:dashed; border-color: black; animation:1s ease 0s alternate none infinite border-width-2;} @keyframes border-width-2{ from{ border-width:0;} to{ border-width:35px;} }1
.border-width-3 {border-style:double; border-color: black; animation:1s ease 0s alternate none infinite border-width-3;} @keyframes border-width-3{ from{ border-width:0;} to{ border-width:75px;} }1
box-shadow 特点向框增加一个或多个暗影
.box-shadow-1 { animation:1s ease 0s alternate none infinite box-shadow-1;} @keyframes box-shadow-1{ from{ box-shadow:0 0 black;} to{ box-shadow:0 150px 10px -50px rgba(0,0,0,.5);} }1
.box-shadow-2 { animation:1s ease 0s alternate none infinite box-shadow-2;} @keyframes box-shadow-2{ from{ box-shadow:none;} to{ box-shadow:inset -75px -75px 400px #000;} }1
.box-shadow-3 { box-radius: 1px; animation:1s ease 0s alternate none infinite box-shadow-3;} @keyframes box-shadow-3{ from{ box-shadow:inset 0 0 75px 75px slategray, 0 0 0 slategray;} to{ box-shadow:inset 0 0 35px 35px transparent, 0 0 75px 50px transparent;} }1
CSS3 Color特点在传统的hex和RGB值中增加了HSL特性,也便是增加了Opacity(透明度)和Alpha channels
.color { animation:1s ease 0s alternate none infinite color;} @keyframes color{ from{ color:white;} to{ color:black;} }1
.font-size { animation:1s ease 0s alternate none infinite font-size;} @keyframes font-size{ from{ font-size:60px;} to{ font-size:300px;} }1
.width { animation:1s ease 0s alternate none infinite width;} @keyframes width{ from{ width:150px;} to{ width:330px;} }
.height { animation:1s ease 0s alternate none infinite height;} @keyframes height{ from{ height:150px;} to{ height:0;} }
.letter-spacing { animation:1s ease 0s alternate none infinite letter-spacing;} @keyframes letter-spacing{ from{ letter-spacing:0;} to{ letter-spacing:100px;} }1
.line-height { animation:1s ease 0s alternate none infinite line-height;} @keyframes line-height{ from{ line-height:10px;} to{ line-height:300px;} }1
.opacity { animation:1s ease 0s alternate none infinite opacity;} @keyframes opacity{ from{ opacity:1;} to{ opacity:0;} }1
.outline-width { outline-color:black; outline-style: solid; animation:1s ease 0s alternate none infinite outline-width;} @keyframes outline-width{ from{ outline-width:0;} to{ outline-width:100px;} }1
.outline-offset { outline-style: dashed; outline-color:slategray; animation:1s ease 0s alternate none infinite outline-offset;} @keyframes outline-offset{ from{ outline-offset:-5px;} to{ outline-offset:30px;} }1
.outline-color { outline-width: 30px; outline-style: solid; animation:1s ease 0s alternate none infinite outline-color;} @keyframes outline-color{ from{ outline-color:transparent;} to{ outline-color:red;} }1
.padding { animation:1s ease 0s alternate none infinite padding;} @keyframes padding{ from{ padding:0;} to{ padding:0 200px 0 50px;} }
.text-indent { animation:1s ease 0s alternate none infinite text-indent;} @keyframes text-indent{ from{ text-indent:0;} to{ text-indent:100px;} }1
.text-shadow-1 { animation:1s ease 0s alternate none infinite text-shadow-1;} @keyframes text-shadow-1{ from{ text-shadow:0 0 black;} to{ text-shadow:20px 20px 10px rgba(0,0,0,.5);} }1
.text-shadow-2 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-2;} @keyframes text-shadow-2{ from{ text-shadow:0 0 0 white;} to{ text-shadow:0 0 10px white;} }1
.text-shadow-3 { color: transparent; animation:1s ease 0s alternate none infinite text-shadow-3;} @keyframes text-shadow-3{ from{ text-shadow:0 0 white;} to{ text-shadow:0 0 rgba(255,255,255,0), -45px -45px 0 red, -30px -30px 0 orange, -15px -15px 0 yellow, 0 0 0 green, 15px 15px 0 blue, 30px 30px 0 indigo, 45px 45px 0 violet;} }1
.top { position:relative; animation:1s ease 0s alternate none infinite top;} @keyframes top{ from{ top:0;} to{ top:100px;} }1
.transform-1 { animation:1s ease 0s alternate none infinite transform-1;} @keyframes transform-1{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }1
.transform-2 { animation:1s ease 0s alternate none infinite transform-2;} @keyframes transform-2{ from{ transform:scale(1);} to{ transform:scale(2);} }1
.transform-3 { animation:1s ease 0s alternate none infinite transform-3;} @keyframes transform-3{ from{ transform:skew(0);} to{ transform:skew(180deg);} }1
.transform-4 { animation:1s ease 0s alternate none infinite transform-4;} @keyframes transform-4{ from{ transform:rotate(0) scale(1);} to{ transform:rotate(360deg) scale(0);} }1
.transform-5 { animation:1s ease 0s alternate none infinite transform-5;} @keyframes transform-5{ from{ transform:perspective(400px) rotateY(0);} to{ transform:perspective(400px) rotateY(360deg);} }1
.transform-6 { animation:1s ease 0s alternate none infinite transform-6;} @keyframes transform-6{ from{ transform:perspective(400px) rotateX(0);} to{ transform:perspective(400px) rotateX(360deg);} }1
.transform-7 { animation:1s ease 0s alternate none infinite transform-7;} @keyframes transform-7{ from{ transform:perspective(400px) rotateY(0);} to{ transform:perspective(400px) translateZ(150px) rotateY(180deg);} }1
.transform-8 { animation:1s ease 0s alternate none infinite transform-8;} @keyframes transform-8{ from{ transform:perspective(400px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0);} to{ transform:perspective(400px) translate3d(0,0,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg);} }1
.transform-9 { animation:1s ease 0s alternate none infinite transform-9;} @keyframes transform-9{ from{ transform:perspective(400px) rotate3d(.5,.5,0,0deg);} to{ transform:perspective(400px) rotate3d(.5,.5,0,180deg);} }1
.transform-10 {transform-origin: 100% 50%; animation:1s ease 0s alternate none infinite transform-10;} @keyframes transform-10{ from{ transform:perspective(400px) rotate3d(0,1,0,0deg);} to{ transform:perspective(400px) rotate3d(0,1,0,-180deg);} }1
.transform-origin {transform:rotate(45deg); animation:1s ease 0s alternate none infinite transform-origin;} @keyframes transform-origin{ from{ transform-origin:50% 50%;} to{ transform-origin:0 100%;} }1
旋转:设定旋转视点,对应css:transform:rotate(ndeg) (东西里n为-360 – 360间的恣意数值)
X轴缩放:设定X轴方向缩放,对应css: transform:scaleX(n)(东西里n为-5 – 5间的恣意数值)
Y轴缩放:设定Y轴方向缩放,对应css: transform:scaleY(n)(东西里n为-5 – 5间的恣意数值)
X轴位移:设定X轴位移,对应css:transform:translateX(npx)
Y轴位移:设定Y轴位移,对应css:transform:translateY(npx)
X轴歪斜:设定X轴歪斜,对应css:transform:skewX(ndeg)
Y轴歪斜:设定Y轴歪斜,对应css:transform:skewY(ndeg)
矩阵变形:设定矩阵变形,对应css:transform:matrix(a,c,e,b,d,f) c,e值用正弦或余弦值表明,ab为缩放值,df为位移值
变形原点 :设定变形原点,对应css:transform-origin:X Y;transform-origin(X,Y):用来设置元素的运动的基点(参照点)。默许点是元素的中心点。其间X和Y的值能够是百分 值,em,px,其间X也能够是字符参数值left,center,right;Y和X相同除了百分值外还能够设置字符值 top,center,bottom,这个看上去有点像咱们background-position设置相同;下面我列出他们相对应的写法:
其间 left,center right是水平方向取值,对应的百分值为left=0%;center=50%;right=100%而top center bottom是笔直方向的取值,其间top=0%;center=50%;bottom=100%;假如只取一个值,表明笔直方向值不变
过渡特点:履行改换的css特点,语法:transition-property
推迟时刻:指定元素 转化进程的继续时刻,语法:transition-duration
过渡作用:答应你依据时刻的推进去改动特点值的改换速率,语法:transition-timing-function。点击对应按钮增加过渡作用,点击cubic-bezier()自界说立方贝塞尔曲线作用。
透视:perspective有两种写法,一种是设置一切的子元素有一个一同的透视值,perspective作为一个特点值来写;一种是直接作用于元素自身,perspective作为transform的一个函数来写如:
.wrap{-webkit-perspective:1000px;}
.wrap .child{-webkit-transform:perspective(1000px);}
X轴旋转: rotateX(angele),相当于rotate3d(1,0,0,angle)指定在3维空间内的X轴旋转,语法:transform:perspective(length) rotateX(angele);
Y轴旋转: rotateY(angele),相当于rotate3d(0,1,0,angle)指定在3维空间内的Y轴旋转,语法:transform:perspective(length) rotateY(angele);
Z轴旋转: rotateZ(angele),相当于rotate3d(0,0,1,angle)指定在3维空间内的Z轴旋转,语法:transform:perspective(length) rotateZ(angele);
X轴缩放:scaleX(
Y轴缩放:scaleY(
Z轴缩放:scaleZ(
X轴位移: : 表明只在X轴(水平方向)移动元素。语法:translateX(
Y轴位移: 表明只在Y轴(水平方向)移动元素。语法:translateY(
Z轴位移: 表明只在Z轴(水平方向)移动元素。语法:translateZ(
X轴歪斜:设定X轴歪斜,对应css:transform:skewX(ndeg)
Y轴歪斜: :设定Y轴歪斜,对应css:transform:skewY(ndeg)
变形原点: 同2D
过渡特点: 同2D
过渡时刻: 同2D
推迟时刻: 同2D
过渡作用: 同2D
动画称号:自界说动画的称号, 对应css:animation-name:
履行时刻:指定目标动画的继续时刻,对应css: animation-duration:
推迟履行设置动画推迟履行的时刻,对应css: animation-delay:
履行次数:设置目标动画的循环次数,对应css: animation-iteration-count:
变形原点:同变形&过渡
过渡作用:答应你依据时刻的推进去改动特点值的改换速率,语法:animation-timing-function。点击对应按钮增加过渡作用,点击cubic-bezier()自界说立方贝塞尔曲线作用。
播映方向::设置目标动画循环播映次数大于1次时,动画是否反向运动。语法:animation-direction:
躲藏布景:设置目标动画时刻之外的状况。语法:animation-fill-mode:
动画状况设置目标动画的状况,语法:animation-play-state:
履行动画的特点: 设置动画进程中目标特点
的动画库。Animate.css是由Dan Eden制造的CSS3动画作用合集。只要在页面引进该款式表,然后给要增加动作的元素中增加对应动画的class即可。
点击对应作用右侧检查实例,点击检查代码可直接检查对应作用的源码。
CSS3能够完成许多美丽的动画,但写起来有点费事,一个动画有时候会调整几十分钟,改一点点代码又要到浏览器上改写,这是个很厌烦的工作。走运的是,在线东西处理了咱们的问题,最大特征便是以图形界面方法让你容易完成美丽的CSS3动画作用,下面一同看看这个在线东西的介绍。
Timeline是引导动画的重要区域,就像制造逐帧动画相同,能够调整每帧的内容。用户调整结束后,直接点击左下角的播映按钮即可看到作用。
视区便是CSS3动画预览和调整区域,所见即所得,很强壮。
用于调整动画细节参数,能够对关键帧进行更精密的调整,如时刻、旋转、重复次数等。
当你调整完动画后,那么就在这儿直接COPY到你的网页上就能使用了,别的你还能够修正Class和Animation称号,还有浏览器前缀选项,依据需求调整。
这确实是一个很便利的CSS3动画在线制造东西,即便对CSS代码不太了解的规划师们也能够轻松完成一个美丽的动画作用出来。
东西称号:cssanimate
网站地址:
CSS动画完成比JS简略许多,可是关于新手来说仍是许多代码的,并且还要不断的改写来核算动画作用,不过不要紧,接下来将为我们共享一个能够在线生成CSS动画的东西:,并且他们的动画数量许多,能满意一般需要求了。现在AniCollection上有许多不错的动画特效,比较适用于鼠标HOVER或点击事情,最主要的是能直接在线生成,比较简洁。
STEP 1: 挑选你要的动画作用,点击“眼睛”图标。
STEP 2: 然后在下面经过下面TAG选项框,把CSS和HTML的代码仿制到你的网页上即可。
此外你还要以用jQuery来操控动画。
东西称号:AniCollection
官方网站: