动画css ---无限旋转

article/2025/11/3 16:36:40

前言：

      接口返回数据，处理数据后，需要根据状态显示对应的图片

      如果是状态为运行中，图片对应的icon图片需要沿中心点旋转起来（加一个带有旋转的class类）

图片素材 

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8" /><title>旋转</title><style>/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/@-webkit-keyframes changeright{       0%{-webkit-transform:rotate(0deg);}50%{-webkit-transform:rotate(180deg);}100%{-webkit-transform:rotate(360deg);}}/*自定义动画类----逆时针旋转（使用这个动画的时候才设置动画执行时间）*/@-webkit-keyframes changeleft{0%{-webkit-transform:rotate(0deg);}50%{-webkit-transform:rotate(-180deg);}100%{-webkit-transform:rotate(-360deg);}}/*-------------------------*/.logo1 img{-webkit-animation:changeright 6s linear infinite;}/*-------------------------*/.logo2 img{-webkit-animation:changeleft 6s linear infinite;}/*---------自定义普通旋转类（就是引用刚才自定义changeright的动画）------*/.imgrotate_common{-webkit-animation:changeright 6s linear infinite;}/*---------自定义快速旋转（就是引用刚才自定义changeright的动画）------*/.imgrotate_rotate{-webkit-animation:changeright 3s linear infinite;}.box span{display: inline-block;vertical-align: middle;	margin: 0 12px;	    		}</style></head><body><div class="logo1"><img src="logo_logo.png" alt="" /><img src="logo_logo.png" alt="" /><img src="logo_logo.png" alt="" /></div><hr /><div class="logo2"><img src="logo_logo.png" alt="" /><img src="logo_logo.png" alt="" /><img src="logo_logo.png" alt="" /></div><hr /><h3>(模拟接口返回数据)根据状态显示不同动画效果</h3><div class="box"><span></span><span><img src=""/></span></div><script src="jquery.min.js"></script><script>
//			适用场景----根据状态显示不同类型
//			假装是接口返回的数据var arr = [{choose:"禁止",type:0},{choose:"普通",type:2},{choose:"快速",type:3}]var shtml='';if(arr && arr.length>0){for(var i=0,len=arr.length;i<len;i++){if(arr[i].type == 2){shtml+='<span>'+arr[i].choose+'</span><span><img class="imgrotate_common" src="logo_logo.png"/></span>';}else if(arr[i].type == 3){shtml+='<span>'+arr[i].choose+'</span><span><img class="imgrotate_rotate" src="logo_logo.png"/></span>';}else{shtml+='<span>'+arr[i].choose+'</span><span><img src="logo_logo.png"/></span>';}}$('.box').html(shtml);}</script></body>
</html>


http://chatgpt.dhexx.cn/article/0EkcvcwA.shtml

相关文章

CSS——动画{旋转按钮}

CSS——动画{旋转按钮}

前面我们一直在学习样式&#xff0c;学习布局&#xff0c;什么浮动啊&#xff0c;定位呀&#xff0c;还有弹性盒子&#xff0c;那么今天我们来看一点不一样的——动画&#xff01; 文章目录 前言一、动画是什么&#xff1f;二、动画的属性 1.过渡2.实际应用和代码演示总结 前言…
阅读更多...
css实现加载旋转动画

css实现加载旋转动画

先看效果&#xff1a; 完整代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport&q…
阅读更多...
CSS基础学习——动画

CSS基础学习——动画

一、CSS3 2D变形&#xff08;利用Transfrom方法&#xff09; 1、rotate&#xff08;angle&#xff09; 元素顺时针旋转给定的角度。允许负值&#xff0c;元素将逆时针旋转。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8…
阅读更多...
深度学习与神经网络

深度学习与神经网络

文章目录 引言1. 神经网络1.1 什么是神经网络1.2 神经元1.3 多层神经网络 2. 激活函数2.1 什么是激活函数2.2 激活函数的作用2.3 常用激活函数解析2.4 神经元稀疏 3. 设计神经网络3.1 设计思路3.2 对隐含层的感性认识 4. 深度学习4.1 什么是深度学习4.2 推理和训练4.3 训练的相…
阅读更多...
【深度学习】你心目中 idea 最惊艳的深度学习领域论文是哪篇？

【深度学习】你心目中 idea 最惊艳的深度学习领域论文是哪篇？

科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名。 我们来看看各路大神是怎么评价的。 论文链接 https://arxiv.org/abs/1410.3916 关于计算机视觉领域&#xff0c;taokongcn分享了几个重要的工作。 1. Fully Convolutional Netw…
阅读更多...
深度学习笔记(三)Cv方向

深度学习笔记(三)Cv方向

一.批量归一化和残差网络 批量归一化 对输入的标准化&#xff08;浅层模型&#xff09; 处理后的任意一个特征在数据集中所有样本上的均值为0、标准差为1。 标准化处理输入数据使各个特征的分布相近。 批量归一化&#xff08;深度模型&#xff09; 利用小批量上的均值和标准差…
阅读更多...
R-C3D:用于时间活动检测的区域3D网络

R-C3D:用于时间活动检测的区域3D网络

论文&#xff1a;R-C3D: Region Convolutional 3D Network for Temporal Activity Detection&#xff08;2017&#xff09; 主要贡献 1.提出一个包括活动候选区和任意长度活动的分类的端到端模型。如下图所示 2.提出在候选区生成和分类部分共享全卷积C3D特征&#xff0c;实现了…
阅读更多...
[翻译]循环神经网络不可思议的有效性

[翻译]循环神经网络不可思议的有效性

