<div class="main">
<div class="item">
<span class="circle circle-2"></span>
<img src="https://dl.dropbox.com/s/jsu9sixdblkf0xe/circle-2.jpg?dl=0" width="115px" height="115px">
</div>
<div class="text">
<p>
$startX: 0; // 開始位置X<br>
$startY: 0; // 開始位置Y<br>
$p1X: 100; // 制御点X1<br>
$p1Y: 0; // 制御点Y1<br>
$p2X: 0; // 制御点X2<br>
$p2Y: -100; // 制御点Y2<br>
$endX: 100; // 終了位置X<br>
$endY: -100; // 終了位置Y
</p>
</div>
</div>
// X軸の関数
@function getPointX($t, $x1, $x2, $x3, $x4) {
$tp: 1 - $t;
$x: $tp * $tp * $tp * $x1 + 3 * $tp * $tp * $t * $x2 + 3 * $tp * $t * $t * $x3 + $t * $t * $t * $x4;
@return $x + px;
}
// Y軸の関数
@function getPointY($t, $y1, $y2, $y3, $y4) {
$tp: 1 - $t;
$y: $tp * $tp * $tp * $y1 + 3 * $tp * $tp * $t * $y2 + 3 * $tp * $t * $t * $y3 + $t * $t * $t * $y4;
@return $y + px;
}
@keyframes createBezier-2 {
$startX: 0; // 開始位置X
$startY: 0; // 開始位置Y
$p1X: 100; // 制御点X1
$p1Y: 0; // 制御点Y1
$p2X: 0; // 制御点X2
$p2Y: -100; // 制御点Y2
$endX: 100; // 終了位置X
$endY: -100; // 終了位置Y
@for $i from 0 through 100 {
#{$i}% {
transform: translate(getPointX($i * 0.01, $startX, $p1X, $p2X, $endX), getPointY($i * 0.01, $startY, $p1Y, $p2Y, $endY));
}
}
}
.main {
display: flex;
justify-content: space-between;
align-items: center;
width: 400px;
margin: 30px auto;
}
.item {
position: relative;
display: block;
width: 115px;
height: 115px;
margin-right: 10px;
}
.circle {
position: absolute;
top: 100px;
left: 0px;
width: 15px;
height: 15px;
background-color: #FCB374;
border-radius: 50%;
transform: translate(0px, 0px);
animation-name: createBezier-2;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.