#gavinPlay{
/* background:color url x y repeat 图片来自百度图片，按需要更换 */
background:red url("https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2406548182,3889596045&fm=80") center no-repeat
/* background-size:auto auto || cover 代表以宽或高填满元素背景 */
background-size:cover
/* 随便设置宽高值，测试 */
width:200px
height:200px
/* 设置默认样式，开启3d硬件加速 */
-webkit-transform:translate3d(0,0,0)
-moz-transform:translate3d(0,0,0)
transform:translate3d(0,0,0)
/* 设置动画，animation:动画名称 动画播放时长单位秒或微秒 动画播放的速度曲线linear为匀速 动画播放次数infinite为循环播放 */
-webkit-animation:play 3s linear infinite
-moz-animation:play 3s linear infinite
animation:play 3s linear infinite
}
@-webkit-keyframes play{
0% {
/*
水平翻转
*/
-webkit-transform:rotateY(0deg)
/*
垂直翻转
-webkit-transform:rotateX(0deg)
顺时针旋转
-webkit-transform:rotate(0deg)
逆时针旋转
-webkit-transform:rotate(0deg)
*/
}
100% {
/* 水平翻转 */
-webkit-transform:rotateY(360deg)
/* 垂直翻转
-webkit-transform:rotateX(360deg)
顺时针旋转
-webkit-transform:rotate(360deg)
逆时针旋转
-webkit-transform:rotate(-360deg)
*/
}
}
@-moz-keyframes play{
0% {
-moz-transform:rotateY(0deg)
/*
-moz-transform:rotateX(0deg)
-moz-transform:rotate(0deg)
-moz-transform:rotate(0deg)
*/
}
100% {
-moz-transform:rotateY(360deg)
/*
-moz-transform:rotateX(360deg)
-moz-transform:rotate(360deg)
-moz-transform:rotate(-360deg)
*/
}
}
@keyframes play{
0% {
transform:rotateY(0deg)
/*
transform:rotateX(0deg)
transform:rotate(0deg)
transform:rotate(0deg)
*/
}
100% {
transform:rotateY(360deg)
/*
transform:rotateX(360deg)
transform:rotate(360deg)
transform:rotate(-360deg)
*/
}
} <!-- html 布局代码 -->
<div id="gavinPlay"></div>
css3有一个图片定位属性，background-position比如我们要用要第二个“心”
首先创建一个盒子给他一个宽高度=图标的宽高多1px，为了显示完全而不是刚好重叠，比如这里用20px代替
<div style="width:20pxheight:20pxbackground:url(图片地址)no-repeat/*不重复显示*/ 20px 0px/*位置是上和右，这里就是距离上面20px的距离，右边距0*/"></div>
在css2.0中，border是不能设置为一个图片的，可设置如下属性：
border-width：边框宽度
border-style：边框样式
border-color：边框颜色
在css2中可以设置为：
div{ border: 1px solid red}
在css3.0中，border多出了一些属性，因此可以用图片去设置border，具体如下：
border-radius：设置圆角边框
box-shadow : 设置边框阴影
border-image : 设置图片边框
具体设置举例：
1、设置圆角
div
{
border:2px solid
border-radius:25px
}
2、设置阴影
div{ box-shadow: 10px 10px 5px #888888}
3、设置图片边框
div
{
border-image:url(border.png) 30 30 round
}
