程序员经验分享-hwhale

HTML5中制作彩色圆环的代码,HTML5 五彩圆环Loading加载动画实现教程

2023-10-27

fb2545fdb02daa7438fb890029d13fb5.png

HTML代码：

CSS代码：

69c5a8ac3fa60e0848d784a6dd461da6.png

@-webkit-keyframes spin {

from {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

to {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

}

@keyframes spin {

from {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

to {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

}

@-webkit-keyframes osc {

0% {

-webkit-transform: scale(0.5);

transform: scale(0.5);

opacity: 0;

}

50% {

-webkit-transform: scale(1.5);

transform: scale(1.5);

opacity: 1;

}

100% {

-webkit-transform: scale(0.5);

transform: scale(0.5);

opacity: 0;

}

}

@keyframes osc {

0% {

-webkit-transform: scale(0.5);

transform: scale(0.5);

opacity: 0;

}

50% {

-webkit-transform: scale(1.5);

transform: scale(1.5);

opacity: 1;

}

100% {

-webkit-transform: scale(0.5);

transform: scale(0.5);

opacity: 0;

}

}

@-webkit-keyframes rainbow {

0% {

background: #df2020;

}

25% {

background: #80df20;

}

50% {

background: #20dfdf;

}

75% {

background: #7f20df;

}

100% {

background: #df2020;

}

}

@keyframes rainbow {

0% {

background: #df2020;

}

25% {

background: #80df20;

}

50% {

background: #20dfdf;

}

75% {

background: #7f20df;

}

100% {

background: #df2020;

}

}

JS代码如下：

69c5a8ac3fa60e0848d784a6dd461da6.png

var num = 7,

ang = 360/num,

rad = num*5;

function setup(){

for(var i=0; i

var button = document.createElement(‘div‘);

button.className = "dot"+i+" dot";

button.style.top = rad*Math.cos(ang*i*Math.PI/180)-10+"px";

button.style.left = rad*Math.sin(ang*i*Math.PI/180)-10+"px";

button.style.backgroundColor = "hsla("+ang*i+", 50%, 50%, 1)";

button.style.webkitAnimation =

"osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s";

button.style.animation =

"osc 2s ease-in-out infinite "+i/(num/2)+"s, rainbow 8s infinite "+i/(num/2)+"s, spin 1s infinite";

document.getElementById("hold").appendChild(button);

}

}

原文：http://www.cnblogs.com/lw941/p/3915182.html

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5中制作彩色圆环的代码

HTML5中制作彩色圆环的代码,HTML5 五彩圆环Loading加载动画实现教程 的相关文章

  • 揭开正则表达式的神秘面纱

    正则表达式30分钟入门教程 http deerchao net tutorials regex regex htm 揭开正则表达式的神秘面纱 http www regexlab com zh regref htm 原创文章 转载请保留或注明

  • angular：ng-star-inserted作用

    参考 javascript Angular 5 adds ng star inserted in some classes what is that Stack Overflow BrowserAnimationsModule来使用的 控制

  • chatgpt赋能python：如何用Python输出HelloWorld？

    如何用Python输出Hello World 作为初学者入门Python编程 输出Hello World是一个最基本的练习 那么 究竟该如何用Python输出Hello World呢 环境准备 在开始之前 需要先安装Python 并确保环境

  • （亲试有效）u盘制作启动盘后空间容量变小解决方法

    问题 大家有可能使用U盘来制作启动盘的需要 但是使用过来发现U盘的空间容量变小了 1G 2G 4G 8G 16G等变成了几百M都有可能 但是无论你再怎么格式化 还是找不回原来的空间容量 怎么办呢 自己经历过 亲身体验有效 方法简单 所以写出

  • 百度交易中台之账房系统架构浅析

    导读 百度交易中台作为集团移动生态战略的基础设施 面向收银交易与清分结算场景 为赋能业务提供高效交易生态搭建 目前支持百度体系内多个产品线 主要包含 小程序 地图打车 百家号 招财猫 好看视频等 本文主要介绍了百度交易中台的商户财务对账相关

  • 关于获取时间戳函数gettimeofday的用法小结

    Linux下gettimeofday函数 2020年6月8日16点33分 函数头文件及原型为 include

  • 常用LaTex指令

    目录 表格 跨行 列 表格 图片 双栏图片 单栏图片 多图 左中右 字体 加粗 斜体 公式 加粗 向量 花体 只适用于大写字母 引用参考文献 引用图片 表格 公式等 脚注 行号 单栏 双栏 格式 去除页码 表格 跨行 列 表格 begin

  • idea 使用Maven 建web项目模板选择

    1 选择模板 2 修改pom xml文件 3 完善目录 需要添加的目录 4 修改web xml 版本 最后修改web xm名即可 完成

  • kafka入门案例

    来源 我是码农 转载请保留出处和链接 本文链接 http www 54manong com id 1228 Conumer demo1 java内容如下 package com lenovo kafka demo import org ap

  • QT 设置样式的两种方式

    1 通过直接加载样式表文件 若现为整个APP加载同一个样式表文件 可直接读取整个qss文件 然后QApplication 设置样式表的成员函数最终继承自父类QGuiApplication 的类对象执行a setStyleSheet cons

  • 星星之火-59：ETSI与FCC在5GHz非授权频谱LAA上要求的差异

    目录 1 ETSI与FCC概述 2 ETSI与FCC在5GHz非授权频谱的比较 2 1 频谱概述 2 2 可用信道数的差异 2 3 基站的发送功率的差异 2 3 雷达信号规范的差异 1 ETSI与FCC概述 ETSI 欧洲电信标准化协会 E

  • golang中的类型断言

    goLang有类型转换 类型断言 类型切换 1 接口类型断言 类型断言就是将接口类型的值 x 装换成类型 T 成功则返回 T 的实例 格式为 x T 不安全 会造成panic 程序中断 v x T 不安全 会造成panic 程序中断 v o

  • Java基础如何学扎实的经验之谈

    文章目录 一 知道Java学习的整体框架 Java基础 Java高级 JavaWeb 二 该怎么学习 入门工具 入门书籍推荐 三 怎么边学边敲代码 训练提示 解题方案 操作步骤 参考代码 四 记笔记的方法 五 其他 六 解决问题的能力 首先

  • java string 转小写_Java String toLowerCase（）(String转小写)与示例 - Break易站

    Java 字符串 Java String toLowerCase String转小写 与示例 Java字符串toLowerCase 方法中的字符串的所有字符转换为小写字母 有两种类型的toLowerCase 方法 签名 public Str

  • 通俗讲解：什么是Web

    转自 微点阅读 https www weidianyuedu com content 1017370521955 html 简单的说Web就是为用户提供的一种在互联网上浏览信息的服务 Web服务是动态的 可交互的 跨平台的和图形化的 Web

  • vscode安装_VsCode安装shader glsl环境

    在扩展tab中搜索Shader languages support for VS Code sls for vs code插件 2 安装后搜索glsl canvas 并安装 glsl canvas插件 至此环境安装完成 可新建个工程测试 测

  • v-model cannot be used on v-for or v-slot scope variables because they are not writable报错问题解决方案

    报错 错误代码 div div

  • redis 集合排重_使用Redis的有序集合实现排行榜功能

    游戏中存在各种各样的排行榜 比如玩家的等级排名 分数排名等 玩家在排行榜中的名次是其实力的象征 位于榜单前列的玩家在虚拟世界中拥有无尚荣耀 所以名次也就成了核心玩家的追求目标 一个典型的游戏排行榜包括以下常见功能 能够记录每个玩家的分数 能

  • ros tf

    欢迎访问我的博客首页 tf 1 tf 命令行工具 1 1 发布 tf 1 2 查看 tf 2 参考 1 tf 命令行工具 1 1 发布 tf 我们根据 cartographer ros 的 launch 文件 backpack 2d lau

随机推荐

  • 【Python】《Python编程：从入门到实践 (第2版) 》笔记-Chapter2-变量和简单数据类型

    二 变量和简单数据类型 在程序中可随时修改变量的值 而Python将始终记录变量的最新值 message Hello Python world print message message Hello Python Crash Course

  • hashCode的性能优化

    本文主要讨论下不同的hashCode 实现对应用程序的性能影响 hashCode 方法的一个主要作用就是使得对象能够成为哈希表的key或者散列集的成员 但同时这个对象还得实现equals Object 方法 它和hashCode 的实现必须

  • visio图标_弱电间机柜原型图整理，可编辑！（Excel，visio，CAD）

    有朋友问到机柜原型图 这个我们在弱电vip技术群里面也有朋友提到过 今天我们就整理了弱电系统中常用的机柜原型图 有Excel visio CAD版本 可以修改编辑 1 Excel机柜原型图 可编辑 机柜布局 1 机柜布局 2 机柜布局 3

  • C++全局对象初始化依赖关系处理

    class A private int m nSize public A m nSize 100 m pList new char 4 memset m pList 0 sizeof 4 sizeof char int GetSize re

  • 使用基础粒子群(PSO)算法求解一元及二元方程的Python代码

    最近在看清风的数学建模视频 其中有两道题 求一元函数的最值问题 题目 求函数 y 11 s i n x

  • 小谈Intel SGX

    目录 Intel SGX简介 背景 为什么要Intel SGX Intel SGX尚处于学术讨论 Intel SGX和可信启动什么关系 开发者眼中SGX长什么样子 SGX访问控制是什么 MEE与SGX EPC内存加密 CPU里面SGX长什么

  • 深度学习笔记（一）：环境（yolov5）配置

    前言 本文为笔者在学习深度学习 进行环境配置时集各家所长总结的一些经验 旨在能够较快的配置好深度学习所需的环境 一 软件安装 1 1 Anaconda安装 直接在官网下载 Anaconda官网链接 安装包下载完毕后 进行安装 更改安装路径

  • CSS属性纪要

    1 line height 行高 跟font size属性的大小有关 一般可用来设置元素垂直居中 1 单行文字或单张图片的垂直居中 div 你好你好 div 以以上代码为例 设置box和height和line height高度一样就可以垂直

  • 原子锁

    Windows核心编程 Interlocked原子访问系列函数 http blog csdn net zhongguoren666 article details 7542975 InterlockedExchange http blog

  • 时间序列的数据分析(一):主要成分

    时间序列是一组按照时间发生先后顺序进行排列 并且包含一些信息的数据点序列 在时间序列数据中通常包含了数据的发展趋势 向上 向下 保持 和数据的变化规律 季节性 等特征 而这些特征往往具有一定的规律性和可预测性 具体来说时间序列数据具有如下几

  • BES2300 代码主架构笔记

    1 BES的内核用的是RTX的内核 并且用了ARM推广的CMSIS RTOS API接口 这样做的好处是可以方便内核的更换 方便移植上层代码 2 程序是从RTX CM LIB H里面的 main init 开始的 里面包括了内核的初始化 堆

  • 【更新指南】BarTender正式迎来2019 R2重大版本更新！

    BarTender 在 150 多个国家 地区拥有成千上百的用户 在标签 条形码 证卡和 RFID 标记的设计和打印领域是全球首屈一指的软件 BarTender 既可以单独运行 也可以与任何其他程序集成 几乎是所有按需打印或打标应用的完美解

  • 国泰安下载数据太大？stata传不进来？

    除了换电脑还有啥方法 其实就是一个小的tip 善用国泰安的条件筛选功能 只愿大家可以从下面的小例子中获取点扩展思维 例如最常用的财务报表数据 国泰安默认的是季度数据 但大多数时候我们需要的只是年度数据 那么我们就可以在条件筛选处加一个 不要

  • 【Android】点击应用进而打开base.apk的调用流程再分析

    点击一个应用的时候 会加载其对应的base apk 我们在AssetManager类的addAssetPath方法中添加堆栈打印 其调用堆栈为 android content res AssetManager addAssetPath As

  • 性能测试 —— Jmeter 常用重要函数汇总

    1 counter 计数器 加1的功能 疑问 假如加2 使用计数器 计数器超过最大值后重新开始计数 重点 最大值 如果运行结果超过最大值时 又会从起始值开始循环每个 用户独立计数器 多线程时 每个用户都是从起始值开始计数 跟线程号有关 th

  • Android 工程师需要了解的 Lint 知识入门篇

    前言 项目开发过程中 通过对代码规范的约束对于代码质量的提升是非常重要的 这其中除了人为的代码审查之外 我们还可以使用 lint 工具来定位并修改一些有问题的代码 帮助提高我们的代码规范程度 今天我们就一起来学学 lint 的使用 自动提示

  • filter过滤器

    1 Filter 什么是过滤器 1 Filter 过滤器它是 JavaWeb 的三大组件之一 三大组件分别是 Servlet 程序 Listener 监听器 Filter 过滤器 2 Filter 过滤器它是 JavaEE 的规范 也就是接

  • PCB布线中，重要的信号线进行包地处理

    原文地址 http zhenshanmcu blog 163 com blog static 16545766220137755225723 相关网帖 1 在PADS2007中 地包线怎么画 主要针对时钟信号 http zhidao bai

  • 自定义异常类

    public class MyException extends Exception public MyException String message super message

  • HTML5中制作彩色圆环的代码,HTML5 五彩圆环Loading加载动画实现教程

    HTML代码 CSS代码 webkit keyframes spin from webkit transform rotate 360deg transform rotate 360deg to webkit transform rotat

热门标签