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);
}
}分别绘制一个圆形，以及两个三角形，通过 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);
}
}页面渲染效果
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。
CSS
网页设计
网站开发
小程序开发
阅读排行
-
1. 几行代码就能实现Html大转盘抽奖
大转盘抽奖是网络互动营销的一种常见形式，其通过简单易懂的界面设计，让用户在游戏中体验到乐趣，同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。
查看详情 -
2. 微信支付商户申请接入流程
微信支付，是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案，包括多种支付方式，如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
3. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料，包含：房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书（由于我们公司其中一区域已有注册另外一公司，所以必须需要承诺书）
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》，国家对非经营性互联网信息服务实行备案制度，对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似，同时微信小程序支持通过已认证的微信公众号进行注册申请，无需进行单独认证即可使用，同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情
