spin

最新推荐文章于 2022-08-01 20:15:05 发布
最新推荐文章于 2022-08-01 20:15:05 发布
阅读量537 收藏
点赞数
分类专栏： jQuery-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shadow_yn/article/details/50340985
版权 
<!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>
shadow_yn
关注
专栏目录
Unity Spin动画
IYN的博客
01-18 912
Spin 动画的问题总结 项目中我们用到了许多的Spin动画，也遇到了许多问题，特意记录一下，以后遇到好知道怎么解决，毕竟好记性不如烂笔头。 动画混合 Default Mix Duration 在使用中遇到了播放一个动作之后继续播放下一个动作，但是中午切换过程总有异常动作出现，不是所想的播放完一个就播放下一个，查找文档发现因为动画的混合导致，修改了动画的Default Mix Duration字段解决了问题，这个应该就是类似Animator中的动画缓冲，为了让动画切换不突兀做了缓冲导致的。 切换动画残影BU
Spin语法
dcjmessi的博客
07-25 155
例如，如果要在_ch4_end页面上的示例中在Dijkstra类型的过程中引用变量count，则可以使用语法Dijkstra [0]：count来实现，或者，如果只有一个这样的过程，我们可以 使用较短的形式Dijkstra：count。在这种情况下，接收操作的可执行性的另一个条件是，指定为常量的所有消息字段的值都与位于通道开头的消息中的相应字段的值匹配。请注意，如果将len用作语句，而不是在赋值的右侧，则如果通道为空，它将是不可执行的：它返回零结果，根据定义，这意味着该语句暂时不可执行。
css animation动画
webZRH的博客
08-28 633
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 312
css3 的动画功能，可以取代许多用js实现的动画效果。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。制定规则后需把它绑定到一个选择器上。 hack: @keyframes myfirst { 25% {background:yellow;} 50% {background:blue;} }
【前端入门系列】HTML5动画与动效（之二）
kongxiaofeng0427的博客
09-27 1008
【前端入门系列】HTML5动画与动效（之二） 刘欢 5 个月前 在本系列的第一篇文章中我们对transition动画有了基础的了解，本节我们将通过为图标元素创建动画效果，以此来着重学习另一种动画制作方法：animation动画。因此，本节的主题就是animation动画的理解与运用。 什么是animation动画？ 和transition动画一样，animat
超级炫酷动画分享
six6de6的博客
08-01 195
css动画的高阶案例
spin控件
WayToAccept的专栏
10-22 743
1.      VC++中的spin控件 对于spin控件之前也不了解，后来在修改一个上位机时突然用到，索性上网百度了一下。 对于spin控件的用法我就不再细说，主要是通过点击上下按钮来修改另一个控件的值数值，所以spin控件又叫伙伴控件（一般两个控件一起用）。 Spin控件方法有：   实际中将常用的是：SetRange()和SetBuddy()。
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 数据中辨别这些自生成的...
MM32SPIN05PF数据中文手册.rar
09-11
MM32SPIN05PF是一款基于Arm Cortex-M0内核的微控制器，由兆易创新（GigaDevice）公司生产。这款芯片专为低功耗、高性能的应用设计，广泛应用于智能家居、工业控制、消费电子等领域。数据中文手册是理解并使用MM32...
css3动画定义动画效果_CSS动画教程
cuk0051的博客
08-30 608
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...
css3 animation(loading)
chenxi1025的博客
08-24 1072
看见别人些的加载的动画，觉得特别炫酷，然后我也试着自己写咯一个，这个动画是用的纯html 和 css3写的。 思路：       1、先定义一个大盒子，转需要用的元素       2、对需要做动画的标签进行定位操作      3、用css3实现你要的表情效果       其他的废话就不多少咯，具体请看下面的代码，不明白的地方，随时都可以call 我 html代码：
SPIN Routing Algorithm
坟头草一米七五
01-14 2672
平面路由协议仿真——SPIN算法 仿真软件——MATLAB
css animation 平移,CSS动画相关（打字动画、逐帧动画、环形路径平移）
weixin_39609622的博客
08-03 745
一、 逐帧动画很多时候，我们需要一个很难只通过CSS属性来实现的动画，比如一个复杂的进度提示框，在这样场景下基于图片的逐帧动画才是王道。看到动画，你可能会想：[直接用GIF不就得了嘛，搞这么复杂的CSS干嘛]。不用GIF肯定是GIF有短板。呐，短板如下：GIF颜色被限制在256色不能实现半透明效果无法在CSS层修改动画的参数，例如持续时间、循环次数等，GIF动画一旦生成这些参数就固定在文件内部，若...
3D动画
github_34205086的博客
03-16 590
其实是很简单的一个CSS3动画应用，不过一个简单的demo打开了动画的大门，还是很有意思的。这儿先强烈推荐大神的有关博客，看得小女生很不好意思，虽然是很久以前写的，但是原理和思想还是很值得借鉴的。 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/先说说trans
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
JSON.parse()与JSON.stringify() （浏览器兼容性：IE8以上、Chrome、Firefox3.5、Opera10.5、Safari4.0）
shadow_yn的博客
07-16 7461
JSON.parse():将JavaScript对象表示法（JSON）字符串转换为对象（不允许以逗号结束），格式为：JSON.parse(string[,reviver]) //string:必需的，要进行解析的有效的JSON字符串 //reviver：可选，用来转换解析出的属性值的函数 //返回值为一个从string字符串中解析出的对象或者数组一个简单的实例如下：var str = '{"name
spin mingw
11-15
Spin是一个开源的仿真器工具，可以用来对多核系统进行建模、仿真和验证。它支持多种处理器架构和操作系统，包括Mingw，是一个Windows下的开发环境，可以用来编译和运行GNU软件。在使用Spin时，也可以选择Mingw作为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值