Files
xhs-examples/xhs-mini-demos/component-case/on-compass-change/on-compass-change.css
2025-09-14 00:21:54 +08:00

48 lines
725 B
CSS

.direction {
position: relative;
margin-top: 35px;
display: flex;
width: 520px;
height: 520px;
align-items: center;
justify-content: center;
}
.direction-value {
position: relative;
font-size: 100px;
color: #353535;
line-height: 1;
z-index: 1;
}
.direction-degree {
position: absolute;
top: 0;
right: -20px;
font-size: 30px;
}
.bg-compass{
position: absolute;
top: 0;
left: 0;
width: 520px;
height: 520px;
transition: .1s;
}
.bg-compass-line{
position: absolute;
left: 134px;
top: -5px;
width: 3px;
height: 28px;
background-color: #1AAD19;
border-radius: 500px;
z-index: 1;
}
.controls{
margin-top: 35px;
}
.controls button{
margin-left: 10px;
float: left;
}