CSS 实现平面圆点绕椭圆动画

前言

CSS实现平面圆点绕椭圆动画,速速来Get吧~
文末分享源代码。记得点赞+关注+收藏!

1.实现效果

2.实现原理

transform-style:CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面,元素的子元素将不会有 3D 的遮挡关系。

属性 含义
flat 设置元素的子元素位于该元素的平面中
preserve-3d 指示元素的子元素应位于 3D 空间中

eg:

CSS 实现平面圆点绕椭圆动画_第1张图片

transform:
CSS transform 属性允许你旋转,缩放,倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。transform属性可以指定为关键字值 none 或一个或多个 值。

eg:

CSS 实现平面圆点绕椭圆动画_第2张图片

查看transform-function

eg:

CSS 实现平面圆点绕椭圆动画_第3张图片

CSS 三角函数语法介绍:
cos(): CSS 函数 cos() 为三角函数,返回某数的余弦值,此值介于 -1 和 1 之间。此函数含有单个计算式,此式须将参数结果按弧度数解析为 或 ,即 cos(45deg)、cos(0.125turn) 和 cos(3.14159 / 4) 均表示同一值,约为 0.707。

/* 单个  值 */
width: calc(100px * cos(45deg));
width: calc(100px * cos(0.125turn));
width: calc(100px * cos(0.785398163rad));

/* 单个  值 */
width: calc(100px * cos(63.673));
width: calc(100px * cos(2 * 0.125));

/* 其他值 */
width: calc(100px * cos(pi));
width: calc(100px * cos(e / 2));

sin(): CSS 函数 sin() 为三角函数,返回某数的正弦值,此值介于 -1 和 1 之间。此函数含有单个计算式,此式须将参数结果按弧度数解析为 或 ,即 sin(45deg)、sin(0.125turn) 和 sin(3.14159 / 4) 均表示同一值,约为 0.707。
CSS3 的这些函数使得开发者可以更加方便处理一些复杂的数学问题,增强了 CSS 的表现力。

/* 单个  值 */
width: calc(100px * sin(45deg));
width: calc(100px * sin(0.25turn));
width: calc(100px * sin(1.0471967rad));

/* 单个  值 */
width: calc(100px * sin(63.673));
width: calc(100px * sin(2 * 0.125));

/* 其他值 */
width: calc(100px * sin(pi / 2));
width: calc(100px * sin(e / 4));

巧妙利用三角函数关系,实现圆点在圆弧上的translate偏移

x=a*cosr
y=b*sinr

CSS 实现平面圆点绕椭圆动画_第4张图片

3.实现步骤

  • 绘制父元素logo,设置宽高
<div class="logo"></div>
.logo {
	width: 450px;
	height: 451px;
	position: relative;
}
  • 为其添加伪元素,设置背景图片

CSS 实现平面圆点绕椭圆动画_第5张图片

.logo {
	&::after {
		content: "";
		width: 100%;
		height: 100%;
		background: url("@/assets/images/ani/logo.png") no-repeat;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
}
  • 为背景图片添加上下浮动动画
&::after {
	animation: douce 2s infinite linear;
	@keyframes douce {
		0%,
			100% {
				transform: translateY(0);
			}
			50% {
				transform: translateY(-10px);
			}
	}
}
  • logo标签内绘制line线条
<div class="logo">
	<div class="line"></div>
</div>
  • 为line设置背景图片,是一个椭圆形状的渐变色线条,基于父元素水平垂直居中
  • 可以发现线条和背景的透视不对

CSS 实现平面圆点绕椭圆动画_第6张图片

.line {
    width: 288px;
    height: 94px;
    left: calc(50% - 144px);
    bottom: 128px;
    border-radius: 50%;
    position: absolute;
    background: url("@/assets/images/ani/circle-round.png") no-repeat;
    background-size: 100% 100%;
}
  • 尝试去为父元素设置transform-style: preserve-3d,让子元素是位于 3D 空间中
.logo{
    transform-style: preserve-3d;
}
  • 为子元素line设置transform属性,稍微调整角度,透视关系正常

CSS 实现平面圆点绕椭圆动画_第7张图片

.line{
	transform: rotateZ(0deg) rotateX(1deg);
}
  • 为line添加伪元素,旋转的小圆点,基于line水平垂直居中

CSS 实现平面圆点绕椭圆动画_第8张图片

&::after {
	content: "";
	position: absolute;
	width: 11px;
	height: 11px;
	background: #5fffa5;
	border-radius: 50%;
	left:calc(50% - 5px);
	top:calc(50% - 5px);
}
  • 为圆点设置旋转动画,使用less简化代码

CSS 实现平面圆点绕椭圆动画_第9张图片

animation: move 10s linear infinite;
  .loop(@index,@a, @b, @s) when (@index < @s+1) {
    // 椭圆x轴半径(长半径)@a
    // 椭圆y轴半径(短半径)@b
    // 坐标点的数目(数目越大,动画越精细)@s
    .loop((@index + 1),@a, @b, @s);
    @keyframeSel: @index * 100% / @s;
    @{keyframeSel}{
      transform: translate((@a * cos(360deg / @s*@index)),(@b * sin(360deg / @s*@index)));
    }
  }
@keyframes move {
	.loop(0,144px,42px,40);
}

3.实现代码

<div class="logo">
  <div class="line"></div>
</div>
body{
  background: linear-gradient(90deg, #03224e 0%, #011030 100%);
  display:flex;
  align-items:center;
  justify-content: center;
  height:100vh;
}
.logo {
    width: 450px;
    height: 451px;
    transform-style: preserve-3d;
    position: relative;
    &::after {
      content: "";
      width: 100%;
      height: 100%;
      background: url("https://i.postimg.cc/Sxn1cPT8/logo.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      left: 0;
      top: 0;
      animation: douce 2s infinite linear;
      @keyframes douce {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }
    }
  }
  .line {
    width: 288px;
    height: 93px;
    left: calc(50% - 144px);
    bottom: 128px;
    border-radius: 50%;
    position: absolute;
    background: url("https://i.postimg.cc/DyZxKDKD/circle-round.png") no-repeat;
    background-size: 100% 100%;
    transform-style: preserve-3d;
    transform: rotateZ(0deg) rotateX(1deg);

    &::after {
      content: "";
      position: absolute;
      width: 11px;
      height: 11px;
      background: #5fffa5;
      border-radius: 50%;
      transform-style: preserve-3d;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      animation: move 10s linear infinite;
    }

    @keyframes move {
      .loop(0,144px,42px,40);
    }
  }
  .loop(@index,@a, @b, @s) when (@index < @s+1) {
    // 椭圆x轴半径(长半径)@a
    // 椭圆y轴半径(短半径)@b
    // 坐标点的数目(数目越大,动画越精细)@s
    .loop((@index + 1),@a, @b, @s);
    @keyframeSel: @index * 100% / @s;
    @{keyframeSel}{
      transform: translate((@a * cos(360deg / @s*@index)),(@b * sin(360deg / @s*@index)));
    }
  }

4.写在最后

看完本文如果觉得对你有一丢丢帮助,记得点赞+关注+收藏鸭
更多相关内容,关注苏苏的bug,苏苏的github,苏苏的码云~

参考链接:

巧妙利用三角函数关系,实现圆点在圆弧上的translate偏移

你可能感兴趣的:(css,平面,前端)