【ハロウィン限定】ブログに魔女を飛ばす
DISCLAIMER: This article is more than a year old and may not be current.
この記事は約 3 分で読めます。
ハロウィンにまだ間に合います!
CSSだけでブログに魔女を
飛ばしてみましょう♪

CSSは以下のように書きます。
background: urlに
お好きな魔女の画像のパスを
書いてください。
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.
オリジナルリンクは以下。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
こんにちは~
コメントありがとうございます。
魔女が飛んでいるのが見えました。
wordpressは触れば触るほど壊れそうで怖いです。(x_x;
カスタマイズは楽しいですね。
また勉強させてくださいね。
藍 詩さん こんばんは。
コメントありがとうございます。
こちらこそ、
温かいお言葉をありがとうございます。
確かに、壊れそうで怖いですが、
カスタマイズは楽しいですね。