纯css3实现文字间歇滚动效果
2024-10-18 12:10:49
场景:
假设有4条数据或者标题,视口中只显示两条,采用每次向上滚动一条数据来展示所有的数据。效果如图:
用JavaScript也很容易实现,但是需要操作DOM,可以参考这篇博客。考虑到项目中经常使用Vue,已经很少操作DOM了,所以考虑最好通过CSS来实现,可以通过Vue给模板元素动态绑定class来实现相同的功能,如果需要考虑css3兼容性的话,可以去使用JavaScript去完成。
主要用到了css3的两个属性:@framekeys和animation
通过 @keyframes 规则,能够创建动画。创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
animation能够将动画与元素绑定。
注意:由于视口中显示两条数据,所以要把最前面的两行数据拼接在所有最后面,主要是为了避免一次动画完成之后即所有的数据都已经滚动到视口的上方,等待下一次动画的过程中会有空白出现的现象,把最前面的两行数据拼接在最后面,当除了拼接的数据以外的其他数据滚动到视口上方时,拼接的数据临时占位等待下一次动画出现,不至于出现空白。
HTML代码如下:
<div>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第一行</li>
<li>第二行</li>
</ul>
</div>
使用less编写样式代码如下:
//必须给定的参数
@height:30px;//每次滚动的距离
@num:4;//需要滚动多少条数据
@animatinTime:5s;//多长时间完成所有数据的向上滚动一次 //可选的参数
@delayRatio:4;
@upRatio:1;//延迟滚动时间和滚动一条数据所用到的时间之比 //内部计算使用到的变量,不需要对其赋值
@ratioSum:@delayRatio+@upRatio;
@eachSum:1/@num;
@everyUpTime:@eachSum*@upRatio/@ratioSum*100;
@everyDelayTime:@eachSum*@delayRatio/@ratioSum*100; //使用循环生成@keyframes动画的时间节点
.myLoop(@counter,@everyUpTime:1,@everyDelayTime:4,@height:30px,@i:0,@index:0) when(@i < @counter){
@start:percentage(@i/100);
@{start}{
-webkit-transform: translateY(-@index*@height);
transform: translateY(-@index*@height);
}
@end:percentage((@i+@everyDelayTime)/100);
@{end}{
-webkit-transform: translateY(-@index*@height);
transform: translateY(-@index*@height);
}
.myLoop(@counter,@everyUpTime,@everyDelayTime,@height,(@i+@everyDelayTime+@everyUpTime),(@index+1));
} //调用循环,生成@keyframes
@keyframes scroll {
.myLoop(100,@everyUpTime,@everyDelayTime,@height,0,0);
@end:percentage(1);
@{end}{
-webkit-transform: translateY(-@num*@height);
transform: translateY(-@num*@height);
}
} //封装成mixin,方便在其他需要动画的位置调用
.scroll(){
-webkit-animation: scroll @animatinTime infinite;
} //举例
div{
width: 200px;
height: 60px;
overflow: hidden;
}
ul{
height: 100%;
width: 100%;
.scroll();
}
li{
line-height: 30px;
height: 30px;
}
编译后的css代码为:
@keyframes scroll {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
20% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
25% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
45% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
50% {
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
}
70% {
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
}
75% {
-webkit-transform: translateY(-90px);
transform: translateY(-90px);
}
95% {
-webkit-transform: translateY(-90px);
transform: translateY(-90px);
}
100% {
-webkit-transform: translateY(-120px);
transform: translateY(-120px);
}
}
div {
width: 200px;
height: 60px;
overflow: hidden;
}
ul {
height: 100%;
width: 100%;
-webkit-animation: scroll 5s infinite;
}
li {
line-height: 30px;
height: 30px;
}
此时,就已经完成了需要的功能,此处只是以向上滚动为例,其他方向的滚动类似。
如有问题,欢迎留言(・∀・)
最新文章
- 分页查询和分页缓存查询,List<;Map<;String, Object>;>;遍历和Map遍历
- Best way to add Gradle support to IntelliJ Project
- Linux-Memory小记
- PAT 1014. 福尔摩斯的约会 (20)
- JS实现屏蔽键盘操作
- 由tomcat启动想到的
- OD: Universal Shellcode
- Python中的深浅拷贝,赋值及引用
- ZOJ1093 动态规划
- 在ASP dot Net Core MVC中用Controllers调用你的Asp dotnet Core Web API 实现CRUD到远程数据库中,构建你的分布式应用(附Git地址)
- SpringBoot文档翻译系列——29.SQL数据源
- mysql客户端连不上数据库
- Mysql(Mariadb)数据库主从复制
- mysql 替换字符中部分字符,替换使用指定字符
- UNION ALL的用法
- 阿里云服务器Centos7.4开放80端口的记录
- ArcFace2 #C 视频人脸比对教程
- Js中对id和class属性进行模糊查询
- STL在数组算法的使用
- 51nod 1571 最近等对 | 线段树 离线