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

2018年10月30日2019年7月11日

ハロウィンにまだ間に合います！
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.

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

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