【ハロウィン限定】ブログに魔女を飛ばす

この記事は約 3 分で読めます。

ハロウィンにまだ間に合います!
CSSだけでブログに魔女を
飛ばしてみましょう♪

 
 
 
 

るな
るな
CSSは以下のように書きます。
background: urlに
お好きな魔女の画像のパス
書いてください。

 

.slider-wrapper {
position: relative;
}
.slider-wrapper .witch {
background: url("https://techflourish.com/images/black-and-white-halloween-clipart-8.png");
background-repeat: no-repeat;
background-size: contain;
height: 100px;
width: 100px;
left: 41%;
position: absolute;
-webkit-animation: ahahaha 6s infinite;
animation: ahahaha 7s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes ahahaha {
1% {
left: 41%;
}
40% {
left: 102%;
width: 60px;
}
40.01% {
left: -10%;
}
80% {
left: 41%;
width: 100px;
}
100% {
left: 41%;
width: 100px;
}
}

 

まりー
まりー
魔女を飛ばしたいところに
以下のように書きます。

 

<div class="slider-wrapper">
<div class="witch"></div>
</div>

 

See the Pen Cackle cackle by Chris Wright (@chreeswright) on CodePen.

オリジナルリンクは以下。

 

 

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

 

【ハロウィン限定】ブログに魔女を飛ばす