css怎么让3个点依次循环出现

html-css010

css怎么让3个点依次循环出现,第1张

你是不是说的这种圆点依次出现的效果?如果是的haul,那就用动画来做就可以了。下面是源码,可以参考一下咯。另外,javascript也可以来控制依次出现。

<!DOCTYPE html>

<html>

<head>

<title>圆点依次出现</title>

<meta name="keywords" content="圆点依次出现"/>

<meta name="description" content="圆点依次出现"/>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<style>

*{

padding:0

margin:0

box-shadow:1px 1px gray inset,-1px -1px gray inset

}

#box{

position:relative

width:30%

height:300px

margin:0 auto

}

.dian{

position:absolute

width:20px

height:20px

border-radius:50%

top:270px

}

#dian1{

left:70%

animation:xdian1 2.5s both linear infinite

-webkit-animation:xdian1 2.5s both linear infinite/* Safari and Chrome */

}

#dian2{

left:80%

animation:xdian2 2.5s both linear infinite

-webkit-animation:xdian2 2.5s both linear infinite/* Safari and Chrome */

}

#dian3{

left:90%

animation:xdian3 2.5s both linear infinite

-webkit-animation:xdian3 2.5s both linear infinite/* Safari and Chrome */

}

@keyframes xdian1{

0%{background:gray}

33%{background:none}

68%{background:none}

100%{background:none}

}

@keyframes xdian2{

0%{background:none}

33%{background:gray}

68%{background:none}

100%{background:none}

}

@keyframes xdian3{

0%{background:none}

33%{background:none}

68%{background:gray}

100%{background:none}

}

</style>

</head>

<body>

<div id="box">

<span id="dian1"></span>

<span id="dian2"></span>

<span id="dian3"></span>

</div>

</body>

</html>

这个源码可以参考一下咯,自己用的时候还可以继续修改优化。

在echo 前加个计数变量,并通过判断计数的大小来决定是否显示。

示例:

$i =0

foreach ($array as $as =>$val)

{

$i=i++

if i>0 {

echo $val

}

}