Pure css realizes arrow infinite cycle rolling animation effect

  In front page development, especially in full screen scrolling pages, banner slides, and h5 pages, such arrow "dynamic effect is often required to guide users to scroll down or locate the next screen. This article mainly introduces the method of css

stay front end In page development, especially in Full screen scrolling Pages, banner slides, and h5 pages often need such dynamic effects as "arrow" to guide users to scroll down the page or navigate to the next screen. This paper mainly introduces the implementation of css.

The effect is as follows:

Pure css realizes arrow infinite cycle rolling animation effect guidance dynamic effect rolling page pure css animation arrow css arrow dynamic effect figure 1

Complete code:

 <! doctype html> <html> <head> <meta charset="utf-8"> <title>Realizing arrow infinite loop with pure css Scrolling animation Effect</title> <style> body{background: #004cff; background: -webkit-linear-gradient(45deg, #004cff 0%, #04E7FF 100%); background: -webkit-linear-gradient(45deg, #004cff 0%, #04E7FF 100%); background: linear-gradient(45deg, #004cff 0%, #04E7FF 100%);} .arrow{position:absolute;left:50%;top:50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:translate3d(-50%,-50%,0); transform:translate3d(-50%,-50%,0)} .arrow-1{-webkit- animation :arrow-movement 2s ease-in-out infinite; animation:arrow-movement 2s ease-in-out infinite} .arrow-2{-webkit-animation:arrow-movement 2s 1s ease-in-out infinite; animation:arrow-movement 2s 1s ease-in-out infinite} .arrow:before,.arrow:after{background:#fff;content:''; display :block; height:3px;position:absolute;top:0;left:0;width:30px;border-radius:10px} .arrow:before{-webkit-transform:rotate(45deg) translateX(-21%);transform:rotate(45deg) translateX(-21%);- webkit-transform-origin:top left;transform-origin:top left} .arrow:after{-webkit-transform:rotate(-45deg) translateX(21%);transform:rotate(-45deg) translateX(21%);- webkit-transform-origin:top right;transform-origin:top right} @-webkit-keyframes arrow-movement{0%{opacity:0;top:45%}70%{opacity:1}100%{opacity:0} } @keyframes arrow-movement{0%{opacity:0;top:45%}70%{opacity:1}100%{opacity:0}} </style> </head> <body> <div class="arrow arrow-1"></div> <div class="arrow arrow-2"></div> </body> </html>