旋转齿轮加载

news2024/11/24 7:03:49

效果演示

30-旋转齿轮加载.gif

实现了一个旋转齿轮的动画效果。具体来说,页面背景为深灰色,中间有一个齿轮装置,包括四个齿轮。每个齿轮都有内部的齿轮条,整体呈现出旋转的效果。其中,齿轮2是顺时针旋转的,齿轮1、3、4是逆时针旋转的。整体效果是四个齿轮交错旋转,形成一个动态的机械装置效果。

Code

<div class="gearbox">
    <div class="overlay"></div>
    <div class="gear one">
        <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>
    <div class="gear two">
        <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>
    <div class="gear three">
        <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>
    <div class="gear four large">
        <div class="gear-inner">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
    </div>
</div>
body {
    height: 100vh; /* 设置body元素的高度为视口高度 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: #212121; /* 设置背景颜色为深灰色 */
}

@keyframes clockwise {
    0% {
        transform: rotate(0deg); /* 旋转角度从0度开始 */
    }
    100% {
        transform: rotate(360deg); /* 旋转角度到360度结束 */
    }
}

@keyframes counter-clockwise {
    0% {
        transform: rotate(0deg); /* 逆时针旋转角度从0度开始 */
    }
    100% {
        transform: rotate(-360deg); /* 逆时针旋转角度到-360度结束 */
    }
}

.gearbox {
    background: #111; /* 设置齿轮箱的背景颜色为深灰色 */
    height: 150px; /* 设置齿轮箱的高度 */
    width: 200px; /* 设置齿轮箱的宽度 */
    position: relative; /* 相对定位 */
    border: none; /* 去除边框 */
    overflow: hidden; /* 内容溢出隐藏 */
    border-radius: 6px; /* 设置圆角 */
    box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.1); /* 设置阴影效果 */
}

.gearbox .overlay {
    border-radius: 6px; /* 设置覆盖层的圆角 */
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    z-index: 10; /* 设置层级 */
    box-shadow: inset 0px 0px 20px black; /* 设置内阴影效果 */
    transition: background 0.2s; /* 背景颜色过渡效果 */
}

.gearbox .overlay {
    background: transparent; /* 设置覆盖层背景为透明 */
}

.gear {
    position: absolute; /* 绝对定位 */
    height: 60px; /* 设置齿轮的高度 */
    width: 60px; /* 设置齿轮的宽度 */
    box-shadow: 0px -1px 0px 0px #888888, 0px 1px 0px 0px black; /* 设置齿轮的阴影效果 */
    border-radius: 30px; /* 设置齿轮的圆角 */
}

.gear.large {
    height: 120px; /* 设置大齿轮的高度 */
    width: 120px; /* 设置大齿轮的宽度 */
    border-radius: 60px; /* 设置大齿轮的圆角 */
}

.gear.large:after {
    height: 96px; /* 设置大齿轮内部圆的高度 */
    width: 96px; /* 设置大齿轮内部圆的宽度 */
    border-radius: 48px; /* 设置大齿轮内部圆的圆角 */
    margin-left: -48px; /* 左偏移 */
    margin-top: -48px; /* 上偏移 */
}

.gear.one {
    top: 12px; /* 位置调整 */
    left: 10px; /* 位置调整 */
}

.gear.two {
    top: 61px; /* 位置调整 */
    left: 60px; /* 位置调整 */
}

.gear.three {
    top: 110px; /* 位置调整 */
    left: 10px; /* 位置调整 */
}

.gear.four {
    top: 13px; /* 位置调整 */
    left: 128px; /* 位置调整 */
}

.gear:after {
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    height: 36px; /* 设置齿轮内部圆的高度 */
    width: 36px; /* 设置齿轮内部圆的宽度 */
    border-radius: 36px; /* 设置齿轮内部圆的圆角 */
    background: #111; /* 设置齿轮内部圆的背景颜色 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    margin-left: -18px; /* 左偏移 */
    margin-top: -18px; /* 上偏移 */
    z-index: 3; /* 设置层级 */
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0, 0, 0, 0.1), inset 0px 2px 0px 0px #090909, inset 0px -1px 0px 0px #888888; /* 设置阴影效果 */
}

.gear-inner {
    position: relative; /* 相对定位 */
    height: 100%; /* 设置齿轮内部的高度 */
    width: 100%; /* 设置齿轮内部的宽度 */
    background: #555; /* 设置齿轮内部的背景颜色 */
    border-radius: 30px; /* 设置齿轮内部的圆角 */
    border: 1px solid rgba(255, 255, 255, 0.1); /* 设置边框 */
}

.large .gear-inner {
    border-radius: 60px; /* 设置大齿轮内部的圆角 */
}

.gear.one .gear-inner {
    animation: counter-clockwise 3s infinite linear; /* 设置逆时针旋转动画 */
}

