我想要平滑地移动我的具有多种颜色的渐变,但问题是动画不平滑。它只是在每一步中改变位置。
<style> .animated { width: 300px; height: 300px; border: 1px solid black; animation: gra 5s infinite; animation-direction: reverse; -webkit-animation: gra 5s infinite; -webkit-animation-direction: reverse; animation-timing-function: linear; -webkit-animation-timing-function: linear; } @keyframes gra { 0% { background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(21%, #ff670f), color-stop(56%, #ffffff), color-stop(88%, #0eea57)); background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%); background: linear-gradient(135deg, #ff670f 0%, #ff670f 21%, #ffffff 56%, #0eea57 88%); } 50% { background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(10%, #ff670f), color-stop(40%, #ffffff), color-stop(60%, #0eea57)); background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%); background: linear-gradient(135deg, #ff670f 0%, #ff670f 10%, #ffffff 40%, #0eea57 60%); } 100% { background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ff670f), color-stop(5%, #ff670f), color-stop(10%, #ffffff), color-stop(40%, #0eea57)); background: -webkit-linear-gradient(-45deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%); background: linear-gradient(135deg, #ff670f 0%, #ff670f 5%, #ffffff 10%, #0eea57 40%); } } </style> <div class="animated"> <h1>你好</h1> </div>
是否可以在不使用jQuery的情况下实现?
我的jsfiddle链接是 https://jsfiddle.net/bAUK6
动态实现Dave的答案:
请尝试以下代码: