markdown CSSアニメーションふわふ気気球 Posted 2021-05-06
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown CSSアニメーションふわふ気気球相关的知识,希望对你有一定的参考价值。
/* ==========================================================
!Fuwafuwa
========================================================== */
.fuwafuwa01 {
position: relative;
width: 600px;
margin: 10px 0 0 0;
&:before {
position: absolute;
top: 30px;
left: 100px;
z-index: 1;
width: 95px;
height: 100px;
background: url(https://3.bp.blogspot.com/-ayrWh2hoC8Y/UU--y9cvG5I/AAAAAAAAO9w/d6s_F-XTbTg/s400/kikyuu.png) no-repeat 0 0;
background-size: contain;
content: "";
animation: fuwafuwa1 5s linear 0s infinite;
}
&:after {
position: absolute;
right: 100px;
bottom: 20px;
width: 175px;
height: 200px;
background: url(https://3.bp.blogspot.com/-PE3rhZLMGOY/UU--zLHUguI/AAAAAAAAO90/e-Z5WmAQbjU/s400/kikyuu_woman.png) no-repeat 0 0;
background-size: contain;
content: "";
animation: fuwafuwa2 3s linear 0s infinite;
}
}
@keyframes fuwafuwa1 {
0% { transform: translate(0%, 0%); }
50% { transform: translate(0%, -20%); }
100% { transform: translate(0%, 0%); }
}
@keyframes fuwafuwa2 {
0% { transform: translate(0%, -10%); }
50% { transform: translate(0%, 0%); }
100% { transform: translate(0%, -10%); }
}
<div class="fuwafuwa01">
<img src="https://4.bp.blogspot.com/-GY783_04Xsk/VpjBpgEivII/AAAAAAAA25s/G8MR3MGOLkE/s600/bg_natural_sky.jpg" alt="イラスト:空" width="600">
<!-- /.fuwafuwa01 --></div>
CSSアニメーション ふわふわ気球
-----------------
A [Pen](https://codepen.io/di_coder/pen/GBYaGZ) by [di_coder](https://codepen.io/di_coder) on [CodePen](https://codepen.io).
[License](https://codepen.io/di_coder/pen/GBYaGZ/license).
以上是关于markdown CSSアニメーションふわふ気気球的主要内容,如果未能解决你的问题,请参考以下文章
css CSSアニメーション
css CSSグラデーションアニメ
html SVGでCSSアニメーション
html CSSでのアニメーション(@keyframes)
css ホバー时矢印が横へ移动アニメーション
css CSSアニメーション(フワッと横から入ってくる)