江湖小栈

Do Better

0%

CSS的几个demo

发表于 更新于 分类于 Valine：
本文字数： 2.8k 阅读时长 ≈ 3 分钟
CSS的几个小demo

CSS的几个demo……

图片加速旋转特效

1
2
3
4
5
6
7
8
9
10
img:hover{
  transform: rotate(666turn);
  transition-delay: 1s;
  transition-property: all;
  transition-duration: 59s;
  transition-timing-function: cubic-bezier(.34,0,.84,1);
  -moz-transition-timing-function: cubic-bezier(.34,0,.84,1);       /* Firefox 4 */
  -webkit-transition-timing-function: cubic-bezier(.34,0,.84,1);    /* Safari 和 Chrome */
  -o-transition-timing-function: cubic-bezier(.34,0,.84,1);         /* Opera */
}

浮云特效

html example

1
2
<div id="mid-ground" class="wall"></div>
<div id="for-eground" class="wall"></div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
@-webkit-keyframes STAR-MOVE {
  from {
    background-position:0% 0%;
  }
  to {
    background-position:600% 0%;
  }
}@keyframes STAR-MOVE {
  from {
    background-position:0% 0%;
  }
  to {
    background-position:600% 0%;
  }
}
.wall {
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}
div#mid-ground {
  background:url('midground.png') repeat 20% 0%;      //图片地址：https://hexiongbiao.cn/img/midground.png
  z-index:0;
  -webkit-animation:STAR-MOVE  90s linear infinite;
  -moz-animation:STAR-MOVE  90s linear infinite;
  -ms-animation:STAR-MOVE  90s linear infinite;
  animation:STAR-MOVE  90s linear infinite;
  animation-direction:alternate;
}
div#fore-ground {
  background:url('foreground.png') repeat 35% 0%;     //图片地址：https://hexiongbiao.cn/img/foreground.png
  z-index:0;
  -webkit-animation:STAR-MOVE  55s linear infinite;
  -moz-animation:STAR-MOVE  55s linear infinite;
  -ms-animation:STAR-MOVE  55s linear infinite;
  animation:STAR-MOVE  55s linear infinite;
  animation-direction:alternate;
}

滚动条样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* CHROME浏览器中自定义滚动条样式 */
/* 滚动条的宽度 */
::-webkit-scrollbar {
  width:1.5vh;
  height:1.5vh;
  background-color:rgba(255,255,255,0.1);
}
/* ::-webkit-scrollbar-track-piece滚动条凹槽的颜色，还可以设置边框属性。 */
::-webkit-scrollbar-track {
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  background-color:#888;
}
::-webkit-scrollbar-thumb:hover{
  background-color: chocolate;
}
/* 滚动条的设置 */
::-webkit-scrollbar-thumb { 
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
  background-color:#2f2f2f;
}

参考文章

底部版权信息模板

html example

1
2
3
<div class="footer-bottom">
  <p>&emsp;湘ICP备19012697号&emsp;Copyright&copy;2018&emsp;<a href="https://hexiongbiao.cn">DoubleAm</a>&emsp;www.hexiongbiao.cn&emsp;</p>
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.footer-bottom {
  z-index:10;
  height:5vh;
  line-height:1vh;
  position:fixed;
  bottom:0;
  width:100%;
  text-align:center;
  background-color:rgba(255,255,255,0.2);
  color:#fff;
  font-size:1vh;
  letter-spacing:0.1vh;
  cursor: default;
}
.footer-bottom a {
  color:#fff !important;
  text-decoration: none !important;
  cursor: pointer;
}
.footer-bottom a:hover{
  color: chocolate !important;
}

设置鼠标样式

1
cursor: url(image-url),type;
相关推荐
bulb