CSS3 + HTML5 special effect 4-seamless horizontal scrolling

If you read the previous article, you can easily understand the implementation of horizontal scrolling. Implementation principle: 1. Use the @ keyframes rule of CSS3 to create an animation effect; 2. Use the animation effect of CSS3 to complete rolling switching. 1 @-webkit-keyframes scrollText2 {2 0% {3-webkit-transform: translateX (0px); 4} 5 20% {6-webkit-transform: translateX (-204px ); 7} 8 40% {9-webkit-transform: translateX (-408px); 10} 11 60% {12-webkit-transform: translateX (-612px ); 13} 14 80% {15-webkit-transform: translateX (-816px); 16} 17 100% {18-webkit-transform: translateX (-1020px ); 19} 20} 21 @ keyframes scrollText2 {22 0% {23 transform: trans LateX (0px); 24} 25 20% {26 transform: translateX (-204px); 27} 28 40% {29 transform: translateX (-408px ); 30} 31 60% {32 transform: translateX (-612px); 33} 34 80% {35 transform: translateX (-816px); 36} 37 100% {38 transform: translateX (-1020px); 39} 40} 41 42. box4 {43 position: absolute; 44 top: 100px; 45 left: 100px; 46 width: 200px; 47 height: 30px; 48 overflow: hidden; 49} 50. border4 {51 position: absolute; 52 top: 0px; 53 left: 0px; 54 width: 1400px; 55-webkit-animation: scrollText2 12 s infinite cubic-bezr (0.5, 0); 56 animation: scrollText2 12 s infinite cubic-bezr (0.5, 0); 57} 58. border4 div {59 height: 30px; 60 width: 200px; 61 overflow: hidden; 62 display: inline-block; 63} 64. border4: hover {65 animation-play-state: paused; 66-webkit-animation-play-state: paused; 67} CSS Code Description: @-webkit-keyframes and @ keyfram Elasticsearch defines ~ Between 100%, every 20% of the time, move 204px to the left, a total of 6 moves ;. box4 defines the basic attributes of external containers. border4 defines the attributes of the internal container.-webkit-animation: scrollText1 12 s infinite cubic-bezr (0.5, 0) and animation: scrollText1 12 s infinite cubic-bezr, 0.5, 0) defines the effect of an infinite loop with 12 s ;. border4 div defines the basic style of vertical scrolling content ;. border4: hover defines the effect of moving the mouse into the container. animation-play-state: paused and-webkit-animation-play-state: paused define the animation pause; 1 <div class = "box4"> 2 <div class = "border4"> 3 <di V> This is a test 1. </div> 4 <div> This is a test 2. </div> 5 <div> This is a test 3. </div> 6 <div> This is a test 4. </div> 7 <div> This is a test 5. </div> 8 <div> This is a test 1. </div> 9 </div> 10 </div> HTML code Description: defines six pieces of information that can be rolled horizontally. The first five pieces of information are actually scrolling horizontally, 6th and 1st pieces of information are the same, because it is the same as the previous vertical scrolling, because the @ keyframes method is used to achieve the animation effect, and the effect of 1st pieces of information is stopped by default, therefore, you can use 6th pieces of information to create an alternative method. After the first cycle ends, you can continue rolling seamlessly.