css3做一個滾動條
阿新 • • 發佈:2019-02-15
先上效果圖:
html程式碼很簡單:
<div>
<span class="wrap">
<span class="wrap">週一吳瓊瓊不想上班;週二吳瓊瓊不想上班;週三吳瓊瓊不想上班;週四吳瓊瓊不想上班;週五吳瓊瓊不想上班;</span>
</span>
</div>
css:
@keyframes anim-CarouselLeft {
0% {
transform: translateX(0);
}
100% {
transform : translateX(-50%);
}
}
@-webkit-keyframes anim-CarouselLeft {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-50%);
}
}
div {
width: 160px;
white-space: nowrap;
overflow: hidden;
margin-left: 381px;
margin-top: 231 px;
}
.wrap {
display: inline-block;
-webkit-transform: transitionZ(0);
transform: transitionZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
-webkit-animation: anim-CarouselLeft 50s linear 0s infinite;
animation : anim-CarouselLeft 10s linear 0s infinite;
}