纯css+html打造渐变文字+鼠标悬停效果。

代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <style> .gradient-text { background-color: #CA4246; background-image: linear-gradient(45deg, #CA4246 16.666%, #E16541 16.666%, #E16541 33.333%, #F18F43 33.333%, #F18F43 50%, #8B9862 50%, #8B9862 66.666%, #476098 66.666%, #476098 83.333%, #A7489B 83.333%); background-size: 100%; background-repeat: repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow-text-simple-animation-rev 0.75s ease forwards; } .gradient-text:hover { animation: rainbow-text-simple-animation 0.5s ease-in forwards; } @keyframes rainbow-text-simple-animation-rev { 0% { background-size: 650%; } 40% { background-size: 650%; } 100% { background-size: 100%; } } @keyframes rainbow-text-simple-animation { 0% { background-size: 100%; } 80% { background-size: 650%; } 100% { background-size: 650%; } } body { background-color: #040404; } header { margin-top: 1em; margin-top: calc(50vh - 3em); } h1 { font-size: 6em; text-align: center; margin-bottom: 0; margin-bottom: -0.25em; display: block; margin-left: auto; margin-right: auto; cursor: pointer; width: 605px; font-weight: bold; } </style> </head> <body> <header> <h1 class="gradient-text">移动上来试试</h1> </header> </body> </html>