<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css三角号旋转90度，上下移动动画</title> <style type="text/css"> .moving { /* 上下动画 */ -webkit-animation: bounce-down 1.6s linear infinite; animation: bounce-down 1.6s linear infinite; } @-webkit-keyframes bounce-down { 25% { -webkit-transform: translateY(-4px); } 50%, 100% { -webkit-transform: translateY(0); } 75% { -webkit-transform: translateY(4px); } } @keyframes bounce-down { 25% { transform: translateY(-4px); } 50%, 100% { transform: translateY(0); } 75% { transform: translateY(4px); } } .moving .triangle{ /* 三角 */ width: 0; height: 0; border-left: 12px solid transparent; border-bottom: 12px solid #3900ff; transform: rotate(45deg); -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); } </style> </head> <body> <div class="moving"> <div class="triangle"></div> </div> </body> </html>
