CSS进度条动画

发布时间：2023年12月26日

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

文章来源:https://blog.csdn.net/weixin_44481113/article/details/135219352
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章