<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#myDIV
{
width:100px
height:100px
position:relative
}
@keyframes mymove
{
0% {}
100% {-webkit-transform:rotate(360deg)}
}
#mybak{
position:absolute
left:0
top:0
width:100px
height:100px
background:black
-webkit-animation:mymove 10s infinite
}
#mynum{
position:absolute
left:0
top:0
width:100px
height:100px
text-align:center
color:white
font-size:70px
line-height:100px
}
</style>
</head>
<body>
<div id="myDIV"><div id="mybak"></div><div id="mynum">10</div></div>
</body>
</html>
在css设置可改变大小的div滚动条样式方法：
1.首先新建html文档，进入代码书写界面。
2.在</head>和<body>的里面写入代码，在<div>里面写入想要输入的内容</div>。
3.书写外层轨道css代码。body::-webkit-scrollbar { width:20pxheight:2pxbackground:#cccborder-radius:10px/*外层轨道*/}
这里主要是设置外层轨道的形状和颜色。
4.书写内层轨道css代码。body::-webkit-scrollbar-thumb{ display:blockwidth:6pxmargin:0 autoborder-radius: 10pxbackground:red/*内层轨道*/}
这里主要是设置内层轨道的形状和颜色。
5.代码工作做完后，就可以查看效果，效果如下红框所示，滚动条设置完成。
<style type="text/css">div{
animation: myfirst 5s
}
@keyframes myfirst{
from {left: 0}
to {left: 100px}
}
</style>
