你会用css写一个加载动画吗？

刺骨的言语ヽ痛彻心扉 2021-08-28 18:09 312阅读 0赞

<!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>css 转圈</title>
      <style> .turn{ position: relative; width:100px; height: 100px; border: 10px solid #f4f4f4; animation:turn 1s linear infinite; margin: 100px auto; border-radius: 50%; } .turn::after{ position: absolute; content: ''; top:0px; left:10px; width: 12px; height: 12px; background: #333; border-radius:50%; } .turn::before{ position: absolute; content: ''; top:-4px; left:16px; width: 12px; height: 12px; background: blue; border-radius:50%; } /* turn : 定义的动画名称 1s : 动画时间 linear : 动画以何种运行轨迹完成一个周期 infinite :规定动画应该无限次播放 */ @keyframes turn{ 0%{ transform:rotate(0deg);} 25%{ transform:rotate(90deg);} 50%{ transform:rotate(180deg);} 75%{ transform:rotate(270deg);} 100%{ transform:rotate(360deg);} } </style>
    </head>
    <body>
      <div class="turn">
      </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，312人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS 框加载动画

![在这里插入图片描述][6ecd33b78d284ade8d6f63f2ddcd0bf3.gif_pic_center] HTML 代码 <div class="

忘是亡心i/ 2023年10月14日 14:30/ 0 赞/ 49 阅读

相关 5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 b

素颜马尾好姑娘i/ 2022年12月31日 02:25/ 0 赞/ 253 阅读

相关 css加载动画大全

> `css加载动画大全` <!DOCTYPE html> <html lang="en" > <head> <meta charset=

小鱼儿/ 2022年10月29日 03:28/ 0 赞/ 201 阅读

相关 css加载中动画效果

[转载自大佬][Link 1] 效果一: ![在这里插入图片描述][88253320a6ab4a489d6b1317add231e5.png] html代码：

r囧r小猫/ 2022年09月07日 12:27/ 0 赞/ 218 阅读

相关 css实现加载动画

css实现加载动画 / Usage: <div class="sk-spinner sk-spinner-rotating-plane"></div> /

不念不忘少年蓝@/ 2022年06月01日 11:54/ 0 赞/ 322 阅读

相关（转）css加载会造成阻塞吗？

> 作者：陈纪庚 > 链接：https://juejin.im/post/5b88ddca6fb9a019c7717096 > 来源：掘金推荐一个自己的博客：[JS

柔光的暖阳◎/ 2022年05月14日 08:23/ 0 赞/ 136 阅读

相关用纯CSS实现加载中动画效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut">

矫情吗；*/ 2022年03月31日 12:19/ 0 赞/ 574 阅读

相关 css加载会造成阻塞吗

首先，css会阻塞dom树的解析渲染吗？结果是：css不会阻塞dom树的解析，但是会阻塞dom树的渲染，这可能是浏览器的一种优化机制，因为在css中可能存在对dom的操作，

悠悠/ 2021年11月17日 08:52/ 0 赞/ 307 阅读

相关你会用css写一个加载动画吗？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

刺骨的言语ヽ痛彻心扉/ 2021年08月28日 18:09/ 0 赞/ 313 阅读

相关 css动画提交按钮省略号加载动画

做法: 给按钮的文字添加伪类,然后利用阴影是移动和原本元素大小相同的原理在动画中依次添加多个水平方向移动的阴影代码示例: <!DOC

不念不忘少年蓝@/ 2021年07月24日 19:58/ 0 赞/ 466 阅读