1. 程式人生 > >css3做一個滾動條

css3做一個滾動條

先上效果圖:

這裡寫圖片描述

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
; }