流水效果

最新推荐文章于 2021-06-09 16:12:14 发布

qq_48354174

最新推荐文章于 2021-06-09 16:12:14 发布

阅读量98

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_48354174/article/details/114639514

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<template>
	<view class="">
		<view class="home">
		    <view class="land-mark">20%</view>
		</view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    };
</script>

<style lang="scss">
	@keyframes move1{
			0%{
				transform: translateX(0);
			}
			100%{
				transform: translateX(-160rpx);
			}
		}
		@keyframes move2{
			0%{
				transform: translateX(-40rpx);
			}
			100%{
				transform: translateX(-200rpx);
			}
		}
	.home{
			display: flex;
			width: 100%;
			height: 100vh;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
		}
		.home>view{
			transform: scale(1.5);
		}
    .land-mark{
            /*相对定位 作为绝对定位元素的父容器*/
            		position: relative;
            
                    /*弹性布局，容器内元素水平居中*/
            		display: flex;
            		justify-content: center;
            
                    /*设置水杯外形、大小及颜色*/
            		border: 8rpx solid rgb(30,29,20);
            		border-radius: 0 0 16px 16px;
            		border-top-width: 0;
            		width: 80rpx;
            		height: 80rpx;
            		background-color: #fff3da;
            
                    /*设置进度百分比文字样式*/
            		font-size: 24rpx;
            		font-weight: bold;
            		line-height: 48rpx;
            		color: rgb(30,29,20);
            
                    /*隐藏溢出的内部元素*/
            		overflow: hidden;
            
                    /*设置元素外部阴影*/
            		box-shadow: 0 2rpx 4rpx 2rpx rgba(0,0,0,0.2);
            
                    /*设置3D模式下Z轴偏移量为0*/
            		transform: translateZ(0);
    	}
		.land-mark::before,
			.land-mark::after{
				content: '';
				        /*绝对定位元素*/
						position: absolute;
				
				        /*设置元素的位置*/
						bottom: 0;
						left: 0;
						z-index: 0;
						right: -240rpx;
						height: 40rpx;
				
				        /*自定义多边形*/
						clip-path: polygon(
							0% 20%,
							2% 18%,
							3% 16%,
							5% 14%,
							7% 13%,
							8% 11%,
							10% 10%,
							12% 10%,
							13% 10%,
							15% 10%,
							17% 11%,
							18% 13%,
							20% 14%,
							22% 16%,
							23% 18%,
							25% 20%,
							27% 22%,
							28% 24%,
							30% 26%,
							32% 27%,
							33% 29%,
							35% 30%,
							37% 30%,
							38% 30%,
							40% 30%,
							42% 29%,
							43% 27%,
							45% 26%,
							47% 24%,
							48% 22%,
							50% 20%,
							52% 18%,
							53% 16%,
							55% 14%,
							57% 13%,
							58% 11%,
							60% 10%,
							62% 10%,
							63% 10%,
							65% 10%,
							67% 11%,
							68% 13%,
							70% 14%,
							72% 16%,
							73% 18%,
							75% 20%,
							77% 22%,
							78% 24%,
							80% 26%,
							82% 27%,
							83% 29%,
							85% 30%,
							87% 30%,
							88% 30%,
							90% 30%,
							92% 29%,
							93% 27%,
							95% 26%,
							97% 24%,
							98% 22%,
							100% 20%,
							100% 100%,
							0% 100%
						);
			}
    .land-mark::before{
    		background-color: rgb(255, 214, 125);
    				animation: move1 6s linear infinite;
    	}
		.land-mark::after{
				background-color: rgb(255, 174, 0);
						animation: move2 2s linear infinite;
			}
			
</style>