操场轨迹上下两边为直线，左右为半圆。
选择用纯css分成四段控制动画，最终效果如图：
详细分析：
创建HTML：
HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。
<div class="layout"><div class="point"></div>
</div>
核心css：
去掉了浏览器兼容用的代码。
把动画分成四个部分：上方直线->右边半圆->下方直线->左边半圆。
最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：
.layout{width:10px
height:150px
position:relative
margin-left:100px
margin-top:50px
/*background:red*/
animation-name:rotate
animation-duration:2s
animation-timing-function:linear
animation-iteration-count:infinite
animation-direction:alternate
animation-play-state:running
animation-direction:normal
}
@-webkit-keyframes rotate{
0% { left:0px top:0px
transform:rotate(0deg)
}
25% { left:150px top:0px
transform:rotate(0deg)
}
50% { left:150px top:50px
transform:rotate(180deg)
}
75% { left:0px top:50px
transform:rotate(180deg)
}
100%{ left:0px top:0px
transform:rotate(360deg)
}
}
完整代码:
<html><head>
<style>
.point{
width:10px
height:10px
background:blue
position:relative
border-radius:5px
margin:0 auto
}
.layout{
width:10px
height:150px
position:relative
margin-left:100px
margin-top:50px
/*background:red*/
animation-name:rotate
animation-duration:2s
animation-timing-function:linear
animation-iteration-count:infinite
animation-direction:alternate
animation-play-state:running
animation-direction:normal
/* Chrome: */
-webkit-animation-name:rotate
-webkit-animation-duration:2s
-webkit-animation-timing-function:linear
-webkit-animation-iteration-count:infinite
-webkit-animation-play-state:running
-webkit-animation-direction:normal
/* Firefox: */
-moz-animation-name:rotate
-moz-animation-duration:2s
-moz-animation-timing-function:linear
-moz-animation-iteration-count:infinite
-moz-animation-direction:alternate
-moz-animation-play-state:running
-moz-animation-direction:normal
/* Opera: */
-o-animation-name:rotate
-o-animation-duration:2s
-o-animation-timing-function:linear
-o-animation-iteration-count:infinite
-o-animation-direction:alternate
-o-animation-play-state:running
-o-animation-direction:normal
}
@-webkit-keyframes rotate{
0% { left:0px top:0px
transform:rotate(0deg)
-ms-transform:rotate(0deg) /* IE 9 */
-moz-transform:rotate(0deg) /* Firefox */
-webkit-transform:rotate(0deg) /* Chrome */
-o-transform:rotate(0deg) /* Opera */
}
25% { left:150px top:0px
transform:rotate(0deg)
-ms-transform:rotate(0deg) /* IE 9 */
-moz-transform:rotate(0deg) /* Firefox */
-webkit-transform:rotate(0deg) /* Chrome */
-o-transform:rotate(0deg) /* Opera */
}
50% { left:150px top:50px
transform:rotate(180deg)
-ms-transform:rotate(180deg) /* IE 9 */
-moz-transform:rotate(180deg) /* Firefox */
-webkit-transform:rotate(180deg) /* Chrome */
-o-transform:rotate(180deg) /* Opera */
}
75% { left:0px top:50px
transform:rotate(180deg)
-ms-transform:rotate(180deg) /* IE 9 */
-moz-transform:rotate(180deg) /* Firefox */
-webkit-transform:rotate(180deg) /* Chrome */
-o-transform:rotate(180deg) /* Opera */
}
100%{ left:0px top:0px
transform:rotate(360deg)
-ms-transform:rotate(360deg) /* IE 9 */
-moz-transform:rotate(360deg) /* Firefox */
-webkit-transform:rotate(360deg) /* Chrome */
-o-transform:rotate(360deg) /* Opera */
}
}
</style>
</head>
<body>
<div class="layout">
<div class="point"></div>
</div>
</body>
</html>
代码如下：
var arr = [2,53,23,'test',9,'array']
//判断array在不在数组arr中。
arr.indexOf('array') !== -1 ? alert('存在') : alert('不存在')。
扩展资料：
详图符号：详图与被索引的图样在同一张图纸内，则在下半圆中间画一水平细实线。
索引符号：索引出的详图，如采用标准图，应在索引符号水平直径的延长线上加注该标准图册的编号。
详图符号：标注详图的编号以及详图所在的图纸编号。
索引符号：用索引符号注明画出详图的位置。
