CSS进度条动画

CSS进度条移动

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation</title><style>.rec {box-sizing: border-box;position: relative;overflow: hidden;margin: 300px auto;width: 300px;height: 4px;border: 1px solid #ccc;}.rec::before {position: absolute;left: -100%;top: 0;content: '';height: 2px;width:  18px;background-color: red;/* 依次对应:动画名、时长、匀速、无限循环 */animation: move 5s linear infinite; }@keyframes move {from {left: -18px;}to {left: 100%;}}</style>
</head>
<body><div class="rec"></div>
</body>
</html>

CSS动画实现进度条从左到右滚动icon-default.png?t=N7T8https://zhuanlan.zhihu.com/p/441023495?utm_id=0


边框跑马灯

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>body {background-color: #000;}.main {position: absolute;width: 400px;height: 150px;top: 50%;left: 50%;transform: translate(-50%, -50%);overflow: hidden;text-align: center;background-color: transparent;line-height: 150px;color: aquamarine;font-size: 30px;font-family: '宋体';}.main div {position: absolute;}.main :nth-child(1) {top: 0;left: 0;width: 100%;height: 2px;animation: run1 1s linear infinite;/* animation-delay: 0s;  */background: linear-gradient(to right, #fff, #acd, cyan);}.main :nth-child(2) {top: 0;right: 0;height: 100%;width: 2px;animation: run2 1s linear infinite;/* animation-delay: 1s; 设置动画延迟加载时间*/background: linear-gradient(to bottom, #fff, #acd, cyan);}.main :nth-child(3) {bottom: 0;left: 0;height: 2px;width: 100%;animation: run3 1s linear infinite;/* animation-delay: 2s; 设置动画延迟加载时间*/background: linear-gradient(to right, #fff, #acd, cyan);}.main :nth-child(4) {top: 0;left: 0;height: 100%;width: 2px;animation: run4 1s linear infinite;/* animation-delay: 3s; 设置动画延迟加载时间 */background: linear-gradient(to top, #fff, #acd, cyan);}@keyframes run1 {from {transform: translateX(-100%)}to {transform: translateX(100%)}}@keyframes run2 {from {transform: translateY(-100%)}to {transform: translateY(100%)}}@keyframes run3 {from {transform: translateX(100%)}to {transform: translateX(-100%)}}@keyframes run4 {from {transform: translateY(100%)}to {transform: translateY(-100%)}}
</style><body><div class="main">海绵宝宝<div></div><div></div><div></div><div></div></div>
</body></html>

纯CSS实现边框流光效果(跑马灯效果)icon-default.png?t=N7T8https://devpress.csdn.net/beijing/64c7b074bfca273ff3549675.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MzIyOTMzNiwiZXhwIjoxNzA0MTcyNTAyLCJpYXQiOjE3MDM1Njc3MDIsInVzZXJuYW1lIjoid2VpeGluXzQ0NDgxMTEzIn0.nhg88wNdUWogTkbysNtFlO2XAAM6Lh3_ndd2J2YShv0


动态圆环

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style></style></head><body><canvas id="myCanvas1" width="400" height="400"></canvas></body>
</html>
<script>let canvas = document.querySelector("#myCanvas1");var ctx = canvas.getContext('2d');var centerX = canvas.width / 2;var centerY = canvas.height / 2;var R = 100;var angle = 0; // 初始角度var speed = 0.05; // 运动速度function animate() {requestAnimationFrame(animate);// 计算圆心坐标var x = centerX + Math.cos(angle) * R;var y = centerY + Math.sin(angle) * R;// 绘制圆ctx.beginPath();ctx.arc(x, y, 10, 0, 2*Math.PI);ctx.fillStyle = "red";ctx.fill();// 更新角度angle += speed;}// 清除画布ctx.clearRect(0, 0, canvas.width, canvas.height);animate();</script>

Canvas实现动态绘制圆周效果|实现奥运五环icon-default.png?t=N7T8https://blog.csdn.net/wodegeCSDN/article/details/130284110


光点跑动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {height: 500px;width: 400px;box-shadow: 0 0 2px orange;text-align: center;line-height: 260px;}.run {background-image: linear-gradient(90deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%), linear-gradient(0deg, rgb(62, 224, 84) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%), linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%);background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;background-size: 100px 4px, 4px 100px, 100px 4px, 4px 100px;background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;animation: moveLine 8s infinite linear;height: calc(100% - 2px);padding: 1px;background-clip: content-box;}@keyframes moveLine {0% {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px 0px;}5% {background-position: 0px 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px;}30% {background-position: 100% 1px, calc(100% - 1px) -100px, calc(100% + 100px) calc(100% - 1px), 1px -100px;}35% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) 0px, calc(100% + 100px) calc(100% - 1px), 1px -100px;}50% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) 100%, calc(100% + 100px) calc(100% - 1px), -100px -100px;}55% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 100% calc(100% - 1px), -100px calc(100% + 100px);}80% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), 0px calc(100% - 1px), 1px calc(100% + 100px);}85% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 100%;}100% {background-position: calc(100% + 100px) 1px, calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 0px;}}</style>
</head><body><div class="box run">光点跑动</div>
</body></html>

