css实现注水图

最新推荐文章于 2024-09-18 07:30:00 发布

意林_10

最新推荐文章于 2024-09-18 07:30:00 发布

阅读量533

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/weixin_41951632/article/details/113387258

版权

CSS动画百分比显示进度条颜色渐变 HTML布局

关键词由CSDN通过智能技术生成

css3 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<div class="one tip_one" >
 	<div class="rate_box">{{propertystaType=='num' ? inUseCountRate : inUseAreaRate}} %</div>
	<div class="water_level water_green"  :style="{ 'animation-name': inUseCountRate >= 100 ? 'anim_100': (inUseCountRate < 100 && inUseCountRate >= 90) ? 'anim_90' : (inUseCountRate < 90 && inUseCountRate >= 80) ? 'anim_80': (inUseCountRate < 80 && inUseCountRate >= 70) ? 'anim_70': (inUseCountRate < 70 && inUseCountRate >= 60) ? 'anim_60': (inUseCountRate < 60 && inUseCountRate >= 50) ? 'anim_50': (inUseCountRate < 50 && inUseCountRate >= 40) ? 'anim_40': (inUseCountRate < 40 && inUseCountRate >= 30) ? 'anim_30': (inUseCountRate < 30 && inUseCountRate >= 20) ? 'anim_20': (inUseCountRate < 20 && inUseCountRate >= 10) ? 'anim_10':(inUseCountRate < 10 && inUseCountRate > 0) ? 'anim_5':'anim_0'}"></div>
</div>

						.tip_one {
                            position: relative;
                            overflow: hidden;
                            border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;

                            .rate_box {
                                margin: auto;
                                position: absolute;
                                top: 50%; left: 0; bottom: 0; right: 0;
                                z-index: 1000;
                            }
                            .water_green {
                                background-color: #3d6e7e;
                                background: -moz-linear-gradient(right, #316b78 0%, #2f6674 20%, #255264 60%, #1e4458 80%, #102941 100%);
                                background: -webkit-gradient(linear, top right, top left, color-stop(0%,#316b78),color-stop(20%,#2f6674),color-stop(60%,#255264),color-stop(80%,#1e4458), color-stop(100%,#102941));
                                background: -webkit-linear-gradient(right, #316b78 0%, #2f6674 20%, #255264 60%, #1e4458 80%, #102941 100%);
                                background: -o-linear-gradient(right, #316b78 0%, #2f6674 20%, #255264 60%, #1e4458 80%, #102941 100%);
                                background: -ms-linear-gradient(right,#316b78 0%, #2f6674 20%, #255264 60%, #1e4458 80%, #102941 100%);
                                background: linear-gradient(to right,#316b78 0%, #2f6674 20%, #255264 60%, #1e4458 80%, #102941 100%);
                                box-shadow: 9px 5px 8px 4px #316b78;
                            }

                            .water_level {
                                position: absolute;
                                margin: auto;
                                height: 145px;
                                width: 89px;
                                top: 196px;
                                border: none;
                                animation-name: anim_100;
                                animation-duration: 5s;
                                animation-timing-function: ease;
                                animation-fill-mode: forwards;
                                border-radius: 5px;
                                border-bottom-left-radius: 10px;
                                border-bottom-right-radius: 10px;
                            }
                        }
                        @keyframes anim_100 {
                            100% {
                                top: 55px;
                            }
                        }
                        @keyframes anim_90 {
                            100% {
                                top: 65px;
                            }
                        }
                        @keyframes anim_80 {
                            100% {
                                top: 80px;
                            }
                        }
                        @keyframes anim_70 {
                            100% {
                                top: 95px;
                            }
                        }
                        @keyframes anim_60 {
                            100% {
                                top: 105px;
                            }
                        }
                        @keyframes anim_50 {
                            100% {
                                top: 115px;
                            }
                        }
                        @keyframes anim_40 {
                            100% {
                                top: 125px;
                            }
                        }
                        @keyframes anim_30 {
                            100% {
                                top: 140px;
                            }
                        }
                        @keyframes anim_20 {
                            100% {
                                top: 165px;
                            }
                        }
                        @keyframes anim_10 {
                            100% {
                                top: 180px;
                            }
                        }
                        @keyframes anim_5 {
                            100% {
                                top: 185px;
                            }
                        }
                        @keyframes anim_0 {
                            100% {
                                top: 196px;
                            }
                        }