css3动画属性

animation-name属性定义要使用哪个动画.

在下面的例子中,动画的名称设置为最后篇章,它与定义的关键帧相匹配

css代码:

div.width-animation{animation-name:最后篇章; animation-duration:10s;}

@keyframes 最后篇章 {from{width:0px;}to{width:120px;}}

效果如下:

<div>元素的内容由竖排,自动变为横排.

animation-duration属性以秒为单位,指定所选动画的持续时间.

如果动画名称与任何关键帧规则不匹配,则动画将不会执行.

animation-timing-function属性指定动画的速度曲线.它有以下值:

●ease:指定一个慢启动的动画,然后快速,然后慢慢结束(默认值)

●ease-in:指定一个慢启动的动画

●ease-out:指定一个缓慢结束的动画.

●ease-in-out:指定一个缓慢的开始和结束的动画.

●cubic-bezier(n,n,n,n):让你在一个cubic-bezier函数中定义你自己的值.

css代码:

animation-timing-function:linear;

animation-delay定义动画开始之前的延迟.

css代码:

animation-delay:2s;

animation-delay和animation-duration的属性值可以用秒和毫秒来定义.

animation-iteration-count属性确定动画重复的次数.

例如,你可以将动画设置为运行6次.

animation-iteration-count:6;

为了使动画永久重复,只需使用无限值:

animation-iteration-count:infinite;

animation-direction:指定如何应用关键帧,值可以设置为:

1.normal(默认值):这意味着它从0%到100%前进

2.reverse:从100%到0%的方向播放关键帧动画

3.alternate:动画首先向前,然后向后,然后向前.

4.alternate reverse:动画首先先倒退,然后向前,然后倒退.

如果对animation-iteration-count的值使用0或负数,动画将永远不会启动.

div{ animation-name:colorchange; animation-duration:3s;animation-timing-function:ease-in; animation-delay:2s;animation-iteration-count:infinite; animation-direction:reverse;}

上面的css代码可以简写为下面的格式,但是每一个属性的顺序,不能改变,否则无法生效.

div{ animation:colorchange 3s ease-in 2s infinite reverse; }

二 css3 3d转换

除了x轴和y轴,3d转换还引入了z轴,这使得3d操作 成为可能.

3d转换与2d转换非常相似.

通过rotateX(),rotateY()和rotateZ()函数以给定的度数deg围绕相应的轴旋转3d空间中的元素.

css代码:

div{transform:rotateX(160deg);}

你可以使用transform:none;关闭元素的所有转换效果.

3d转换方法允许你使用任何css长度单位(px,em,%等)

translateX:水平移动元素.

translateY:垂直移动

translateZ:移入或移除屏幕(正值将元素移入,负值移出)

translate3d()方法允许我们按照以下的顺序同时传递x,y和z偏移量

div{ transform:translate3d(-25px,4em,15px); }

像translate3d()方法一样,还有scale3d()和rotate3d(),它们适用于3d中的缩放和旋转元素.

perspective定义了如何渲染3d场景的深度.将视角看作从观众到物体的距离.值越大,距离越远,视觉效果越不强烈.子元素所呈现的边缘越小.

css代码:

div.empty-div1{position:relative; height:200px;width:200px; margin:30px;padding:10px;border:2px solid black; perspective:100px;-webkit-perspective:100px;}

div.red-div{padding:60px;position:absolute;background-color:red; border:2px solid blue;transform:rotateX(45deg);-webkit-transform:rotateX(45deg);}

效果如下:

到此,你已经掌握了css的基础内容.html和css的内容都算比较简单.接下来我们将学习JavaScript,网页的逻辑部分.

我我整理的一些CSS代码的属性，虽然看上去有点乱，但还是实用的

margin:合作的外边距 padding：内边距 auto:模块自由居中

img:插入图片 src:图片的放置地址

align='absmiddle'图片绝对居中

width:宽度 height:高度 class；属性 float；浮动

dl：定义标签 dd；注释为本 #shop #shopCon；id选择器

href；链接地址 font-size；文字样式 color；文字颜色

font-weight:bold：文字加粗 span；单独控制的内容 line-height;横高

background:背景的属性 display：block;块状显示 text-align:center；左右居中

a:hover；按钮背景 border-radius； w调节框架的圆角 no-repeat:平铺图片

list-style-type:none;取消列表签名的原点 solid red; float:left;使竖排内容横排显示

font-family:"微软雅黑"；控制文字的类型

text-decoration:none:去掉位置的下滑线 text-decoration:underline:加上下划线

display:block;行间元素变成块级元素 具备了高度和宽度 box-shadow：加阴影

border;1px solid;加边框 solid:边框线的属性 dashed;虚线 border:none;去掉图片的边框线

display:inline-block:根据文字自定义宽度 margin-left:左浮动 margin:top;下浮动 float-left:左浮动 float-right:右浮动 clear:both;清除浮动

position:absolute;left:750px;bottom:px:固定定位bottom:固定定位中底部到头部的距离；

position:fixed;right:10px;top:20%;固定定位

filter:alpha(opacity:30);opacity:0.3;-moz-opacity:0.3; 透明

<embed src" ">引用音频

欢迎大家转载收藏，喜欢的盆友可以关注我，想要视频教程的可以关注我后私信我，我将免费送上一套基础的网站前端教程。

如有做的不好的欢迎大家在留言区吐槽