CSS样式 -- 设置一排图片滚动效果
程序员文章站
2022-05-01 20:13:37
...
1、html
<ul class="right_panelUp">
<li v-for="item in gtData">
<span>{{item}}</span>
<p class="line_one"></p>
<p class="line_two"></p>
</li>
</ul>
2、css样式
.right_panelUp{
width:100%;
height:28%;
box-sizing: border-box;
border-radius: 5px;
background: #576465;
display: flex;
flex-direction: row;
justify-content: flex-start;
overflow: hidden;
&:hover li{
animation-play-state: paused !important;
}
>li{
width:32%;
height:100%;
background: url(../../../assets/images/tower_jc.png) no-repeat;
background-size: 119px 150px;
background-position: 0 55%;
position: relative;
flex-shrink: 0;
-webkit-animation: move 40s infinite ease ;
-webkit-transform-origin: move center;
-ms-transform-origin: move center;
transform-origin: move center;
.line_one{
width: 297px;
height: 37px;
background: url(../../../assets/images/line_one.png);
position: absolute;
background-repeat: no-repeat;
background-size: 100% 100%;
left: 10px;
bottom: 60px;
}
.line_two{
width: 297px;
height: 37px;
background: url(../../../assets/images/line_two.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
left: 116px;
top: 60px;
}
span{
color:#fff;
font-size: 14px;
position: absolute;
bottom:10px;
left:45px;
}
}
}
上一篇: python中apply函数详情
下一篇: 阻止a标签默认跳转
推荐阅读
-
css横向滚动条样式(网页横向滚动条设置)
-
css 设置overflow:scroll 滚动条的样式
-
css自定义设置浏览器(Webkit内核)滚动条样式
-
CSS3 制作的图片滚动效果
-
css3动画编写图片无缝滚动的效果
-
请问各位高手,怎么设置,使得网页窗口中的一张图片一直在浏览器窗口的*,不管浏览器滚动条怎么拉动(也不管滚轮怎么滚动)_html/css_WEB-ITnose
-
使用CSS设置滚动条样式
-
DIV+CSS定义滚动条样式,实现内嵌效果_html/css_WEB-ITnose
-
css去除chrome浏览器输入框默认样式填充及chrome浏览器滚动条样式设置
-
求大神赐教,为什么我的图片背景background-image设置没有效果_html/css_WEB-ITnose