uniapp小程序写滚屏动画效果

Mysterious starry sk

已于 2022-09-20 11:04:16 修改

阅读量1.3k

点赞数 1

分类专栏： uniapp 文章标签：小程序 css sass

于 2022-02-18 10:35:01 首次发布

本文链接：https://blog.csdn.net/wyl_1234567_Q/article/details/122998028

版权

uniapp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在HTML先写一个样式

<template>

<view class="barrage-box">
		     <view class="text">滚动弹幕</view>
		 </view>
</template>

然后在css上面写动画效果

.barrage-box {
		width: 100vh;
		height: 180vw;
		font-size: 170px;
		transform-origin: 65vw 75vw;
		transform: rotate(90deg);
		white-space: nowrap;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000;
	//抖动字幕效果
		// overflow: hidden;
		// animation: aniShake 0.5s linear infinite;
	}

	.text {
		width: 100%;
		// font-size: 50px;
		color: #FFF;
		animation: aniMove 5s linear infinite;
		animation-fill-mode: forwards;
	}

	/* 文字滚动 */
	@keyframes aniMove {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	/* 抖动字幕效果 */
	@keyframes aniShake {

		0%,
		33% {
			text-shadow: 3px -3px 0px #FE008E, -5px 5px 0px #00FFFF;
		}

		34%,
		66% {
			text-shadow: 5px -5px 0px #FE008E, -3px 3px 0px #00FFFF;
		}

		67%,
		100% {
			text-shadow: 3px -3px 0px #00FFFF, -5px 5px 0px #FE008E;
		}
	}