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

This article mainly introduces the relevant knowledge of "css how to make super cute Doudou loading animation effect". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this "css how to make super cute Doudou loading animation effect" article can help you solve the problem.

Loading effect of Doudou

Point_down:html Code:

Point_down:css Code:

@-webkit-keyframes up {0%, 100% {transform: rotate (0);} 50% {transform: rotate (- 30deg);}} @-moz-keyframes up {0%, 100% {transform: rotate (0);} 50% {transform: rotate (- 30deg);}} @-o-keyframes up {0%, 100% {transform: rotate (0);} 50% {transform: rotate (- 30deg) } @ keyframes up {0%, 100% {transform: rotate (0);} 50% {transform: rotate (- 30deg);}} @-webkit-keyframes down {0%, 100% {transform: rotate (0);} 50% {transform: rotate (30deg);}} @-moz-keyframes down {0%, 100% {transform: rotate (0);} 50% {transform: rotate (30deg) } @-o-keyframes down {0%, 100% {transform: rotate (0);} 50% {transform: rotate (30deg);}} @ keyframes down {0%, 100% {transform: rotate (0);} 50% {transform: rotate (30deg);}} @-webkit-keyframes r-to-l {100% {margin-left:-1px } @-moz-keyframes r-to-l {100% {margin-left:-1px;}} @-o-keyframes r-to-l {100% {margin-left:-1px;}} @ keyframes r-to-l {100% {margin-left:-1px;}} body {background: # 000; overflow: hidden; margin: 0;} body .pacman: before, body .pacman: after {content:'; position: absolute Background: # FFC107; width: 100px; height: 50px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px; border-radius: 50px 50px 00;-webkit-animation: up 0.4s infinite;-moz-animation: up 0.4s infinite;-o-animation: up 0.4s infinite; animation: up 0.4s infinite;} body .pacman: after {margin-top:-1px; border-radius: 00 50px 50px -webkit-animation: down 0.4s infinite;-moz-animation: down 0.4s infinite;-o-animation: down 0.4s infinite; animation: down 0.4s infinite;} body .dot {position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin-top:-5px; margin-left: 30px; border-radius: 50%; background: # ccc; z-index:-1 Box-shadow: 30px 00 # ccc, 60px 00 # ccc, 90px 00 # ccc, 120px 00 # ccc, 150px 00 # ccc;-webkit-animation: r-to-l 0.4s infinite;-moz-animation: r-to-l 0.4s infinite;-o-animation: r-to-l 0.4s infinite; animation: r-to-l 0.4s infinite } this is the end of the content about "how to make Super cute Doudou loading Animation effects in css". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.