css3如何实现光点随着指定位置跑icon-default.png?t=N7T8https://ipkd.cn/webs_3506.html


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/578762.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023.12.22力扣每日一题——得到山形数组的最少删除次数

2023.12.22 题目来源我的题解方法一 前后缀分解最长递增子序列 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1671 我的题解 方法一 前后缀分解最长递增子序列 &#xff08;参照题解中的&#xff1a;灵茶山艾府的解法&#xff09; 要想删除次数最少&#xff0c;山形数…

从零开发短视频电商 SageMaker实时推理实例和费用

注意每个region价格不一样。示例为&#xff1a;美东2-俄亥俄的价格 主要找的都是CPU 4核 原文&#xff1a;https://aws.amazon.com/cn/sagemaker/pricing/ 实例价格 以下是您提供的信息转换成表格的形式&#xff1a; 实例类型vCPU内存每小时价格 (USD)备注标准型ml.t2.xlarge…

html页面 通过jquery.i18n.properties添加多语言

第一步&#xff1a; <div class"set_lang"><div class"lang_btn" data-langtype"zh">中文简体</div> | <div class"lang_btn" data-langtype"hk">中文繁體</div> |<div class"lang_b…

数据结构学习 Leetcode72 编辑距离

关键词&#xff1a;动态规划 最长公共子序列 题目&#xff1a; 思路&#xff1a; 这题我虽然做出来了但是还是有点迷糊。首先&#xff0c;这道题一定是和最长公共子序列相似的。 所以往最长公共子序列方向思考&#xff0c;考虑的它的状态和转移方程以及边界。 状态和转移方…

英国允许法官使用ChatGPT写裁决书,并公布官方指南!

知名媒体The Week消息&#xff0c;英格兰和威尔士地区的法官&#xff0c;允许使用ChatGPT撰写法律裁决书。 英国的司法官网已经发布了官方指南&#xff0c;详细描述了使用ChatGPT的正确使用方法、潜在风险以及示例&#xff0c;同时适用于首席大法官、高级庭长等负责司法的所有…

shiro反序列化与fastjson反序列化漏洞原理

01 shiro反序列化漏洞的原理 Shiro反序列化漏洞的原理是攻击者通过精心构造恶意序列化数据&#xff0c;使得在反序列化过程中能够执行任意代码。Shiro是一个Java安全框架&#xff0c;提供了身份验证、授权、加密和会话管理等功能。其中&#xff0c;Shiro的序列化功能可以将对象…

2023年安徽省职业院校技能大赛(高职组)“区块链技术应用”赛项竞赛任务书

2023年安徽省职业院校技能大赛&#xff08;高职组&#xff09;“区块链技术应用”赛项竞赛任务书 目录 2023年安徽省职业院校技能大赛&#xff08;高职组&#xff09;“区块链技术应用”赛项竞赛任务书 模块一&#xff1a;区块链产品方案设计及系统运维&#xff08;35分&…

【ai】阿里云 大模型 api 聚合平台 dashscope

阿里云登录 - 欢迎登录阿里云&#xff0c;安全稳定的云计算服务平台 快速调用 前提条件 已开通服务并获得API-KEY&#xff1a;开通DashScope并创建API-KEY。 已安装最新版SDK&#xff1a;安装DashScope SDK。 DashScope灵积模型服务建立在“模型即服务”&#xff08;Model-a…

云仓酒庄的品牌雷盛红酒LEESON分享干红是纯葡萄酿造的吗?

干红是一种葡萄酒的简称&#xff0c;全称是干型红葡萄酒。葡萄酒按含残糖量分为干型、半干型、半甜型和甜型。无论什么型的酒&#xff0c;只要是葡萄酒&#xff0c;那就是葡萄酿造的。 云仓酒庄的品牌雷盛红酒LEESON分享干红是葡萄酒的一种&#xff0c;而葡萄酒却不止干红一种…

