一、实验题目
用css的常用样式制作一个好看的按钮
二、实验代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.button {
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
color: #ffffff;
font-size: 20px;
border-radius: 30px;
text-align: center;
background-image: linear-gradient(to right, #55ffff 0%, #55ff7f 25%, #55aaff 50%, #ff007f 75%, #aa0000 100%);
background-size: 200%;
animation: colorGradient 1.5s infinite;
}
@keyframes colorGradient {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 0;
}
}
</style>
</head>
<body>
<div class="button">
<span>好看的按钮</span>
</div>
</body>
</html>三，实验效果
做了一个渐变按钮
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
