vue.js修改css3 keyframes和animation
程序员文章站
2022-03-16 16:47:52
...
css3上下无缝滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.picTab{
width: 320px;
height: 900px;
margin: 100px auto;
/*border: 1px solid blue;*/
overflow: hidden;
}
ul {
list-style: none;
animation: move 5s linear infinite;
animation-delay: 1s;/*延迟2s在进行滚动*/
/*border: 1px solid red;*/
overflow: hidden;
}
li {
width: 300px;
height: 300px;
}
li img{
width: 100%;
height: 100%;
}
li:hover{
animation-play-state: paused;/*鼠标悬浮，动画停止*/
}
/* 添加动画 */
@keyframes move{
from {
transform: translateY(0);
}
to {
transform: translateY(-1200px);
}
}
</style>
<body>
<div class="picTab">
<ul>
<li id="list">
<img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/w%3D500/sign=cfe520699c45d688a302b2a494c27dab/faedab64034f78f0fb2e73a977310a55b3191c46.jpg" height="300" width="300" />
</li>
<li id="list">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561008982301&di=b080b02fc6925135728916cbe5ea5315&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201502%2F02%2F20150202112717_5HKTG.jpeg" height="300" width="300" />
</li>
<li id="list">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561009023816&di=670aa4779b186ad5e010d0f3e95c0997&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F14%2F2018071494136_Eds3X.png" height="300" width="300" />
</li>
<li id="list">
<img src="http://img1.gtimg.com/rushidao/pics/hv1/20/108/1744/113431160.jpg" height="300" width="300" />
</li>
<!--<li id="list">
</li>-->
<!--为了实现无缝滚动，将展现的图片在拷贝一份-->
<li id="list">
<img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/w%3D500/sign=cfe520699c45d688a302b2a494c27dab/faedab64034f78f0fb2e73a977310a55b3191c46.jpg" height="300" width="300" />
</li>
<li id="list">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561008982301&di=b080b02fc6925135728916cbe5ea5315&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201502%2F02%2F20150202112717_5HKTG.jpeg" height="300" width="300" />
</li>
<li id="list">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561009023816&di=670aa4779b186ad5e010d0f3e95c0997&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F14%2F2018071494136_Eds3X.png" height="300" width="300" />
</li>
<li id="list">
<img src="http://img1.gtimg.com/rushidao/pics/hv1/20/108/1744/113431160.jpg" height="300" width="300" />
</li>
<!--<li id="list">
</li>-->
</ul>
</div>
</body>
</html>
css3 左右无缝滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
animation: move 15s linear infinite;
animation-delay: 1s;/*延迟2s在进行滚动*/
width: 200%;
/*overflow: hidden;*/
}
li img{
float: left;
}
ul {
width: 900px;
height: 300px;
margin: 100px auto;
border: 1px solid blue;
/*overflow: hidden;*/
}
li:hover{
animation-play-state: paused;/*鼠标悬浮，动画停止*/
}
/* 添加动画 */
@keyframes move{
from {
transform: translate(0);
}
to {
transform: translate(-900px);
}
}
</style>
<body>
<ul>
<li id="list">
<img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/w%3D500/sign=cfe520699c45d688a302b2a494c27dab/faedab64034f78f0fb2e73a977310a55b3191c46.jpg" height="300" width="300" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561008982301&di=b080b02fc6925135728916cbe5ea5315&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201502%2F02%2F20150202112717_5HKTG.jpeg" height="300" width="300" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561009023816&di=670aa4779b186ad5e010d0f3e95c0997&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F14%2F2018071494136_Eds3X.png" height="300" width="300" />
<!--为了实现无缝滚动，将展现的图片在拷贝一份-->
<img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/w%3D500/sign=cfe520699c45d688a302b2a494c27dab/faedab64034f78f0fb2e73a977310a55b3191c46.jpg" height="300" width="300" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561008982301&di=b080b02fc6925135728916cbe5ea5315&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201502%2F02%2F20150202112717_5HKTG.jpeg" height="300" width="300" />
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561009023816&di=670aa4779b186ad5e010d0f3e95c0997&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F14%2F2018071494136_Eds3X.png" height="300" width="300" />
</li>
</ul>
</body>
</html>
下面在vue里面修改css动画
<div class="activity-content">
<div class="title">
<div class="date">日期</div>
<div class="activity">活动内容</div>
</div>
<div class="content-list">
<div class="parent" id="list" ref="list">
<!-- 原数据标签 -->
<div class="title list-data" v-for="(item,i) in list" :key="'a'+i" >
<div class="date">{{item.time}}</div>
<div class="activity">{{item.title}}</div>
</div>
<!-- 空格 -->
<div class="title list-data" >
</div>
<!-- 复制一份 -->
<div class="title list-data" v-for="(item,i) in list" :key="'b'+i" >
<div class="date">{{item.time}}</div>
<div class="activity">{{item.title}}</div>
</div>
<!-- 空格 -->
<div class="title list-data" >
</div>
</div>
</div>
</div>data
list:[
{id:1,imgUrl:kaihui,timeStamp:1575129600000,time:'2019-12-01',title:'“不忘初心再出发牢记使命勇担当” 主题党',arrange:'1.11111111奉献责任担当是*的基本素质；2.全而从严治党常态下违和强调责任担当；3.如何在实践中落实*员的责任担当；1.奉献责任担当是*的基本素质；'},
{id:2,imgUrl:zhida,timeStamp:1576512000000,time:'2019-12-17',title:'鉴定中国信心 凝聚奋斗力量 主题党日活动',arrange:'1.222222222奉献责任担当是*的基本素质；2.全而从严治党常态下违和强调责任担当；'},
{id:3,imgUrl:zhijian,timeStamp:1576771200000,time:'2019-12-20',title:'鉴定中国信心 凝聚奋斗力量 主题党日活动',arrange:'1.44444444444奉献责任担当是*的基本素质；2.全而从严治党常态下违和强调责任担当；'},
{id:4,imgUrl:zhihui,timeStamp:1577116800000,time:'2019-12-24',title:'讲奉献 有作为 主题党日活动',arrange:'1.555555555555奉献责任担当是*的基本素质；2.全而从严治党常态下违和强调责任担当；'},
{id:5,imgUrl:zhizao,timeStamp:1577721600000,time:'2019-12-31',title:'不忘初心再出发 牢记使命勇担当 主题党日活动',arrange:'1.333333333奉献责任担当是*的基本素质；2.全而从严治党常态下违和强调责任担当；'},
],methods
//添加动画数据
listAnimateFun(){
let listHeight = this.list.length*54+54; //每个列表高度54px,循环完后空一格间隔
let tt = document.styleSheets[0];
tt.deleteRule(0);//清除之前写入的动画样式
tt.insertRule(`@keyframes listMove{ from {transform:translateY(0px);}to {transform:translateY(${-listHeight}px);}}`,0);//插入keyframes
tt.insertRule(`#list{animation: listMove ${this.list.length}s linear infinite;}`,1)//为#list插入动画animation
},mounted
mounted() {
this.listAnimateFun();
},ok，更多css操作：http://www.softwhy.com/article-8839-1.html
上一篇： 3dmax切角长方体怎么建模?
下一篇： 在互联网时代低质量的网站如何与对手竞争
推荐阅读
-
CSS3的transition和animation的用法实例介绍
-
CSS3之 transform和animation区别
-
CSS3中translate、transform和translation，和动画animation实例讲解
-
CSS3 Transition, transform 和 animation 介绍_html/css_WEB-ITnose
-
CSS3中transform,transition和animation的简介和用法示例_html/css_WEB-ITnose
-
CSS3中transform,transition和animation的简介和用法示例_html/css_WEB-ITnose
-
【css3】通过图片轮播来了解Transform，Transition和Animation_html/css_WEB-ITnose
-
【css3】通过图片轮播来了解Transform，Transition和Animation_html/css_WEB-ITnose
-
CSS3 Transform、Transition和Animation属性总结
-
CSS3动画animation相关属性与关键帧规则keyframes的详细介绍