CSS 蜂巢动画

发布时间：2024年01月19日

<template>
	<view class="honeycomb">
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
		<view></view>
	</view>
</template>

<script>
</script>

<style>
	body {
		background-color: #212121;
		/* 设置背景颜色为 #212121 */
	}

	@-webkit-keyframes honeycomb {

		0%,
		/* 关键帧0% */
		20%,
		/* 关键帧20% */
		80%,
		/* 关键帧80% */
		100% {
			/* 关键帧100% */
			opacity: 0;
			/* 设置透明度为0 */
			-webkit-transform: scale(0);
			/* 设置缩放比例为0 */
			transform: scale(0);
			/* 设置缩放比例为0 */
		}

		30%,
		/* 关键帧30% */
		70% {
			/* 关键帧70% */
			opacity: 1;
			/* 设置透明度为1 */
			-webkit-transform: scale(1);
			/* 设置缩放比例为1 */
			transform: scale(1);
			/* 设置缩放比例为1 */
		}
	}

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