css3文本框里面的东西自动上下移动

html-css016

css3文本框里面的东西自动上下移动,第1张

可以用定义动画的方法，animation 动画名 时间 曲线 如何运动（设置无限循环）

@keyfram 动画名 ｛

设置盒子的margin值

margin-top：0；

margin-top：40px；

｝

state数据

2

/5

渲染列表

3

/5

触发向上、向下滚动方法

开始滚动：setInterval() 定时调用滚动方法

停止滚动：clearInterval() 取消定时器

4

/5

向上滚动方法：

1、数组第一条添加到数组末尾 - push()

2、列表向上滚动添加css3过渡动画

3、计算向上滚动距离（第一条数据高度，如果高度固定用固定值即可）

4、删除数组第一条数据 - shift()

5、向上滚动距离清零

6、取消过渡动画停止滚动

5

/5

向下滚动方法：

1、列表向下滚动添加css3过渡动画

2、计算向下滚动距离（最后一条数据高度，如果高度固定用固定值即可）

3、数组最后一条数据添加到数组头部 - unshift()

4、第一条数据添加渐显动画

5、删除数组最后一条数据 - pop()

6、向上滚动距离清零

7、取消过渡动画停止滚动

border-radius是可以实现上下左右半圆的，但是如果在整圆里放下半圆，在圆里的位置不太好控制，按照上下左右一个一个介绍

看这样很容易就出啦上下半圆了

如果想在一个整圆中分别作出上下半圆不同颜色，而且圆中带字的话，如图：

恐怕上面的办法就不好使了，做这种双色圆的方法如下：

我用四个圆做对比，结果如下：