CSS3 + HTML5 special effect 3-seamless vertical 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. CSS code copy code 1 @-webkit-keyframes scrollText1 {2 0% {3-webkit-transform: translateY (0px); 4} 5 20% {6-webkit-transform: translateY (-30px); 7} 8 40% {9-webkit-transform: translateY (-60px); 10} 11 60% {12-webkit-transform: translateY (-90px ); 13} 14 80% {15-webkit-transform: translateY (-120px); 16} 17 100% {18-webkit-transform: translateY (-150px ); 19} 20} 21 22 @ keyframes scrollText1 {23 0% {24 transf Orm: translateY (0px); 25} 26 20% {27 transform: translateY (-30px); 28} 29 40% {30 transform: translateY (-60px ); 31} 32 60% {33 transform: translateY (-90px); 34} 35 80% {36 transform: translateY (-120px); 37} 38 100% {39 transform: translateY (-150px); 40} 41} 42 43. box3 {44 position: relative; 45 top: 20px; 46 left: 20px; 47 width: 200px; 48 height: 30px; 49 overflow: hidden; 50 border: 1px solid # ccc; 51} 52 53. bord Er3 {54 top: 0px; 55-webkit-animation: scrollText1 8 s infinite cubic-bezr (0.5, 0); 56 animation: scrollText1 8 s infinite cubic-bezr (0.5, 0); 57} 58 59. border3 div {60 height: 30px; 61} 62 63. border3: hover {64 animation-play-state: paused; 65-webkit-animation-play-state: paused; 66} copy the code CSS Code Description: @-webkit-keyframes and @ keyframes are defined from 0% ~ Between 100%, every 20% of the time, up 30 PX, a total of 6 moves ;. box3 defines the basic attributes of external containers. border3 defines the attributes of the internal container.-webkit-animation: scrollText1 8 s infinite cubic-bezr (0.5, 0) and animation: scrollText1 8 s infinite cubic-bezr, 0.5, 0) defines the use of 8 S type of loop once, the infinite loop has been moved is the effect ;. border3 div defines the basic style of vertical scrolling content ;. border3: 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; HTML code copy code 1 <div class = "box3"> 2 <div class = "bo Rder3 "> 3 <div> 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> copy the code. HTML code Description: defines six pieces of information that can be scroll vertically. The first five pieces of information are actually scroll vertically, 6th and 1st pieces of information are the same, the reason is very simple, because the @ keyframes method is used to achieve the animation effect, the effect of 1st pieces of information is stopped by default, therefore, we can use 6th pieces of information to create an alternative method. After the first cycle ends, we can continue to scroll seamlessly. You can remove 6th pieces and try them to see the effect.