Shulou(Shulou.com)05/31 Report--

This article "how to use vue to achieve merry-go-round animation" most people do not understand, so the editor summed up the following content, detailed, clear steps, with a certain reference value, I hope you can read this article can have a harvest, let's take a look at this "how to use vue to achieve merry-go-round animation" article it.

The number of images can be processed normally for any value [1-unlimited]:

Html,body {font-size: 100px;} html,body {width:100%; height: 100%; overflow: hidden;}. Film-box {width:100%; height: 100%;} ul {position: relative; width:100% List-style: none;} ul li {position: absolute; top: 0; left: 0; z-index: 1; width:0rem; height: 0remr; text-align: center;} ul li.film-show {transition: all 1s Width: 87remt; height: 50remt;} ul li img {/ * width: 100%; * / height: 100%;} / * left and right arrow * / .arrow {position: absolute; width: 100%; top: 50%; / * opacity: 0 * / z-index: 3;} .prev, .next {position: absolute; height: 5rem; width: 3rem; border-radius: 50%; top: 50%; margin-top:-56px; overflow: hidden; text-decoration: none } .prev {left: 0; background: url (". / imgs/arrow-left.png") no-repeat left top; background-size: 100%;} .next {right: 0; background: url (". / imgs/arrow-right.png") no-repeat right top; background-size: 100% } .filmindex {color: # cb2e2e; font-size: 2.4 remt; position: absolute; bottom: 12remr; left: 50%; transform: translateX (- 50%);}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.