有趣的css - 乱转的指北针-编程知识

有趣的css - 乱转的指北针

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 模拟实现搜索图标过渡到输入框的小动效的一个效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

知识点：
① css 绘制三角形
② animation 动画属性
③ transform 属性值 rotate 旋转

思路：
使用 css 绘制出指北针，通过 animation 设置动画，分别设置不同关键帧时的 transform 属性值（rotate 值）。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="loading40"><span class="one-sj40"></span><span class="two-sj40"></span><span class="round40"></span>
</div>

通过 3 个 span 标签绘制出指北针。

css 部分代码

.loading40{width: 126px;height: 126px;background-color: #000000;border-radius: 50%;position: relative;overflow: hidden;border: 6px solid #FFCA1C;transform: rotate(35deg);animation: zhuan40-eff 6s ease-in-out infinite;box-shadow: inset 0px 0px 2px #ffffff;
}
.one-sj40{border-bottom: 40px solid #FFCA1C;border-left: 16px solid transparent;border-right: 16px solid transparent;position: absolute;top: 22px;left: 47px;
}
.two-sj40{border-top: 40px solid #FFF42B;border-left: 16px solid transparent;border-right: 16px solid transparent;position: absolute;bottom: 22px;left: 47px;
}
.round40{width: 12px;height: 12px;border-radius: 50%;background-color: #000000;position: absolute;top: 57px;left: 57px;z-index: 10;
}
@keyframes zhuan40-eff{0% {transform: rotate(35deg);}30%{transform: rotate(0deg);}45%{transform: rotate(-60deg);}60% {transform: rotate(60deg);}65% {transform: rotate(-30deg);}80%{transform: rotate(100deg);}95%{transform: rotate(-10deg);}100%{transform: rotate(35deg);}
}

1、绘制指南针：
分别绘制一个圆形，以及两个三角形，通过 position 定位组成指北针，再绘制一个黑色圆形背景，一个指北针的圆形图标就绘制完成。

2、然后再给图标整体加上 animation 动画属性，并定义不同关键帧下 transform 属性值，让指北针旋转不同的角度。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>乱转的指北针</title></head><body><div class="app"><div class="loading40"><span class="one-sj40"></span><span class="two-sj40"></span><span class="round40"></span></div></div></body>
</html>

css 样式

/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.loading40{width: 126px;height: 126px;background-color: #000000;border-radius: 50%;position: relative;border: 6px solid #FFCA1C;transform: rotate(35deg);animation: zhuan40-eff 6s ease-in-out infinite;box-shadow: inset 0px 0px 2px #ffffff;
}
.one-sj40{border-bottom: 40px solid #FFCA1C;border-left: 16px solid transparent;border-right: 16px solid transparent;position: absolute;top: 22px;left: 47px;
}
.two-sj40{border-top: 40px solid #FFF42B;border-left: 16px solid transparent;border-right: 16px solid transparent;position: absolute;bottom: 22px;left: 47px;
}
.round40{width: 12px;height: 12px;border-radius: 50%;background-color: #000000;position: absolute;top: 57px;left: 57px;z-index: 10;
}
@keyframes zhuan40-eff{0% {transform: rotate(35deg);}30%{transform: rotate(0deg);}45%{transform: rotate(-60deg);}60% {transform: rotate(60deg);}65% {transform: rotate(-30deg);}80%{transform: rotate(100deg);}95%{transform: rotate(-10deg);}100%{transform: rotate(35deg);}
}