插一点另外的小知识 酷炫的html跑马灯效果
属性:
direction:滚动方向
up: 上
down:下
left: 左
right: 右
behavior:滚动方式
scroll:循环滚动,默认效果
slide:只滚动一次就停止
alternate:来回交替进行滚动
scrollamount:滚动速度(单位px)
scrolldelay:滚动的时间间隔,单位毫秒
loop:循环的次数
默认值是-1,滚动会不断的循环下去
width、height:
设定滚动字幕的宽度、高度
bgcolor:设定滚动字幕的背景颜色(rgb或rgba都可以)
hspace、vspace:
hspace:字幕所在的位置距离水平边框距离
vspace:字幕所在的位置距离垂直边框距离
align:对齐方式
absbottom:绝对底部对齐
absmiddle:绝对中央对齐
baseline:底线对齐
bottom:底部对齐(默认)
left:左对齐
middle:中间对齐
right:右对齐
texttop:顶线对齐
top:顶部对齐
face:文字字体
color:文字颜色
size:文字大小
STRONG:文字加粗
onMouseOut=“this.start()” 鼠标移出继续滚动
onMouseOver=“this.stop()” 鼠标悬浮停止滚动
好了具体的属性就介绍到这里,当然这样的效果配合轮播图是一个什么样子的效果呢?
我们来说轮播图
HTML部分
我们使用一个div盒子把无序列表嵌套在里面,需要用到几张图片进行操作,我们就需要几个
"lun-bo">
-
"./images/lun-bo/001.jpg">
-
"./images/lun-bo/4.jpg">
-
"./images/lun-bo/005.jpg">
-
"./images/lun-bo/11.jpg">
-
"./images/lun-bo/013.jpg">
-
"./images/lun-bo/001.jpg">
这里是css部分代码
#lun-bo {
width: 1400px;
/*单张图片的宽度*/
height: 600px;
/*单张图片所占据的高度*/
margin: auto;
/*让其居中显示*/
overflow: hidden;
/*由于每张图片的长度超出浏览器的单个窗口 而我们的这个效果就需要用到隐藏的属性,只留下一张图片放在开始就好了*/
position: absolute;
/*让其位置固定,不会由于后面的操作导致出现文本流错乱的效果*/
top: 140px;
/*定位中使用到的位置移动的距离
有top left right bottom
当然我这里只是使用了两个就好了
*/
left: 250px;
z-index: -2;
/*这是层级 由于使用了定位 会导致一定的效果 这里的数据根据实际情况自行可以进行修改*/
}
#lun-bo>ul {
width: 11520px;
/*x张图片总共的宽度*/
position: relative;
/*让这里承担了一个父级定位*/
animation: idea 48s linear infinite;
/*最后让其动起来的指令
idea是名称 当然有什么好听的名字都可以使用 48s是总共一次播放的时间 linear 是匀速播放 infinite这里是无限循环播放
*/
}
#lun-bo>ul li {
float: left;
/*让其所有的图片在一条水平线上显示*/
list-style: none;
/*隐藏或消除列表的图标*/
background-size: contain;
/*设置图片的大小*/
}
@keyframes idea {
/*重点啦
idea是我们在上面引用的名称 这里是要调用的
*/
0% {
transform: translateX(0);
/*让其初始时不移动*/
}
100% {
transform: translateX(-9600px);
/*最后移动的时候是五张图片的宽度*/
}
}
详细知识,让你也能做到这么优秀的操作
函数:
平移 translate
缩放 scale
倾斜 skew
旋转 rotate
transform: [ transform-function ]
大括号内部是设置变形函数,可以是一个也可以是多个,中间用空格相隔开
功能:
能够重新定义元素的坐标,实现平移的效果
语法:
transform:translate(x-value, y-value);
x-value是指水平方向上移动的距离,
y-value是指元素在垂直方向上移动的距离
若省略第二个参数,则取默认值0
当值是负数时,表示反方向移动元素
当变形函数平移只是取得一个值得时候,可以使用另外的函数来表示
scale()缩放函数
功能:
用于缩放元素的大小
transform:scale(x-axis, y-axis);
x-axis和y-axis的参数取值>1时表示放大,取值在0~1之间时表示缩小
scale()函数可以只是接受一个值,也可以接受两个值,当只有一个值时,第二个值默认和第一个值相等
scaleX(se): 表示只是设置X轴的缩放
scaleY(se):表示只是设置Y轴的缩放
skew()倾斜函数
功能:
能够让元素倾斜显示
transform:skew(X-angle, Y-angle);
参数X-angle和Y-angle表示角度值,第一个参数表示X轴,第二个表示Y轴,若是省略第二个,取得默认值0
单位deg
rotate旋转函数
功能:
能够旋转指定的元素对象,只要在二维空间内进行操作
transform:rotate(angle)
参数angle表示要旋转的角度值 正顺,负逆
transition过度,是一个元素的属性样式从一种状态转变成另外一种状态的过程
属性:
transition-property:过度效果的css属性的名称
ps:transition-property:color;
transition-duration:过度效果使用的时间
ps:transition-duration:0.5s;
transition-timing-function:过度效果的速度曲线
ps:transition-timing-function:linear;
transition-delay:过度效果什么时间开始
ps:transition-delay:1s
间隔1s之后开始
transition:综合属性
ps:transition: all ease 1s 0.5s;
transition-property属性:
定义转换动画的css属性名称
property: 定义应用过度效果的css属性名称(width height background-color 等属性)多个属性之间用逗号间隔
all 所有属性都将获得过度效果
transition-duration:
用于定义过度效果花费的时间,即从设置旧的属性到换新属性所花费的时间,默认值是0,常用单位是秒或毫秒
transition-duration:time;
transition-timing-function属性
指定过度效果的速度曲线以及过度期间的操作进展情况,通过给过度添加一个函数来指定动画的快慢方式
ease
速度由快到慢(默认)
linear
匀速
ease-in
越来越快(渐显效果)
ease-out
越来越慢(渐隐效果)
ease-in-out
先加速后减速(渐显渐隐效果)
transition-delay属性
指定一个动画开始执行的时间,当改变元素属性值后多长时间去执行过度效果
正值:
元素过度效果不会立即触发,当过了设置的时间值后才会触发
负值
元素过度效果不会立即触发,当过了设置的时间值后才会被触发
0
默认值 立即执行
transition综合写法
transition:property (所规定的的css属性名称) duration(需要的时间) timing-function(速度) delay(执行时间)
注意:
顺序的执行过程当中不能错误
通过flash动画的关键帧来声明一个动画,实现多个场景的转变
@keyframes 规则用于创建动画
语法:
@keyframes animationname{
keyframes-selector{声明};
}
animationname:动画的名称,不能为空
keyframes-selector:
动画时间的百分比,from,to
from和to和0%的效果相同,表示动画的开始,to和100%的效果相同,表示动画的结束
声明中css-style:动画状态,用一个或多个合法的css样式属性进行定义,不能为空
语法格式:
animation:animation-name(由@keyframes创建的动画名称)
animation-duration
动画需要的时间
animation-timing-function:
动画速度曲线
animation-delay:
延迟时间
animation-iteration-count:
动画播放次数
值通常为整数,默认是1,特殊值infinite 无限循环播放
animation-direction
动画的播放方向朝一个方向还是两个方向循环往复
normal 按照顺序播放
alternate 往返播放
animation-play-state:
动画的播放状态
running 将暂停的动画重新播放(默认)
paused 将正在播放的元素动画停下来
animation-fill-mode
动画开始之前和结束之后发生的操作
forwards 动画结束继续应用最后关键帧的位置
backwards 表示会在元素应用动画样式时迅速应用动画的初始帧
both表示元素同时具有前两个的效果