.gear.two .gear-inner {
    animation: clockwise 3s infinite linear; /* 设置顺时针旋转动画 */
}

.gear.three .gear-inner {
    animation: counter-clockwise 3s infinite linear; /* 设置逆时针旋转动画 */
}

.gear.four .gear-inner {
    animation: counter-clockwise 6s infinite linear; /* 设置逆时针旋转动画 */
}

.gear-inner .bar {
    background: #555; /* 设置齿轮内部条的背景颜色 */
    height: 16px; /* 设置齿轮内部条的高度 */
    width: 76px; /* 设置齿轮内部条的宽度 */
    position: absolute; /* 绝对定位 */
    left: 50%; /* 水平居中 */
    margin-left: -38px; /* 左偏移 */
    top: 50%; /* 垂直居中 */
    margin-top: -8px; /* 上偏移 */
    border-radius: 2px; /* 设置齿轮内部条的圆角 */
    border-left: 1px solid rgba(255, 255, 255, 0.1); /* 设置左边框 */
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* 设置右边框 */
}

.large .gear-inner .bar {
    margin-left: -68px; /* 左偏移 */
    width: 136px; /* 设置大齿轮内部条的宽度 */
}

.gear-inner .bar:nth-child(2) {
    transform: rotate(60deg); /* 旋转角度为60度 */
}

.gear-inner .bar:nth-child(3) {
    transform: rotate(120deg); /* 旋转角度为120度 */
}

.gear-inner .bar:nth-child(4) {
    transform: rotate(90deg); /* 旋转角度为90度 */
}

.gear-inner .bar:nth-child(5) {
    transform: rotate(30deg); /* 旋转角度为30度 */
}

