共有 2 篇文章
📅 最近更新
2023-02-25
- 2024-09-18
1<div class="wheelPlayer wheelAnimate">
2 <div>1</div>
3 <div>2</div>
4 <div>3</div>
5</div>
1.wheelPlayer{
2 padding: 20px 0;
3 margin: auto;
4 width: 350px;
5}
6.wheelPlayer div{
7 position: relative;
8 height: 25px;
9 line-height: 26px;
10 width: 70px;
11 text-align: center;
12 border: 1px solid gray;
13}
14.wheelAnimate div{
15 animation: whellPlayer 9s infinite;
16 -moz-animation: whellPlayer 9s infinite;
17 -webkit-animation: whellPlayer 9s infinite;
18}
19.wheelPlayer div:nth-of-type(1){
20 animation-delay: -6s;
21 -moz-animation-delay: -6s;
22 -webkit-animation-delay: -6s;
23}
24.wheelPlayer div:nth-of-type(2){
25 animation-delay: -3s;
26 -moz-animation-delay: -3s;
27 -webkit-animation-delay: -3s;
28 margin-top: -27px;
29}
30.wheelPlayer div:nth-of-type(3){
31 animation-delay: -0s;
32 -moz-animation-delay: 0s;
33 -webkit-animation-delay: 0s;
34 margin-top: -27px;
35}
2022-10-11
- 2024-09-18
input输入框占位符变化:输入框处于聚焦状态时,输入框的占位符内容以动画形式移动到左上角作为标题
1<div class="input-box">
2 <input class="input-control input-outline" placeholder="账号">
3 <label class="input-label">账号</label>
4</div>
首先:让浏览器默认的placeholder
效果不可见
1.input-control:placeholder-shown::placeholder {
2 color: transparent;
3}
其次:使用.input-label
元素代替浏览器原声的占位符