spin

最新推荐文章于 2022-08-01 20:15:05 发布
原创 最新推荐文章于 2022-08-01 20:15:05 发布 · 591 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了使用CSS进行复杂动画及布局的设计方案，包括不同浏览器兼容性的处理方式，通过具体的实例展示了如何创建旋转动画效果、定位元素以及实现平滑过渡等。 
<!DOCTYPE HTML>
<html lang="utf-8">
    <head>
    <title>cehis</title>
    <meta http-equiv="Content-type" content="text/html; utf-8">
    <style type="text/css">
        body {
            font-size: 24px;
        }
        #spinxg span {
            display: block;
            position: absolute;
            width: 20em;
            height: 20em;
            top: -webkit-calc(50% - 10em);
            top: -moz-calc(50% - 10em);
            top: calc(50% - 10em);
            left: -webkit-calc(50% - 10em);
            left: -moz-calc(50% - 10em);
            left: calc(50% - 10em);
        }

        #spinxg .large-circle {
            -wekbit-animation: spin1 10s linear infinite;
            -moz-animation: spin1 10s linear infinite;
            -o-animation: spin1 10s linear infinite;
            animation: spin1 10s linear infinite;
        }

        #spinxg .small-circle {
            -wekbit-animation: spin1 20s linear infinite;
            -moz-animation: spin1 20s linear infinite;
            -o-animation: spin1 20s linear infinite;
            animation: spin1 20s linear infinite;
        }
        #spinxg .smallsc {
            width: 4em;
            height: 4em;
            position: absolute;
            left: -webkit-calc(50% - 2em);
            left: -moz-calc(50% - 2em);
            left: calc(50% - 2em);
            top: -webkit-calc(50% - 15em);
            top: -moz-calc(50% - 15em);
            top: calc(50% - 15em);
            -webkit-transform-origin: 50% 15em;
            -moz-transform-origin: 50% 15em;
            -o-transform-origin: 50% 15em;
            transform-origin: 50% 15em;

        }
        #spinxg .smallsc:nth-child(1) {
            background: rgba(16,63,236,0.75);
            -webkit-transform: rotateZ(0);
            -moz-transform: rotateZ(0);
            transform: rotateZ(0);
        }
        #spinxg .smallsc:nth-child(2) {
            background: rgba(37,172,162,0.75);
            -webkit-transform: rotateZ(45deg);
            -moz-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }
        #spinxg .smallsc:nth-child(3) {
            background: rgba(233,124,32,0.75);
            -webkit-transform: rotateZ(90deg);
            -moz-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }
        #spinxg .smallsc:nth-child(4) {
            background: rgba(235,67,35,0.75);
            -webkit-transform: rotateZ(135deg);
            -moz-transform: rotateZ(135deg);
            transform: rotateZ(135deg);
        }
        #spinxg .smallsc:nth-child(5) {
            background: rgba(190,28,65,0.75);
            -webkit-transform: rotateZ(180deg);
            -moz-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
        }
        #spinxg .smallsc:nth-child(6) {
            background: rgba(208,57,159,0.75);
            -webkit-transform: rotateZ(225deg);
            -moz-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
        }
        #spinxg .smallsc:nth-child(7) {
            background: rgba(150,32,198,0.75);
            -webkit-transform: rotateZ(270deg);
            -moz-transform: rotateZ(270deg);
            transform: rotateZ(270deg);
        }
        #spinxg .smallsc:nth-child(8) {
            background: rgba(95,33,203,0.75);
            -webkit-transform: rotateZ(315deg);
            -moz-transform: rotateZ(315deg);
            transform: rotateZ(315deg);
        }
        #spinxg .circle {
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
        }
        #spinxg .squire {
            -webkit-border-radius: 25%;
            -moz-border-radius: 25%;
            border-radius: 25%;
        }
        #spinxg .lcircle {
            position: absolute;
            width: 12.5em;
            height: 12.5em;
            border-top: .1px solid rgba(255, 255, 255, 0.4);
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            top: -webkit-calc(50% - 12.5em);
            top: -moz-calc(50% - 12.5em);
            top: calc(50% - 12.5em);
            left: -webkit-calc(50% - 6.25em);
            left: -moz-calc(50% - 6.25em);
            left: calc(50% - 6.25em);
            -webkit-box-shadow: 0 1em 2em rgba(0,0,0,0.5);
            -moz-box-shadow: 0 1em 2em rgba(0,0,0,0.5);
            box-shadow: 0 1em 2em rgba(0,0,0,0.5);
            -webkit-transform-origin: 50% 12.5em;
            -moz-transform-origin: 50% 12.5em;
            -o-transform-origin: 50% 12.5em;
            transform-origin: 50% 12.5em;
        }

        #spinxg .lcircle:nth-child(1) {
            background: rgba(16,63,236,0.75);
            -webkit-transform: rotateZ(0);
            -moz-transform: rotateZ(0);
            transform: rotateZ(0);
        }
        #spinxg .lcircle:nth-child(2) {
            background: rgba(37,172,162,0.75);
            -webkit-transform: rotateZ(45deg);
            -moz-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }
        #spinxg .lcircle:nth-child(3) {
            background: rgba(233,124,32,0.75);
            -webkit-transform: rotateZ(90deg);
            -moz-transform: rotateZ(90deg);
            transform: rotateZ(90deg);
        }
        #spinxg .lcircle:nth-child(4) {
            background: rgba(235,67,35,0.75);
            -webkit-transform: rotateZ(135deg);
            -moz-transform: rotateZ(135deg);
            transform: rotateZ(135deg);
        }
        #spinxg .lcircle:nth-child(5) {
            background: rgba(190,28,65,0.75);
            -webkit-transform: rotateZ(180deg);
            -moz-transform: rotateZ(180deg);
            transform: rotateZ(180deg);
        }
        #spinxg .lcircle:nth-child(6) {
            background: rgba(208,57,159,0.75);
            -webkit-transform: rotateZ(225deg);
            -moz-transform: rotateZ(225deg);
            transform: rotateZ(225deg);
        }
        #spinxg .lcircle:nth-child(7) {
            background: rgba(150,32,198,0.75);
            -webkit-transform: rotateZ(270deg);
            -moz-transform: rotateZ(270deg);
            transform: rotateZ(270deg);
        }
        #spinxg .lcircle:nth-child(8) {
            background: rgba(95,33,203,0.75);
            -webkit-transform: rotateZ(315deg);
            -moz-transform: rotateZ(315deg);
            transform: rotateZ(315deg);
        }
        #spinxg .content-circle {
            -wekbit-animation: spin 30s linear infinite;
            -moz-animation: spin 20s linear infinite;
            -o-animation: spin 30s linear infinite;
            animation: spin 30s linear infinite;
        }
        #spinxg .squircicle {
            background: rgba(30,7,66,0.65);
            width: 15em;
            height: 15em;
            position: absolute;
            top: -webkit-calc(50% - 7.5em);
            top: -moz-calc(50% - 7.5em);
            top: calc(50% - 7.5em);
            left: -webkit-calc(50% - 7.5em);
            left: -moz-calc(50% - 7.5em);
            left: calc(50% - 7.5em);
            border: none;
            -webkit-border-radius: 25%;
            -moz-border-radius: 25%;
            border-radius: 25%;
            -webkit-transform: rotateZ(45deg);
            -moz-transform: rotateZ(45deg);
            transform: rotateZ(45deg);
        }

        @-webkit-keyframes spin1 {
            0% {
                -webkit-transform: rotateZ(0);
                -moz-transform: rotateZ(0);
                transform: rotateZ(0);
            }
            100% {
                -webkit-transform: rotateZ(360deg);
                -moz-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }
        }
        @-moz-keyframes spin1 {
            0% {
                -webkit-transform: rotateZ(0);
                -moz-transform: rotateZ(0);
                transform: rotateZ(0);
            }
            100% {
                -webkit-transform: rotateZ(360deg);
                -moz-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }       }
        @-o-keyframes spin1 {
            0% {
                -webkit-transform: rotateZ(0);
                -moz-transform: rotateZ(0);
                transform: rotateZ(0);
            }
            100% {
                -webkit-transform: rotateZ(360deg);
                -moz-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }
        }
        @keyframes spin1 {
            0% {
                -webkit-transform: rotateZ(0);
                -moz-transform: rotateZ(0);
                transform: rotateZ(0);
            }
            100% {
                -webkit-transform: rotateZ(360deg);
                -moz-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }
        }

        @-webkit-keyframes spin {
            0% {
                -webkit-transform: scale(1) rotateZ(0);
                -moz-transform: scale(1) rotateZ(0);
                transform: scale(1) rotateZ(0);
            }
            50% {
                -webkit-transform: scale(0.8) rotateZ(180deg);
                -moz-transform: scale(0.8) rotateZ(180deg);
                transform: scale(0.8) rotateZ(180deg);
            }
            100% {
                -webkit-transform: scale(1) rotateZ(360deg);
                -moz-transform: scale(1) rotateZ(360deg);
                transform: scale(1) rotateZ(360deg);
            }
        }
        @-moz-keyframes spin {
            0% {
                -webkit-transform: scale(1) rotateZ(0);
                -moz-transform: scale(1) rotateZ(0);
                transform: scale(1) rotateZ(0);
            }
            50% {
                -webkit-transform: scale(0.8) rotateZ(180deg);
                -moz-transform: scale(0.8) rotateZ(180deg);
                transform: scale(0.8) rotateZ(180deg);
            }
            100% {
                -webkit-transform: scale(1) rotateZ(360deg);
                -moz-transform: scale(1) rotateZ(360deg);
                transform: scale(1) rotateZ(360deg);
            }
        }
        @-o-keyframes spin {
            0% {
                -webkit-transform: scale(1) rotateZ(0);
                -moz-transform: scale(1) rotateZ(0);
                transform: scale(1) rotateZ(0);
            }
            50% {
                -webkit-transform: scale(0.8) rotateZ(180deg);
                -moz-transform: scale(0.8) rotateZ(180deg);
                transform: scale(0.8) rotateZ(180deg);
            }
            100% {
                -webkit-transform: scale(1) rotateZ(360deg);
                -moz-transform: scale(1) rotateZ(360deg);
                transform: scale(1) rotateZ(360deg);
            }
        }
        @keyframes spin {
            0% {
                -webkit-transform: scale(1) rotateZ(0);
                -moz-transform: scale(1) rotateZ(0);
                transform: scale(1) rotateZ(0);
            }
            50% {
                -webkit-transform: scale(0.8) rotateZ(180deg);
                -moz-transform: scale(0.8) rotateZ(180deg);
                transform: scale(0.8) rotateZ(180deg);
            }
            100% {
                -webkit-transform: scale(1) rotateZ(360deg);
                -moz-transform: scale(1) rotateZ(360deg);
                transform: scale(1) rotateZ(360deg);
            }
        }
    </style>
    </head>


    <body>
    <div id="spinxg">
        <span class="large-circle">
            <div class="lcircle one"></div>
            <div class="lcircle two"></div>
            <div class="lcircle three"></div>
            <div class="lcircle four"></div>
            <div class="lcircle five"></div>
            <div class="lcircle six"></div>
            <div class="lcircle seven"></div>
            <div class="lcircle eight"></div>
        </span>
        <span class="small-circle">
            <div class="smallsc circle one"></div>
            <div class="smallsc squire two"></div>
            <div class="smallsc circle three"></div>
            <div class="smallsc squire four"></div>
            <div class="smallsc circle five"></div>
            <div class="smallsc squire six"></div>
            <div class="smallsc circle seven"></div>
            <div class="smallsc squire eight"></div>
        </span>
        <span class="content-circle">
            <div class="content squircicle"></div>
        </span>
    </div>
    </body>
