广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >用CSS制作忙碌光标
  • 345

0
分享到

用CSS制作忙碌光标

2024-04-02 19:04:59 345人浏览 安东尼
摘要

本篇内容主要讲解“用CSS制作忙碌光标”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“用CSS制作忙碌光标”吧! 我们经常会用到忙碌

本篇内容主要讲解“用CSS制作忙碌光标”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“用CSS制作忙碌光标”吧!

我们经常会用到忙碌等待的情况，比如ajax等待回调，或者加载页面的时候，我们通常的做法就是放一张loading.gif图片，在那里转呀转。

以前是在pc上用，也没有觉得不妥，如今要在移动端用，问题就来了，以前呢，做前端，兼容各种浏览器，就够让人头疼了，现在还要兼容各种屏幕尺寸。

开始呢，是做了N张不同大小的gif图。用javascript去判断屏的大小，然后选择适当的gif图片，这样做的缺点是很显的，说多了都是泪。现在我要做的，就是换成css3去实现这个效果。下面看效果图：
用CSS制作忙碌光标 
有兴趣的，可以复制下面的源码：

代码如下:


<!DOCTYPE html>
<html>
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-Scalable=0, maximum-scale=3">
<meta name="apple-mobile-WEB-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style type="text/css">
body {
margin: 0;
padding: 0;
}

#busyIcon {
z-index:99999;
position:absolute;
top:0;left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.7);
}
.container {
width:100px;
height: 100px;
background-color:black;
opacity: 0.8;
margin-top: -50px;
margin-left: -50px;
position: absolute;
top:50%;left:50%;
-webkit-border-radius: 10%;
}
.top,.base {
height: 30%;
}
.spinner {
height: 40%;
width: 40%;
position: relative;
margin: 0 auto;
}
.spinner div {
width: 12%;
height: 26%;
background-color: white;
position: absolute;
left: 44.5%;
top: 37%;
opacity: 0;
-webkit-border-radius: 30%;
-webkit-animation: fade 1s linear infinite;
}
.spinner div.bar1 {-webkit-transfORM:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}
.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}
@-webkit-keyframes fade {
from {opacity: 1;}
to {opacity: 0.25;}
}

</style>
</head>
<body>
<div id="busyIcon">
<div class="container">
<div class="top"></div>
<div class="spinner">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div class="bar4"></div>
<div class="bar5"></div>
<div class="bar6"></div>
<div class="bar7"></div>
<div class="bar8"></div>
<div class="bar9"></div>
<div class="bar10"></div>
<div class="bar11"></div>
<div class="bar12"></div>
</div>
<div class="base"></div>
</div>
</div>
</body>
</html>


这里是为了方便演示，对浏览器的兼容省略了，实际项目中，我用js进行了封装，方便调用和控制。

本例只记录一下原理，封装后的代码就不贴了。下面发一张应用中的效果裁图。
用CSS制作忙碌光标 

到此，相信大家对“用CSS制作忙碌光标”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 用CSS制作忙碌光标