[翻译]循环神经网络不可思议的性能 循环神经网络&#xff08;RNN&#xff09;具有神奇的功能。我还记得当我训练我的第一个关于图像字幕的循环网络。在训练了几十分钟后&#xff0c;模型的雏形&#xff08;使用相当随意选择的超参数&#xff09;开始产生对图像有意义的描述&am…
阅读更多...
NNDL 作业8：RNN - 简单循环网络

NNDL 作业8：RNN - 简单循环网络

目录 1. 使用Numpy实现SRN 2. 在1的基础上&#xff0c;增加激活函数tanh 3. 分别使用nn.RNNCell、nn.RNN实现SRN 4. 分析“二进制加法” 源代码&#xff08;选做&#xff09; 5. 实现“Character-Level Language Models”源代码&#xff08;必做&#xff09; 6. 分析“序…
阅读更多...
elman神经网络 python实现_使用深度神经网络进行风格转换（Python实现）

elman神经网络 python实现_使用深度神经网络进行风格转换（Python实现）

在论文(Image Style Transfer Using Convolutional Neural Networks)中(https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf)&#xff0c;风格转换使用了19层VGG网络中的特征&#xff0c;它由一系列卷积层和池…
阅读更多...
深度学习知识图谱笔记

深度学习知识图谱笔记

最近花了几天时间对目前常用神经网络模型(backbone)&#xff0c;生成对抗GAN&#xff0c;模型压缩&#xff0c;NPL&#xff0c;距离计算&#xff0c;优化器进行了分类整理&#xff0c;用简短的几句话对相关特性进行了总结描述&#xff0c;如有误请指正&#xff0c;方便强化记忆…
阅读更多...
深度强化学习综述论文 A Brief Survey of Deep Reinforcement Learning

深度强化学习综述论文 A Brief Survey of Deep Reinforcement Learning

A Brief Survey of Deep Reinforcement Learning 深度强化学习的简要概述 作者&#xff1a; Kai Arulkumaran, Marc Peter Deisenroth, Miles Brundage, Anil Anthony Bharath 文章目录 摘要 Abstract1. 引言 Introduction2. 奖励驱动行为 Reward-Driven Behavior2.1. 马尔科夫…
阅读更多...
深度学习领域，最惊艳的论文！

深度学习领域，最惊艳的论文！

科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名&#xff0c;以下介绍了一些知乎作者心中白月光般存在的深度学习领域论文&#xff0c;看看是否你们拥有同样心目中的The one。 提名一 ResNet和Transformer 作者&#xff1a;王…
阅读更多...
深度学习领域，你心目中 idea 最惊艳的论文是哪篇？

深度学习领域，你心目中 idea 最惊艳的论文是哪篇？

点击上方“视学算法”&#xff0c;选择加"星标"或“置顶” 重磅干货&#xff0c;第一时间送达 来源丨知乎问答&#xff08;回答均已授权&#xff09; 编辑丨极市平台 科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名&a…
阅读更多...
深度学习：STGCN学习笔记

深度学习：STGCN学习笔记

目录标题 基于图神经网络的图分类问题GCN在行为识别领域的应用主要任务研究思路 ST-GCN(SpatialTemporal Graph Convolutional Networks for Skeleton-Based Action Recognition)解读原论文解决问题主要贡献核心思想简介OpenPose 预处理基于人体关键点构造graph构造单帧graph&a…
阅读更多...
神经网络中神经元是什么_是什么使神经网络脆弱

神经网络中神经元是什么_是什么使神经网络脆弱

神经网络中神经元是什么 What do the images below have in common? 以下图片有什么共同点&#xff1f; Most readers will quickly catch on that they are all seats, as in places to sit. It may have taken you less than a second to recognize this common characteri…
阅读更多...
卷积神经网络超详细介绍

卷积神经网络超详细介绍

文章目录 1、卷积神经网络的概念2、 发展过程3、如何利用CNN实现图像识别的任务4、CNN的特征5、CNN的求解6、卷积神经网络注意事项7、CNN发展综合介绍8、LeNet-5结构分析9、AlexNet10、ZFNet10.1 意义10.2 实现方法10.3 训练细节10.4 卷积网络可视化10.6 总结 11、VGGNet11.1 结…
阅读更多...
经典神经网络

经典神经网络

文章目录 第四章 经典网络解读4.1 LeNet-54.1.1 模型介绍4.1.2 模型结构4.1.3 模型特性 4.2 AlexNet4.2.1 模型介绍4.2.2 模型结构4.2.3 模型特性 4.3 ZFNet4.3.1 模型介绍4.3.2 模型结构4.3.3 模型特性 4.4 Network in Network4.4.1 模型介绍4.4.2 模型结构4.4.3 模型特点 4.5…
阅读更多...
卷积神经网络 CNN 学习

卷积神经网络 CNN 学习

什么是神经网络 人工神经网络&#xff08;artificial neural network&#xff0c;ANN&#xff09;&#xff0c;简称神经网络&#xff08;neural network&#xff0c;NN&#xff09;&#xff0c;是一种模仿生物神经网络的结构和功能的数学模型或计算模型。神经网络由大量的人工…
阅读更多...
【CS224W】(task7)标签传播与节点分类（semi-supervised）

【CS224W】(task7)标签传播与节点分类（semi-supervised）

note 对某一节点的标签进行预测&#xff0c;需要其本身特征、邻居的标签和特征。message passing的假设是图中相似的节点之间会存在链接&#xff0c;也就是相邻节点有标签相同的倾向。这种现象可以用homophily&#xff08;相似节点倾向于聚集&#xff09;、influence&#xff…
阅读更多...
推荐文章

Copyright @ 2022~2023