Java八股文面试全套真题【含答案】-Docker篇

以下是关于Java八股文面试全套真题-Docker篇 1.什么是Docker&#xff1f; 答案&#xff1a;Docker是一种开源的容器化平台&#xff0c;可以将应用程序及其依赖项打包为独立的、可移植的容器&#xff0c;以便在不同环境中运行。 2.Docker容器和虚拟机有什么区别&#xff1f; 答…

【RocketMQ笔记01】安装RocketMQ消息队列运行环境

这篇文章&#xff0c;主要介绍如何安装RocketMQ消息队列运行环境。 目录 一、RocketMQ消息队列 1.1、下载RocketMQ 1.2、解压安装包 1.3、配置RocketMQ环境变量 1.4、修改启动脚本 1.5、启动RocketMQ &#xff08;1&#xff09;启动NameServer &#xff08;2&#xff0…

PostgreSql 并行

一、概述 当服务器有多核 cpu 时&#xff0c;PostgreSQL 会根据默认配置&#xff0c;在合适的条件下自动进行并行操作&#xff0c;除非主动关闭了相关并行参数。 二、并行相关参数 max_worker_processes&#xff1a;系统能够支持的后台进程的最大数量&#xff0c;默认是 8&…

Linux网卡配置

一、网卡配置 1、目录参数 /etc/syscofig/network-scripts/ifcfg-e*** /etc 目录时Linux系统的配置文件&#xff0c;有相对权限的用户能修改目录&#xff0c;但普通用户都可以访问。 sysconfig /etc/sysyconfig目录包含了Linux的系统配置文件 network-scripts network-scripts…

HarmonyOS共享包HAR

共享包概述 OpenHarmony提供了两种共享包&#xff0c;HAR&#xff08;Harmony Archive&#xff09;静态共享包&#xff0c;和HSP&#xff08;Harmony Shared Package&#xff09;动态共享包。 HAR与HSP都是为了实现代码和资源的共享&#xff0c;都可以包含代码、C库、资源和配…

运维工程师:IT 界的“万金油”,可爱的六边形战士

在IT界&#xff0c;运维工程师常常被形容为“万金油”&#xff0c;这个可爱的角色既是修理工&#xff0c;又是消防员&#xff0c;还是魔术师。他们身兼数职&#xff0c;无所不能&#xff0c;为企业的IT系统提供稳定、高效、安全的运行环境。让我们一起走进运维工程师的世界&…

Salesforce推出Trailblazer就业市场,让求职更简单!

12月14日&#xff0c;Salesforce宣布推出Trailblazer就业市场&#xff08;Trailblazer Career Marketplace&#xff09;&#xff0c;这是一个新的人才中心&#xff0c;也是Trailhead的扩展。Trailblazer就业市场致力于将数据、人工智能和CRM领域的专业人士与Salesforce生态系统…

CentOS8+宝塔面板+cpolar内网穿透搭建可公网访问的Typecho个人站点

文章目录 前言1. 安装环境2. 下载Typecho3. 创建站点4. 访问Typecho5. 安装cpolar6. 远程访问Typecho7. 固定远程访问地址8. 配置typecho 前言 Typecho是由type和echo两个词合成的&#xff0c;来自于开发团队的头脑风暴。Typecho基于PHP5开发&#xff0c;支持多种数据库&#…

Spring Cloud Alibaba 之 Sentinel

大家好&#xff0c;我是升仔 引言 在微服务架构中&#xff0c;服务之间的依赖错综复杂。一旦某个服务出现问题&#xff0c;很容易引发连锁反应&#xff0c;导致整个系统瘫痪。Sentinel 就是为了解决这类问题而生的。它通过流量控制、熔断降级等机制&#xff0c;保护服务不被过多…

Flutter windows 环境配置

Flutter windows 环境配置 从零开始&#xff0c;演示flutter环境配置到启动项目&#xff0c;同时支持 vscode 和 android studio 目录 Flutter windows 环境配置一、环境配置1. Flutter SDK2. Android Studio3. JDK4. 拓展安装5. Visual Studio 2022二、项目创建和启动1. vsco…

Java面试题66-75

66、Collection 和 Collections的区别。 Collection是集合类的上级接口&#xff0c;继承与他的接口主要有Set 和List. Collections是针对集合类的一个帮助类&#xff0c;他提供一系列静态方法实现对各种集合的搜索、排序、线程安全化等操作。 67、Set里的元素是不能重复的…