主要是animation的用法
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
body{
background: #051134;
}
.title{
width: 100px;
height: 100px;
animation: blink 1s ease infinite;
background: transparent url(img/map_icon_cs.png) no-repeat left top;
background-size: 50%;
}
@keyframes blink{
100% {
opacity: 1;
}
75% {
opacity: 0.75;
}
50% {
opacity: 0.5;
}
25% {
opacity: 0.25;
}
0% {
opacity: 0;
}
}
</style>
<body>
<p class="title"></p>
</body>
<script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function bg(){
arr=['url(img/map_icon_cs.png)','url(img/map_icon_cz.png)',
'url(img/map_icon_jh.png)','url(img/map_icon_pd.png)',
'url(img/map_icon_ps.png)']
var index = Math.floor((Math.random()*arr.length));
console.log(arr[index]);
$('p').css('background-image',arr[index])
}
setInterval(function(){
bg()
},1000)
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
