どうも！LSSです！！
昨日の記事は、左右に配置した黒が分れていく、というものでしたが、ちょっと色を変えて試してみます。
フランス国旗風サンプル
コード
<style><!--
.fr1{
border:5px inset gray;
background-color:white;
background-repeat:no-repeat;
background-image:linear-gradient(150deg,blue 50%,transparent 60%),linear-gradient(150deg,transparent 40%,red 50%);
background-position:0px 0px,0px 0px;
}
.fr1:hover{
transition:2s ease-in 0s;
background-position:-1000px 0px,1000px 0px;
}
--></style>
<div class="fr1">フランス国旗風</div>
フランス国旗風 グラデなし
コード
<style><!--
.fr2{
border:5px inset gray;
background-color:white;
background-repeat:no-repeat;
background-image:linear-gradient(150deg,blue 50%,transparent 50%),linear-gradient(150deg,transparent 50%,red 50%);
background-position:0px 0px,0px 0px;
}
.fr2:hover{
transition:2s ease-in 0s;
background-position:-1000px 0px,1000px 0px;
}
--></style>
<div class="fr2">フランス国旗風 グラデなし</div>
クラス名以外には赤文字部分を変えただけですねｗ
blue 50%,transparent 50%
のように、色の変わり目で同じ数値を指定するとグラデーションしなくなります。
失敗例
コード
<style><!--
.ex1{
border:5px inset gray;
background-color:white;
background-repeat:no-repeat;
background-image:linear-gradient(150deg,blue 50%,red 50%,red 60%,green 60%,green 70%,transparent 70%),linear-gradient(150deg,transparent 30%,blue 30%,blue 40%,green 40%,green 50%,red 50%);
background-position:0px 0px,0px 0px;
}
.ex1:hover{
transition:2s ease-in 0s;
background-position:-1000px 0px,1000px 0px;
}
--></style>
<div class="ex1">失敗例</div>
最初、隠れている部分に複数の色を仕込んでみると、真ん中から色々な色が飛び出してくる？と、やってみると…。
うん、やっぱ、「同じ色」か「透過」でないと、片方が上に乗ってる状態なのでこんな風になっちゃいますね^^;
なお、background-imageに複数の画像をあてた場合、１つめの方が上に乗ってる状態で表示されます。
リアルで例えると、「色紙を２枚、重ね持ち、両手で左右にひっぱる感じ」で、透過部分は切り落としたイメージ？
あとがき
最後は失敗例で終わりましたが、「まんなかから色が湧き出てくる」のはちょっとやってみたいですね。
横幅を指定すればできそうな気がしないでもないのですが、「横幅いっぱい」のままでもなんとかやりようはあるのか？（div要素の方には手を加えずに）
またなにか思いついたら試してみますｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
