共有 2 篇文章
CSS-Only Carousel
2023-02-25 - 2024-09-18
CSS

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}
Placeholder
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元素代替浏览器原声的占位符