糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

CSS的趣味应用 - 旋转的指南针

CSS的趣味应用 - 旋转的指南针

原创 新闻资讯

于 2023-09-09 10:48:08 发布

15999 浏览

整体效果

1.gif

知识点:① 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);
  }
}

分别绘制一个圆形,以及两个三角形,通过 position 定位组成指北针,再绘制一个黑色圆形背景,一个指北针的圆形图标就绘制完成。然后再给图标整体加上 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);
  }
}

页面渲染效果

1.gif

以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。

CSS

网页设计

网站开发

小程序开发

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 3. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情