-webkit-background-clip + animation

<div class="page-rotate">
    <div class="content-rotate">|<|<|<>|>|>|</div>
</div>
<style>
    .page-rotate{
	width:100%;
        height:400px;
	display:flex;
	align-items:center;
	justify-content:center;
    }
    .content-rotate{
	font-size:50px;
	font-weight:blod;
	text-align:center;
	line-height:100px;
	background:linear-gradient(90deg,#650C11,#21A06B);
	color:transparent;
	-webkit-background-clip:text;
	animation:myFrame 5ms infinite;
    }
    @keyframes myFrame{
	0% {transform:rotate(0deg);filter:hue-rotate(0deg);}
	5% {transform:rotate(18deg);filter:hue-rotate(18deg);}
        10% {transform:rotate(36deg);filter:hue-rotate(36deg);}
	15% {transform:rotate(54deg);filter:hue-rotate(54deg);}
        20% {transform:rotate(72deg);filter:hue-rotate(72deg);}
	25% {transform:rotate(90deg);filter:hue-rotate(90deg);}
        30% {transform:rotate(108deg);filter:hue-rotate(108deg);}
	35% {transform:rotate(126deg);filter:hue-rotate(126deg);}
        40% {transform:rotate(144deg);filter:hue-rotate(144deg);}
	45% {transform:rotate(162deg);filter:hue-rotate(162deg);}
        50% {transform:rotate(180deg);filter:hue-rotate(180deg);}
	55% {transform:rotate(198deg);filter:hue-rotate(198deg);}
        60% {transform:rotate(216deg);filter:hue-rotate(216deg);}
	65% {transform:rotate(234deg);filter:hue-rotate(234deg);}
        70% {transform:rotate(252deg);filter:hue-rotate(252deg);}
	75% {transform:rotate(270deg);filter:hue-rotate(270deg);}
        80% {transform:rotate(288deg);filter:hue-rotate(288deg);}
	85% {transform:rotate(306deg);filter:hue-rotate(306deg);}
        90% {transform:rotate(324deg);filter:hue-rotate(324deg);}
	95% {transform:rotate(342deg);filter:hue-rotate(342deg);}
        100% {transform:rotate(360deg);filter:hue-rotate(360deg);}
    }
</style>

点击查看效果

|<|<|<>|>|>|