CSS で背景色を虹色で変えるアニメーションをやってみる
出来上がったやつのイメージはこんな感じ
See the Pen Untitled by sueasen (@sueasen) on CodePen.
- html は枠だけ
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="./style.css">
</head>
</html>
- css でアニメーション設定
style.css
@charset "utf-8";
html {
animation-name: rainbow;
animation-duration: 7s;
animation-iteration-count: infinite;
/**
animation: rainbow 7s infinite;
*/
}
@keyframes rainbow {
0% {
background-color: red;
}
13% {
background-color: orange;
}
26% {
background-color: yellow;
}
39% {
background-color: green;
}
52% {
background-color: aqua;
}
65% {
background-color: aqua;
}
78% {
background-color: blue;
}
91% {
background-color:purple;
}
100% {
background-color: red;
}
}
- 小ネタ．．．背景画像スライド
body {
background-image: url(./imagePath/example/image.jpg);
background-size: 100vw 100vh; /* 画面サイズ 横100vw, 縦100vh*/
background-attachment: fixed;
animation: slide 5s linear infinite;
}
@keyframes slide {
0% {
background-position: 0 0;
}
100% {
background-position: -100vw -100vh; /* 画面サイズに合わせる + は右下, - は左上にスライド*/
}
}