本文链接: https://www.lsjlt.com/news/77798.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 用CSS制作忙碌光标
    本篇内容主要讲解“用CSS制作忙碌光标”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“用CSS制作忙碌光标”吧! 我们经常会用到忙碌...
    99+
    2022-10-19
  • 如何使用CSS制作光线效果的文字
    在网页设计和开发中，文字效果是一种常见且重要的元素。其中，光线效果的文字可以为网页增添一种神秘、炫酷的感觉。本文将为大家介绍如何使用CSS制作光线效果的文字，并提供具体的代码示例。首先，我们需要创建一个包含文字的HTML元素。比如，我们可以...
    99+
    2023-10-21
    CSS 光线效果 文字制作
  • 怎么利用CSS制作一个聚光灯效果
    今天小编给大家分享一下怎么利用CSS制作一个聚光灯效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了...
    99+
    2022-10-19
  • css图标制作教程
    这篇文章主要介绍“css图标制作教程”，在日常操作中，相信很多人在css图标制作教程问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css图标制作教程”的疑惑有所帮助！接下来，...
    99+
    2022-10-19
  • 怎么使用CSS改变光标样式
    这篇文章主要介绍“怎么使用CSS改变光标样式”，在日常操作中，相信很多人在怎么使用CSS改变光标样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用CSS改变光标样式”的疑惑有所帮助！接下来，请跟着小编...
    99+
    2023-07-06
  • 如何使用css制作流星旋转光环效果
    这篇文章主要介绍“如何使用css制作流星旋转光环效果”，在日常操作中，相信很多人在如何使用css制作流星旋转光环效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用cs...
    99+
    2022-10-19
  • 怎么使用CSS创建自定义光标
    这篇文章主要介绍了怎么使用CSS创建自定义光标，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 答：使用CSScursor属性 您可以使用...
    99+
    2022-10-19
  • CSS怎样制作箭头图标
    这篇文章主要为大家展示了“CSS怎样制作箭头图标”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS怎样制作箭头图标”这篇文章吧。 css3功能非常强...
    99+
    2022-10-19
  • 如何使用html+css制作一个发光立方体特效
    这篇文章主要介绍“如何使用html+css制作一个发光立方体特效”，在日常操作中，相信很多人在如何使用html+css制作一个发光立方体特效问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用html+cs...
    99+
    2023-07-05
  • 如何制作和使用css字体图标
    这篇文章主要为大家展示了“如何制作和使用css字体图标”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何制作和使用css字体图标”这篇文章吧。css字体图标的制...
    99+
    2022-10-19
  • 怎么用CSS将光标更改为悬停指针
    这篇文章主要介绍怎么用CSS将光标更改为悬停指针，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 答案：使用CSScursor属性 您可以简单地将CSScursor属性与该值poi...
    99+
    2022-10-19
  • CSS动画指南：手把手教你制作流光特效
    CSS动画是现代网页设计中不可或缺的一部分，它可以给网页增添生动和活力。其中一种常见的特效就是流光效果，它让元素看起来好像光芒闪烁一样，非常吸引人的注意力。在本文中，我将手把手教你制作流光特效，同时提供具体的代码示例。首先，我们需要一个HT...
    99+
    2023-10-21
    CSS动画 手把手教程 流光特效
  • CSS动画指南：手把手教你制作闪光特效
    CSS动画指南：手把手教你制作闪光特效在当今的网页设计中，动画效果成为了吸引用户注意力和提升用户体验的重要因素之一。其中CSS动画是实现各种效果的常见方法之一。本文将向您介绍如何使用CSS创建一个令人惊叹的闪光特效，并提供具体的代码示例。闪...
    99+
    2023-10-24
    动画 CSS 闪光
  • 如何使用CSS制作标签云的效果
    标签云是一种常见的网页设计元素，它以不同大小和颜色的标签组成，用于展示关键词或标签的热门程度。在本文中，我们将介绍如何使用CSS来制作标签云的效果，并提供具体的代码示例。HTML 结构首先，我们需要在HTML中创建一个容器元素，用于包裹标签...
    99+
    2023-10-21
    CSS 效果 标签云
  • 如何使用CSS制作旋转图标的效果
    如何使用CSS制作旋转图标的效果在网页设计中，图标的运用可以为页面增添生动、简洁的视觉效果。而旋转图标则更加具有吸引人的特点，可以突出重点或表达某种动态的意义。本文将介绍如何使用CSS制作旋转图标的效果，并提供具体的代码示例。首先，要实现图...
    99+
    2023-10-27
    CSS旋转 效果实现 图标制作
  • 如何使用CSS制作迷你图标动画效果
    CSS是一种用于描述网页样式的语言，在网页设计中起到了至关重要的作用。除了可以控制网页的布局和颜色外，CSS还可以实现一些动画效果，为网页增添生动活泼的气息。本文将介绍如何使用CSS制作迷你图标动画效果，并提供具体的代码示例。首先，我们需要...
    99+
    2023-10-21
    动画效果 CSS 图标 制作 迷你
  • 怎么用css制作电闪雷鸣的天气图标
    本篇内容介绍了“怎么用css制作电闪雷鸣的天气图标”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！效果效果图...
    99+
    2022-10-19
  • 如何使用CSS制作卡通化的图标效果
    如何使用CSS制作卡通化的图标效果今天我们将探讨如何使用CSS来制作卡通化的图标效果。卡通化的图标给网页增添了一种可爱和轻松的氛围，常常被用于儿童相关的网站或是需要营造愉悦感的产品页面。下面，我们将通过具体的代码示例来演示如何实现这样的效果...
    99+
    2023-10-27
    CSS 卡通化 图标效果
  • html+css如何制作div标签增加右上角删除图标
    这篇文章主要介绍html+css如何制作div标签增加右上角删除图标，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、需求描述在Div标签的右上角显示删除图标二、实现方式html、CSS三、参考代码<style...
    99+
    2023-06-08
  • css中class标签什么作用
    本教程操作环境：Windows10系统、CSS3版、DELL G3电脑css中class标签什么作用？css中的class不是标签，而是一个类选择器。class是类选择器，允许以一种独立于文档元素的方式来指定样式。在使用类选择器之前，需要修...
    99+
    2023-05-14
    css class
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作