渐变文字+鼠标悬停效果

纯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>

人已赞赏
实用片段

纯html+css打造一款的电台图标

2020-4-25 17:55:03

实用片段

css溢出文章隐藏并淡出效果

2020-4-27 12:20:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索