请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
先看效果:
代码非常简单:
<style>
.tube {
margin: 20px auto;
display: flex;
justify-content: center;
width: 10px;
height: 100px;
background-color: #eee;
background: linear-gradient(#aaa 1px, #eee 1px);
background-size: 8px 10px;
box-shadow: 0 -8px 0 0 red, 0 18px 0 0 red;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.meter {
position: absolute;
width: 4px;
height: 100px;
background: rgba(255,0,0,.45);
top: 54px;
}
</style>
<div class="tube">
<div class="meter"></div>
</div>
.tube 选择器是体温针主体,两头即顶盖和底座用box-shadow做的;.meter 选择器是体(进)温(度)显示,它的 top 值可以进行开发。 |