.gear-inner .bar:nth-child(6) {
    transform: rotate(150deg); /* 旋转角度为150度 */
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1469178.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安卓OpenGL添加水印并录制(二)---抖音录制原理

文章目录 前文回顾音频处理留个小思考总结 本文首发地址 https://h89.cn/archives/146.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 源码地址: Gitee: OpenGLRecorder 通过 前文 我们知道了如何采集 Camera 视频&#xff0c;叠加水印、贴纸保存为MP4&#xff0c;…

JavaScript+PHP实现视频文件分片上传

摘要 视频文件分片上传&#xff0c;整体思路是利用JavaScript将文件切片&#xff0c;然后循环调用上传接口 upload.php 将切片上传到服务器。这样将由原来的一个大文件上传变为多个小文件同时上传&#xff0c;节省了上传时间&#xff0c;这就是文件分片上传的其中一个好处。 上…

从故宫修建看「软件物料清单」的重要性 @安全历史01

故宫&#xff0c;这座中国传统文化的重要代表和象征性建筑已屹立近600年&#xff0c;是世界上现存规模最大、保存最为完整的木质结构古建筑之一。 故宫之所以能至今保存完好&#xff0c;除持续保护和修缮外&#xff0c;其使用的木材和砖石等材料也经过了精挑细选&#xff0c;保…

C++基础学习——哈希表的封装

目录 ​编辑 一&#xff0c;实现一个可封装的哈希表 1&#xff0c;哈希表的节点 2&#xff0c;哈希表的成员 3&#xff0c;哈希表成员方法的实现 4&#xff0c;迭代器的实现 5&#xff0c;在哈希表中加入迭代器 二&#xff0c;封装哈希表 1&#xff0c;unorder_map封装 2…

吴恩达deeplearning.ai:矩阵运算代码实战

神经网络向量化指的是将输入数据转化为向量形式&#xff0c;以便于神经网络的处理。向量化的作用包括以下几点&#xff1a; 提高计算效率&#xff1a;使用向量化的输入数据可以进行并行计算&#xff0c;加速神经网络的训练和推断过程。 减少存储空间&#xff1a;向量化可以将…

一种确定FET小信号等效电路的新方法

来源&#xff1a;A New Method for Determining the FET Small-Signal Equivalent Circuit&#xff08;88年 TMTT&#xff09; 摘要 - 提出了一种确定FET&#xff08;场效应晶体管&#xff09;小信号等效电路的新方法。该方法包括在低频段直接测定器件的外在和内在小信号参数。…

STM32_DS18B20_1_芯片简介及初始化配置

DS18B20介绍 DS18B20数字温度计提供9位到12位摄氏度的温度测量&#xff0c;并具有非易失性&#xff0c;用户可编程的上下触发点的报警功能。DS18B20通过1线总线进行通信&#xff0c;根据定义&#xff0c;该总线只需要一条数据线&#xff0c;即可与中央微处理器进行通信…

给定一个边与边可能相交的多边形,求它的轮廓线

大家好&#xff0c;我是前端西瓜哥。 最近遇到一个需求&#xff0c;给定一个多边形&#xff08;边与边可能相交&#xff09;&#xff0c;求这个多边形的轮廓线。 需要注意的是&#xff0c;轮廓线多边形内不能有空洞&#xff0c;使用的不是常见的非零绕数规则&#xff08;nonze…

2.23 Qt day4 事件机制+定时器事件+键盘事件+鼠标事件

思维导图&#xff1a; 做一个闹钟&#xff0c;在行编辑器里输入定闹钟的时间&#xff0c;时间到了就语音播报文本里的内容&#xff0c;播报五次 widget.h&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QDebug>//输出类 #include<…

JSON(javaScript Object Notation,Js对象标记)—我耀学IT

Json是一种轻量级的数据交换格式&#xff0c;目前使用非常广泛&#xff0c;是一种轻量级的数据交换格式。易于人阅读和编写&#xff0c;可以在多种语言之间进行数据交换 。同时也易于机器解析和生成 1.1json的值: 值可以是对象、数组、数字、字符串或者三个字面值(false、nul…

990-05产品经理:为什么商业价值是 IT 成功的关键

In today’s digital era, CIOs must shift(转移) their priorities from cost cutting to driving revenue(收入), and from process engineering to exploiting data if they want to achieve a set of broader business outcomes. Furthermore, understanding how to measur…

Mac OS 下载安装与破解Typora

文章目录 下载Typora破解Typora1. 进入安装目录2. 找到并打开Lincense文件3. 修改激活状态4. 重新打开Typora 下载Typora 官网地址&#xff1a;typora官网 下载最新Mac版&#xff0c;正常安装即可 破解Typora 打开typora,可以看到由于未激活&#xff0c;提示使用期限还剩下15…

09 呼吸灯

呼吸灯简介 呼吸灯实际展示的效果就是一个 LED 灯的亮度由亮到暗&#xff0c;再由暗到亮的变化过程&#xff0c;并且该过程是循环往复的&#xff0c;像呼吸一样那么有节奏。 呼吸灯通常是采用 PWM(Pulse Width Modulation&#xff0c;即脉冲宽度调制) 的方式实现&#xff0c;在…

超强随机短视频源码自带视频带支付源码

1.开启是否连续自动播放 2.支持手动点击看下一个 3.支持引流跳官方地址&#xff0c;产品地址&#xff0c;可以设置跳转地址 4.简洁大气&#xff0c;支持网站基础信息设置 5.支持设置定时多少时间弹广告 6.支持PC手机设置弹广告图片与点击后跳转链接 源码免费下载地址专业…

【Unity】双击C#脚本文件以单个文件打开(Visual Studio)、父类找不到、引用找不到、无法跳转等问题

问题&#xff1a;新安装一个Unity后&#xff0c;突然发现在工程里双击C#脚本&#xff0c;会一个一个打开&#xff0c;虽然也是用VS软件打开了&#xff0c;但是它无法被正确识别为Unity工程的C#脚本&#xff0c;也就是说所有命名空间无效&#xff0c;因为没关联上整个工程的解决…

OSCP靶场--Slort

OSCP靶场–Slort 考点(1.php 远程文件包含 2.定时任务提权) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.178.53 -sV -sC -p- --min-rate 5000 Starting Nmap 7.92 ( https://nmap.org ) at 2024-02-24 04:37 EST Nmap scan report for 192.168.178.53 …

Windows安装PHP及在VScode中配置插件,使用PHP输出HelloWorld

安装PHP PHP官网下载地址(8.3版本)&#xff1a;PHP For Windows&#xff1a;二进制文件和源代码发布 点击下载.zip格式压缩包&#xff1a; 历史版本在Old archives中下载。推荐在Documentation download中下载官方文档&#xff0c;方便学习。 下载完成后在一个顺眼的地方解压压…

Spring Boot 项目集成camunda流程引擎

使用camunda开源工作流引擎有&#xff1a;通过docker运行、使用springboot集成、部署camunda发行包、基于源代码编译运行等多种方式。 其中&#xff0c;通过源代码编译运行的方式最为复杂&#xff0c;具体参考&#xff1a;https://lowcode.blog.csdn.net/article/details/1362…

vivado VHDL Objects、VHDL实体描述

VHDL对象包括&#xff1a;信号、变量、常量和运算符。 信号 在中声明VHDL信号&#xff1a; •体系结构声明部分&#xff1a;在该体系结构内的任何位置使用VHDL信号。 •一个块&#xff1a;在该块中使用VHDL信号。 使用<信号分配运算符分配VHDL信号。 signal sig1 : std…

企业计算机服务器中了malloxx勒索病毒怎么办?Malloxx勒索病毒解密数据恢复

网络技术的不断更新与发展&#xff0c;为企业的发展提供了强有力数据支撑&#xff0c;在企业的生产运营过程中&#xff0c;企业数据扮演着重要的角色&#xff0c;通过企业数据可以更好地总结调整企业的规划发展方向与日常数据统计&#xff0c;但利用网络技术的支撑就要防范网络…