css流星动效

最新推荐文章于 2024-04-16 14:16:52 发布

dreamimport

最新推荐文章于 2024-04-16 14:16:52 发布

阅读量146

点赞数

分类专栏：开发项目文章标签： css html

本文链接：https://blog.csdn.net/dreamimport/article/details/120043718

版权

开发项目专栏收录该内容

27 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用CSS来创建一个流星划过屏幕的动画效果。通过设置元素的宽度、高度、背景渐变、边框半径、定位和关键帧动画，实现了从屏幕一端飞向另一端的视觉效果。此技术可以用于网页动态装饰，提升用户体验。

摘要由CSDN通过智能技术生成

``html


```css
.page-footer-star {
		width: 140rpx;
		height: 3rpx;
		background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		border-radius: 3rpx;
		display: flex;
		flex-direction: column;
		left: 100%;
		top: 60rpx;
		position: fixed;
		z-index: 91;
		animation: liuxing 5s linear infinite;
	}
	@keyframes liuxing {
		0% {
			left: 100%;
			transform: translateY(0) rotate(-25deg);
		}

		100% {
			left: -100%;
			transform: translateY(300px) rotate(-25deg);
		}
	}