背景の色が動く囲み枠 | パソコンが好きになるブログ〜表技・裏技・便利技伝授！
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

パソコンが好きになるブログ〜表技・裏技・便利技伝授！

北海道札幌市中央区　大通駅徒歩7分のパソコンスクール「リズ札幌・ライフデザインスクール」パソコンインストラクター川上雄大によるパソコン・IT・ワンポイントレッスン。
スクールでのいろんな方のパソコンレッスンだったり、パソコンとは関係ない話だったり…

背景の色が動く囲み枠

こんにちは、パソコンインストラクターの川上雄大です。

 

 

 

 

囲み枠の背景をグラデーションにするバージョンは、すでにお伝えしていますが↓

 

『背景をグラデーションにするには（CSS3）･･･記事内の囲い枠やブログ背景をグラデーションに』

 

『【便利技】レインボー囲み枠』

 

今回は、囲み枠の背景が動く（変化する）、というバージョンをお伝えしますね。

（需要はないかもしれませんが　汗）

 

 

 

まずは、

pink（#ffc0cb）→lemonchiffon（#fffacd）→skyblue（#87ceeb）

 

で動く囲み枠

 

○○○
○○○
○○○
○○○
○○○


 

 

<div style="background-color: #ffc0cb;animation: grad1 5s infinite;padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #000000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
<style type="text/css"><!--@keyframes grad1 {0% { background-color: #ffc0cb; } 50% { background-color: #fffacd; } 100% { background-color: #87ceeb; }--></style>

 

 

 

または、

springgreen（#00ff7f）→gold（#ffd700）→violet（#ee82ee）

 

で動く囲み枠

 

○○○
○○○
○○○
○○○
○○○


 

 

<div style="background-color: #00ff7f;animation: grad2 5s infinite;padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #000000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
<style type="text/css"><!--@keyframes grad2 {0% { background-color: #00ff7f; } 50% { background-color: #ffd700; } 100% { background-color: #ee82ee; }--></style>

 

 

次に、グラデーションが斜めの囲み枠。

 

 

背景色がグラデーションのままの場合

#6cb8ff → #fff66c → #ffa36c

 

○○○
○○○
○○○
○○○
○○○

 

<div style="background-image:linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c);background-color:#ffb6c1;background-size: 600% 600%;animation:padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #008000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>

 

 

背景色を動かす場合

 

○○○
○○○
○○○
○○○
○○○


<div style="background-image:linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c);background-color:#ffb6c1;background-size: 600% 600%;animation: AnimationName 10s ease infinite;padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #008000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
<style type="text/css"><!--@keyframes AnimationName {0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}--></style>

 

 

 

ちょうど、クリスマス時期なので、

 

赤（red、#ff0000）と緑（green、#008000）と、黄色（yellow、#ffff00）を動かしてみました～！

あ、でも肝心の文字が見えづらいですねm(__)m

 

○○○
○○○
○○○
○○○
○○○


 

<div style="background-image:linear-gradient(45deg, #ff0000, #008000, #ffff00);background-color:#fffacd;background-size: 600% 600%;animation: AnimationName 10s ease infinite;padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #008000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
<style type="text/css"><!--@keyframes AnimationName {0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}--></style>

 

 

 

薄い色系なら大丈夫かな？

 

coral（#ff7f50）→lightgreen（#90ee90）→lemonchiffon（#fffacd）

 

○○○
○○○
○○○
○○○
○○○


 

<div style="background-image:linear-gradient(45deg, #ff7f50, #90ee90, #fffacd);background-color:#ffffe0;background-size: 600% 600%;animation: AnimationName 10s ease infinite;padding:10px; width: auto;margin-right:6px; border-radius: 10px;border: 2px dotted #008000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
<style type="text/css"><!--@keyframes AnimationName {0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}--></style>

 

 

 

普通の囲み枠に飽きたら（笑）、こんな囲み枠もたまにはいいかもしれませんよ～（笑）

 

 

 


以上、アメブロ便利技でした。


LIDS札幌・ライフデザインスクール
川上 雄大