0%

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