效果如下:
完整代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯css简单箭头动画效果</title> <style> body { background: #222; } .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; } .arrow:before { -webkit-transform: rotate(45deg) translateX(-23%); transform: rotate(45deg) translateX(-23%); -webkit-transform-origin: top left; transform-origin: top left; } .arrow:after { -webkit-transform: rotate(-45deg) translateX(23%); transform: rotate(-45deg) translateX(23%); -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> <script> </script> </body> </html>
评论前必须登录!
注册