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动画实现进度条从左到右滚动https://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实现边框流光效果（跑马灯效果）https://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实现动态绘制圆周效果|实现奥运五环https://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如何实现光点随着指定位置跑https://ipkd.cn/webs_3506.html

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

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