网页特效之可变颜色的字体

先上效果图

html代码

<div class="area-xf">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid animi aperiam assumenda autem beatae, cum dicta eius eveniet, impedit iure magni minima molestiae nemo officia perferendis, quibusdam ullam voluptatem. Sint?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi dignissimos fugit incidunt maiores, minima nesciunt nihil nulla, odit optio perferendis quam, quis tempore voluptatem voluptatum. Assumenda commodi excepturi impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dolor doloribus, fugiat possimus repellendus sapiente soluta suscipit. Corporis dolor dolores excepturi fugit magnam maiores, obcaecati quaerat, quam suscipit ut vel? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam aut debitis dolorum nam quaerat soluta! Ad, aliquam dolor error in itaque, labore mollitia, nostrum odio quas tempora totam ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. At eius excepturi exercitationem id possimus, sed! A eaque ex excepturi explicabo hic libero officiis quia rerum unde. Aperiam consequatur dolores reprehenderit? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium cum incidunt necessitatibus placeat velit? Assumenda eaque esse id impedit molestias pariatur recusandae. Dicta harum nam nesciunt officiis sapiente suscipit, voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto blanditiis consequuntur, culpa cum dicta distinctio enim, explicabo harum ipsa maiores minima modi molestiae nobis omnis quidem repellendus sint sit vitae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus amet quia ullam voluptate. Accusantium assumenda atque aut consequatur consequuntur doloribus eligendi maxime possimus, quasi quia ratione tempore vel velit vero?</p>
</div>

css代码

.area-xf {
  width: 1200px;
  height: auto;
  font-size: 24px;
  line-height: 30px;
  text-align: justify;
  margin: 30px auto;
  background-image: -webkit-linear-gradient(358deg, #f35626, #feab3a);
  background-image: linear-gradient(92deg, #f35626, #feab3a);
}
@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

.area-xf {
  margin-bottom: 1em;
  color: green;
  background-image: -webkit-linear-gradient(358deg, #f35626, #feab3a);
  background-image: linear-gradient(92deg, #f35626, #feab3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 10s infinite linear;
  animation: hue 10s infinite linear;
}

.area-xf p {
  margin: 0 !important;
}

参考链接：

1. CSS filter属性
2. CSS linear-gradient属性
3. CSS background-clip属性