</html>
精选资源
基于MM32SPIN080C 无感方波BLDC驱动篇应用笔记
09-06
MM32SPIN080C作为一款高性能的微控制器，特别适用于无感方波控制的BLDC电机驱动方案。在此应用笔记中，将会详细展示如何基于MM32SPIN080C实现无感方波控制策略，包括硬件设计、软件配置以及参数调试等关键技术环节。...
Unity Spin动画
IYN的博客
01-18 1388
Spin 动画的问题总结 项目中我们用到了许多的Spin动画，也遇到了许多问题，特意记录一下，以后遇到好知道怎么解决，毕竟好记性不如烂笔头。 动画混合 Default Mix Duration 在使用中遇到了播放一个动作之后继续播放下一个动作，但是中午切换过程总有异常动作出现，不是所想的播放完一个就播放下一个，查找文档发现因为动画的混合导致，修改了动画的Default Mix Duration字段解决了问题，这个应该就是类似Animator中的动画缓冲，为了让动画切换不突兀做了缓冲导致的。 切换动画残影BU
css animation 平移,CSS动画相关（打字动画、逐帧动画、环形路径平移）
weixin_39609622的博客
08-03 881
一、 逐帧动画很多时候，我们需要一个很难只通过CSS属性来实现的动画，比如一个复杂的进度提示框，在这样场景下基于图片的逐帧动画才是王道。看到动画，你可能会想：[直接用GIF不就得了嘛，搞这么复杂的CSS干嘛]。不用GIF肯定是GIF有短板。呐，短板如下：GIF颜色被限制在256色不能实现半透明效果无法在CSS层修改动画的参数，例如持续时间、循环次数等，GIF动画一旦生成这些参数就固定在文件内部，若...
css animation动画
webZRH的博客
08-28 711
background-image: url(../assets/img/home-btn.png); background-size: 100%; background-repeat: no-repeat; animation: spin 4s linear infinite; transform-origin: 50% 50%;
css3 animation备忘
陶山是山
04-17 367
css3 的动画功能，可以取代许多用js实现的动画效果。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。制定规则后需把它绑定到一个选择器上。 hack: @keyframes myfirst { 25% {background:yellow;} 50% {background:blue;} }
【前端入门系列】HTML5动画与动效（之二）
kongxiaofeng0427的博客
09-27 1178
【前端入门系列】HTML5动画与动效（之二） 刘欢 5 个月前 在本系列的第一篇文章中我们对transition动画有了基础的了解，本节我们将通过为图标元素创建动画效果，以此来着重学习另一种动画制作方法：animation动画。因此，本节的主题就是animation动画的理解与运用。 什么是animation动画？ 和transition动画一样，animat
SPIN_BASIC.rar_SPIN_SPIN算法源程序_spin basic_spin算法
07-14
在WSNs中，数据收集和处理是一个关键问题，而SPIN（Sensor Protocol for Information via Negotiation）算法就是为了优化这种数据传输而设计的一种协议。SPIN算法由Dana D. Holcombe于2001年提出，其目标是高效地...
精选资源
MM32 SPIN MCU 电机 FOC 驱动应用指导手册
03-22
《MM32 SPIN MCU 电机FOC驱动应用指导手册》是针对灵动微电子推出的MM32 SPIN系列32位微处理器在无位置传感器风机FOC（Field Oriented Control，磁场定向控制）弦波驱动解决方案的一份详尽指南。这份手册主要涵盖了...
Self-Play Fine-Tuning (SPIN)的实现
02-13
SPIN 利用自玩机制，允许 LLM 通过与以前的迭代进行博弈来改进自己，而不需要比 SFT 数据集本身更多的人工注释偏好数据。更具体地说，LLM 从之前的迭代中生成自己的训练数据，通过从原始 SFT 数据中辨别这些自生成的...
使用animation实现环形加载器
xiaozhuangyumaotao的博客
04-17 177
在“使用animation制作进度条”这篇文章里面，我利用css的animation属性制作了一个无限循环滚动的滚动条，换个思路，既然可以制作直线的，能不能制作圆形的呢？就像下面这样： html巨简单： <!--donut:圆形图--> <divclass="donut"></div> css定义： <style> @keyfr...
超级炫酷动画分享
six6de6的博客
08-01 267
css动画的高阶案例
css3动画定义动画效果_CSS动画教程
cuk0051的博客
08-30 702
css3动画定义动画效果Introduction 介绍 A CSS Animations Example CSS动画示例 The CSS animation properties CSS动画属性 JavaScript events for CSS Animations CSS动画JavaScript事件 Which Properties You Can Animate using CSS Anim...
SPIN Routing Algorithm
坟头草一米七五
01-14 3101
平面路由协议仿真——SPIN算法 仿真软件——MATLAB
动画animation的三个应用（漂浮的白云、旋转的星球、正方体合成）
qq_32849999的博客
08-21 2531
参考https://www.cnblogs.com/xiaohuochai/p/5419236.html （含动画效果） 漂浮的白云 【效果演示】   【简要介绍】 　　漂浮的白云主要通过远景白云和近景白云来实现立体漂浮效果。远景和近景分别使用两张背景图片，通过改变其背景定位来实现白云移动效果，通过设置不同的动画持续时间来实现交错漂浮的效果 【主要代码】 .box{ p...
css3 animation(loading)
chenxi1025的博客
08-24 1171
看见别人些的加载的动画，觉得特别炫酷，然后我也试着自己写咯一个，这个动画是用的纯html 和 css3写的。 思路：       1、先定义一个大盒子，转需要用的元素       2、对需要做动画的标签进行定位操作      3、用css3实现你要的表情效果       其他的废话就不多少咯，具体请看下面的代码，不明白的地方，随时都可以call 我 html代码：
3D动画
github_34205086的博客
03-16 650
其实是很简单的一个CSS3动画应用，不过一个简单的demo打开了动画的大门，还是很有意思的。这儿先强烈推荐大神的有关博客，看得小女生很不好意思，虽然是很久以前写的，但是原理和思想还是很值得借鉴的。 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/先说说trans
css3的动画特效--元素旋转（transition，animation）
NeiHan2020的博客
12-14 6814
css3的动画特效--元素旋转（transition，animation） 开发中，视觉要你实现一个元素的旋转问题，比如说如下图所示： 思路：首先动画动效肯定离不开anmimation动画。 和transition动画一样，animation动画也是CSS3动画的一种，这类动画可以理解为是一种关键帧动画，它可以预先为动画设置多个节点，在每个节点中含有不同的状态属性，通过使用animation动画我们可以得到更为复杂的动画效果。 注意：transition是为页面元素设置某个需要产生动画效果的属性
jQuery选择器和JS选择器
热门推荐
shadow_yn的博客
07-27 1万+
jQuery选择器： jQuery选择器的写法和CSS选择器的写法非常相似，在学习之前了解下CSS选择器，对掌握jQuery选择器是非常有帮助的(一) 基本选择器：主要包含id选择器、class选择器、*选择器、标签选择器以及复合选择器a: Id选择器：$(“#ID”) 选取id属性为“ID”的元素$("#text") //选取id属性为“text”的元素b:class选择器：$(“.cla
SPIN
最新发布
05-27
### SPIN协议在无线传感网络(WSN)中的应用和工作原理 #### 1. SPIN协议简介 SPIN（Simple Protocol for Information Negotiation）是一种专为无线传感器网络设计的轻量级路由协议。它的核心理念是通过协商机制来传递必要信息，从而减少冗余数据传输并提高能效[^2]。相比于传统的泛洪(Flooding)或闲聊传播(Gossiping)，SPIN能够显著降低能量消耗，同时改善网络的整体性能。 #### 2. SPIN协议的工作流程 SPIN协议主要包括三个阶段：广告(Advertise)、请求(Request)和数据(Data)[^2]。具体如下： - **广告阶段** 当一个节点拥有可共享的数据时，它会向周围的邻居广播一条`ADV`消息，表示自己有可用的新颖数据可以提供。这条消息包含了关于数据的一些元信息(metadata)，比如数据类型或其他描述特征[^2]。 - **请求阶段** 接收到`ADV`消息的邻居节点如果对该数据感兴趣，则会回传一条`REQ`消息给原始发布者，表明希望获取完整的数据包[^2]。 - **数据传输阶段** 发布者接收到`REQ`后，便将实际的数据内容发送给感兴趣的邻居节点完成交易过程。 这种基于需求驱动的数据交换方式有效地避免了传统Flooding带来的“重叠效应”，同时也减少了不必要的能量损耗。 ```python class Node: def __init__(self, id_, energy): self.id_ = id_ self.energy = energy self.data_available = False def advertise(self): """Broadcast ADV message to neighbors.""" if self.data_available and self.energy > 0: print(f"[Node-{self.id_}] Broadcasting ADV...") return True else: return False def request_data(self, sender_id): """Send REQ message back to the data owner.""" if self.energy > 0: print(f"[Node-{self.id_}] Sending REQ to Node-{sender_id}...") return True else: return False def send_data(self, receiver_id): """Transmit actual DATA packet upon receiving REQ.""" if self.data_available and self.energy > 0: print(f"[Node-{self.id_}] Transmitting DATA to Node-{receiver_id}...") self.energy -= 1 # Simulate energy consumption return True else: return False ``` --- #### 3. SPIN协议的优势与局限性 - **优势** - 减少了冗余数据传输，提高了带宽利用率。 - 更好地管理有限的能量资源，延长网络寿命。 - 提供了一种灵活且高效的协商机制用于数据分发。 - **局限性** - 对于高密度网络可能仍会产生较高的信令开销。 - 可能存在某些情况下未能充分利用所有可用路径的情况[^4]。 --- #### 4. 应用场景分析 SPIN特别适合应用于小型到中型规模的无线传感网络环境，尤其是在以下条件下表现优异： - 数据更新频率较低； - 感兴趣事件的发生位置相对集中或者已知； - 总体所需传输的数据量不大[^1]。 此外，由于其简单的实现逻辑和较强的适应能力，SPIN也被视为研究复杂自组织网络架构的良好起点之一[^3]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值