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

html-css023

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>

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

代码

<!doctype html>

<head>

<title>

</title>

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

<style>

*{

margin:0

padding:0

}

ul{

list-style-type:none

overflow:hidden

margin-left:200px

margin-top:20px

}

ul li{

margin-left:10px

float:left

color:red

display:block

border:1px solid red

}

a{

font-size:18px

color:black

text-decoration:none

}

a:hover{

color:red

}

ul li:hover{

border:0px solid white

}

#div1{

width:100px

height:100px

background:red

margin-left:200px

display:block

}

#div2{

width:100px

height:100px

background:blue

margin-left:200px

display:none

}

#div3{

width:100px

height:100px

background:yellow

margin-left:200px

display:none

}

</style>

<script>

window.onload=function(){

var oDiv=document.getElementById('div1')

var aDiv=document.getElementById('div2')

var bDiv=document.getElementById('div3')

var oUl=document.getElementById('but')

var aLl=oUl.getElementsByTagName('li')

for(var i=0i<aLl.lengthi++){

aLl[i].index=i

aLl[i].onclick=function(){

for(var i=0i<aLl.lengthi++){

oDiv.style.display="none"

aDiv.style.display="none"

bDiv.style.display="none"

}

//alert(this.index)

if(this.index==0){

oDiv.style.display="block"

}

if(this.index==1){

aDiv.style.display="block"

}

if(this.index==2){

bDiv.style.display="block"

}

}

}

}

</script>

</head>

<body>

<ul id="but">

<li><a class="ce" href="#">红</a></li>

<li><a href="#">篮</a></li>

<li><a href="#">黄</a></li>

</ul>

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

</body>

</html>

1.打这些字符出来直接写到网页标题中,比如:·

2.li自带圆点(如果你没去掉的话)

3.图片做个圆点或其他玩意,定义成背景图

如果你指的是<title></title>这个标题里面的文字,那css控制不了,只能打符号字进去:

<title>●你的标题</title>

<title>·你的标题</title>

大多数拼音输入法先:按v再按1,都能打出这些字符