Tarokenlog

Contact

CSSで背景に動くアニメーションをつける方法・ツール【めちゃ簡単】

今自分のポートフォリオサイトを作っています。
そこで練習、勉強がてら色々動き・エフェクトをつけようと思い、調べつつ作り込んでいます。

今回は背景にグラデーションをつけつつ、そのグラデーションにアニメーションをつける（ゆっくりと動き続ける）方法・ツールを紹介します。


CSS GRADIENT ANIMATORでCSSを生成

こちらのサイトでアニメーションを生成できます。
自分の好きなように色やアニメーションのスピード、角度を設定できます。
こんな感じの画面です。

これを自分の入れたいところの背景に設定するだけです。
どんな感じになるかプレビューもできます。

画像の上に半透明の動くグラデーションをつけたい時


こんな感じに画像にアニメーション付きのグラデーションをつけたい場合は、opacityで半透明にしてもいいですが、その要素の中身全部が半透明になってしまいます。

そんな時は、グラデーションの要素のbackgroundを以下のように変更するといい感じになります。

サンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>グラデーションのデモ</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="background">
		<div class="gradient"></div>
	</div>
</body>
</html>

CSS

body {
	margin: 0 auto;

}

.background {
	background-image: url(maintop.jpg);
	position: relative;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}

.gradient {
	background: linear-gradient(45deg, rgba(4,191,207,0.6), rgba(191,25,203,0.6));
	background-size: 400% 400%;
	height: 100vh;

	-webkit-animation: test 4s ease infinite;
	-moz-animation: test 4s ease infinite;
	animation: test 4s ease infinite;
}
	@-webkit-keyframes test {
	    0%{background-position:0% 51%}
	    50%{background-position:100% 50%}
	    100%{background-position:0% 51%}
	}
	@-moz-keyframes test {
	    0%{background-position:0% 51%}
	    50%{background-position:100% 50%}
	    100%{background-position:0% 51%}
	}
	@keyframes test { 
	    0%{background-position:0% 51%}
	    50%{background-position:100% 50%}
	    100%{background-position:0% 51%}
	}

Demo

こんな感じで簡単にCSSのみでオサレな動くグラデーションをつけることができます。

是非使ってみてください〜

では〜


Posted

in

,

Tags:

, ,