uni-app 简易挖矿动画、通过css+html同样运行

一级用户组 lyj_1566483979 1月前 178

项目需求:挖矿动画

运用技术:uni-app

布局代码:

                                   <view class="wrap">
                                        <!--最大的空间view-->
					<view class="cube">
						<!--正方体的box-->
						<!--这个是大的正方体的六面-->
						<view class="out-front"></view>
						<view class="out-back"></view>
						<view class="out-left"></view>
						<view class="out-right"></view>
						<view class="out-top"></view>
						<view class="out-bottom"></view>

						<!--这个是小的正方体的六面-->
						<text class="in-front">
						</text>
						<text class="in-back">
						</text>
						<text class="in-left">
						</text>
						<text class="in-right">
						</text>
						<text class="in-top">
						</text>
						<text class="in-bottom">
						</text>
					</view>
					<view class="accelerate">
						<text>一键收宝</text>
					</view>
				</view>

样式代码:

@keyframes move {
		0% {
			transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}

		100% {
			transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
		}
	}

	.wrap>view.cube {
		width: 100upx;
		height: 100upx;
		position: relative;
		color: #ff92ff;
		font-size: 36px;
		font-weight: 100;
		text-align: center;
		line-height: 100upx;
		transform-style: preserve-3d;
		transform: rotateX(-25deg) rotateY(-25deg) rotateZ(0deg);
		animation: move 8s infinite linear;
	}

	.cube>view {
		width: 100%;
		height: 100%;
		border: 4upx solid #66daff;
		border-radius: 10upx;
		position: absolute;
		background-color: rgba(51, 51, 51, .3);
		transition: transform 0.3s ease-in;
	}

	.cube view.out-front {
		transform: translateZ(50upx);
	}

	.cube view.out-back {
		transform: translateZ(-50upx) rotateY(180deg);
	}

	.cube view.out-left {
		transform: translateX(-50upx) rotateY(-90deg);
	}

	.cube view.out-right {
		transform: translateX(50upx) rotateY(90deg);
	}

	.cube view.out-top {
		transform: translateY(-50upx) rotateX(90deg);
	}

	.cube view.out-bottom {
		transform: translateY(50upx) rotateX(-90deg);
	}

	.cube>text {
		display: block;
		width: 45upx;
		height: 45upx;
		background-color: $yb-color-theme;
		position: absolute;
		top: 25upx;
		left: 25upx;
		border: 4upx solid $yb-color-gray;
		opacity: 0.9;
		border-radius: 6%;
	}

	.cube text.in-front {
		transform: translateZ(25upx);
	}

	.cube text.in-back {
		transform: translateZ(-25upx) rotateY(180deg);
	}

	.cube text.in-left {
		transform: translateX(-25upx) rotateY(-90deg);
	}

	.cube text.in-right {
		transform: translateX(25upx) rotateY(90deg);
	}

	.cube text.in-top {
		transform: translateY(-25upx) rotateX(90deg);
	}

	.cube text.in-bottom {
		transform: translateY(25upx) rotateX(-90deg);
	}

	.wrap:hover .cube view.out-front {
		transform: translateZ(100upx);
	}

	.wrap:hover .cube view.out-back {
		transform: translateZ(-100upx) rotateY(180deg);
	}

	.wrap:hover .cube view.out-left {
		transform: translateX(-100upx) rotateY(-90deg);
	}

	.wrap:hover .cube view.out-right {
		transform: translateX(100upx) rotateY(90deg);
	}

	.wrap:hover .cube view.out-top {
		transform: translateY(-100upx) rotateX(90deg);
	}

	.wrap:hover .cube view.out-bottom {
		transform: translateY(100upx) rotateX(-90deg);
	}

	text.in-front {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24upx;
	}

	text.in-left {
		display: flex;
		justify-content: center;
		font-size: 24upx;
	}

	text.in-back {
		display: flex;
		font-size: 24upx;
	}

	text.in-right {
		display: flex;
		flex-wrap: wrap;
		font-size: 24upx;
	}

	text.in-top {
		display: flex;
		font-size: 24upx;
	}

	text.in-bottom {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-content: space-around;
		font-size: 24upx;
	}

总结:任何一门语言都需要反复练习,简单的demo奉上,希望对学习中的或者项目中需要用到的有所帮助。代码复制后可以直接运行

还没有人收藏过本帖~
最新回复 (0)
返回