首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS手写loading

CSS手写loading

作者头像
我只会写Bug啊
发布于 2023-12-25 06:59:00
发布于 2023-12-25 06:59:00
38400
代码可运行
举报
文章被收录于专栏:Bug EngineerBug Engineer
运行总次数:0
代码可运行

原理其实很简单,找一张loading的静态图 旋转即可! 知识点:transform

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>loading</title>
    <style>
        .loading {
            width: 96px;
            height: 96px;
            display: inline-block;
            vertical-align: middle;
            animation: e 1s steps(12) infinite;
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释 
* background:  url(data:image/png;base64,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) no-repeat;
*/
						background-size: 100%;
        }

        @keyframes e {
            0% {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(1turn)
            }
        }
    </style>
</head>

<body>
	<i class="loading"></i>
</body>

</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-12-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
微信小程序中-[渲染层网络层错误] pages/card/card.wxss 中的本地资源图片无法通过 WXSS 获取-解决办法
2. base64 将图片转换为base64,转换图片网址,转换后将得到的字符放在background-image属性值原位置处
全栈程序员站长
2022/09/12
1.3K0
微信小程序中-[渲染层网络层错误] pages/card/card.wxss 中的本地资源图片无法通过 WXSS 获取-解决办法
获取base64编码格式的图片大小[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/151123.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/06
2.3K0
Data URI scheme「建议收藏」
data URI scheme 允许我们使用内联(inline-code)的方式在网页中包含数据,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入。常用于将图片嵌入网页。
全栈程序员站长
2022/11/02
6110
使用javascript实现对于chineseocr的API调用「建议收藏」
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/125721.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/22
9270
使用javascript实现对于chineseocr的API调用「建议收藏」
java图片转二进制流_java将文件转化成二进制流
二进制流的主要编码格式是base64码。可以在网上找一些在线转base64编码的网站进行尝试转换。
全栈程序员站长
2022/11/18
2.4K0
应急响应记录之水坑挂马事件分析
在攻防演练中红队时而会在获取到目标系统的webshell权限之后会通过篡改前端网页的JS或HTML文件内容并插入恶意代码来挂载水坑扩大战果,具体的效果主要是使其在用户首次访问网站时就出现弹窗诱导用户下载恶意文件并进行安装,也有不少更加彻底直接通过篡改文件来挂载Flash水坑文件来诱导用户下载恶意文件,本篇文章主要是通过介绍近期在应急响应阶段中的几个水坑挂载木马的安全事件从侧面介绍关于水坑挂载的排查思路以及方式,同时对水坑挂载的恶意文件内容进行简要分析
Al1ex
2024/12/23
1480
应急响应记录之水坑挂马事件分析
PbootCMS 后台登录界面“3D 云”背景
1.找到后台登录模板文件:/apps/admin/view/default/index.html
Savalone
2020/04/21
9.8K3
》》初识移动端–rem
转载于:https://www.cnblogs.com/1007573044qqcom/p/7988336.html
全栈程序员站长
2022/09/15
9550
爬虫课第一次报错总结
UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 10-12: ordinal not in range(128) 原因:url包含不是ascii的字符 处理:把“海贼王”改为%+十六进制(法1:百度,法2 urllib.parse)
全栈程序员站长
2022/09/14
3.1K0
爬虫课第一次报错总结
将图片转换为Base64编码字符串、解析Base64编码字符串后生成图片「建议收藏」
当图片转换为base64编码字符串后,其中包含大量的+号,如果我们将上述base64编码字符串通过网络传输给其他接口,那么服务器在解析数据时会把+号当成连接符,然后自动将+号转换为空格,所以为保证数据的准确性,我们需要将空格转换成+号,转换方法如下:
全栈程序员站长
2022/09/14
1.2K0
php输出一张本地图片_java html转图片
转载于:https://blog.51cto.com/quietnight/1735920
全栈程序员站长
2022/09/29
1.6K0
用java实现图片切换_电视背景集成墙面
下载地址:Download OpenCV from SourceForge.net
全栈程序员站长
2022/09/30
6080
用java实现图片切换_电视背景集成墙面
3dreshaper_3d曲面屏幕是什么意思
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/04
4990
3dreshaper_3d曲面屏幕是什么意思
Vue项目中使用TinymMCE富文本
kindEditor,ckeditor,ueditor,wangeditor等等一系列的editor
Tom2Code
2022/11/21
9320
Vue项目中使用TinymMCE富文本
图片和Base64编码相互转换[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/135035.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/07
1.1K0
闭包及作用域销毁练习
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/07
4610
Python Java 滑块识别-通杀滑块「建议收藏」
在写爬虫的时候,经常会遇到滑块问题,很多次都想过尝试如何攻破滑块,但是每次都没成功,除了最开始的极验滑块,当时通过原图和滑块图的对比,能够得出缺口坐标,但是随着极验、网易、腾讯滑块的更新,已经不能够找到原图了,下面给出滑块通杀的解决方案。
全栈程序员站长
2022/11/07
2.6K0
Hexo添加樱花动态效果背景
前言 最开始玩Hexo博客的时候光主题就选择了半天,当时很中意Sakura,一部分原因就是自带的樱花🌸动态效果,戳到我了简直。但是苦于搞了好久一直出问题,就放弃了。随后转战Butterfly,同样也时非常中意。 也是偶然看到一篇文章才让我明白,有了各路大神的搬运,🌸动效也不会再是Sakura独占了,哈哈哈哈。 效果可以查看这个小姐姐的博客,我当时就是一眼看到,瞬间爱上!!!! 链接在这里:https://cungudafa.gitee.io/ 操作 很简单,只需在_config.butterfly.yml文
花猪
2022/02/16
4.7K0
vim的配置文件_vim编辑文件命令
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/11/10
1.2K0
基于Auto.js的萌猫跳辅助
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/134820.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/06
1K0
推荐阅读
相关推荐
微信小程序中-[渲染层网络层错误] pages/card/card.wxss 中的本地资源图片无法通过 WXSS 获取-解决办法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验