|
|
| 第1行： |
第1行： |
| div
| | <!DOCTYPE html> |
| {
| | <html> |
| width:200px;
| | <head> |
| height:200px;
| | <meta charset="utf-8"> |
| background:#AED6F1;
| |
| animation:myfirst 6s;
| |
| -moz-animation:myfirst 6s; /* Firefox */
| |
| -webkit-animation:myfirst 6s; /* Safari and Chrome */
| |
| -o-animation:myfirst 6s; /* Opera */
| |
| }
| |
| | |
| @keyframes myfirst
| |
| {
| |
| 0% {background:#FADBD8;}
| |
| 20%{background:#F1948A;}
| |
| 40% {background:#EC7063;}
| |
| 80%{background:#2874A6;}
| |
| 100%{background:#AED6F1 ;}
| |
| }
| |
|
| |
|
| @-moz-keyframes myfirst /* Firefox */
| | <style> |
| | body |
| { | | { |
| 0% {background:#FADBD8;} | | background-image: linear-gradient(to right, rgba(158, 214, 255), rgba(255, 188, 188)) |
| 20%{background:#F1948A;}
| |
| 40% {background:#EC7063;}
| |
| 80%{background:#2874A6;}
| |
| 100%{background:#AED6F1 ;}
| |
| } | | } |
| | </style> |
| | </head> |
|
| |
|
| | <body> |
|
| |
|
| @-webkit-keyframes myfirst /* Safari and Chrome */
| | <h1>标题</h1> |
| {
| | <p>文本</p> |
| 0% {background:#FADBD8;}
| |
| 20%{background:#F1948A;}
| |
| 40% {background:#EC7063;}
| |
| 80%{background:#2874A6;}
| |
| 100%{background:#AED6F1 ;}
| |
| }
| |
|
| |
|
| | | </body> |
| @-o-keyframes myfirst /* Opera */
| | </html> |
| {
| |
| 0% {background:#FADBD8;}
| |
| 20%{background:#F1948A;}
| |
| 40% {background:#EC7063;}
| |
| 80%{background:#2874A6;}
| |
| 100%{background:#AED6F1 ;}
| |
| }
| |
2022年8月7日 (日) 18:05的版本
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
background-image: linear-gradient(to right, rgba(158, 214, 255), rgba(255, 188, 188))
}
</style>
</head>
<body>
<h1>标题</h1>
<p>文本</p>
</body>
</html>
