CSS八等分圆的实现示例

来源:脚本之家  责任编辑:小易  

4 首先我们需要分析一下整个牌的构造,以普通数字牌1为例,共可分为5个部分,分别是1、外框2、颜色3、上下角标数字4、里面的白色椭圆5、中间的大数字 对应不同的部分,我们将其分解为5部分的html代码并为其添加class,1、卡牌背景2、卡牌颜色(

简介

对于CSS的练习介绍如何绘制八等分的圆。

html部分: 0% 最内层的div3裁剪一半然后旋转需要的角度, 父级div2裁剪一半,此时已经裁剪出来了那个扇形了 最后在上面加个圆形遮盖层 css代码: .div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200px; height:200px; borde

问题1 主要思路

12等分圆 .container { position: relative; width: 200px; height: 200px; overflow: hidden; border: 2px outset deeppink; border-radius: 50%; margin:5em auto; } .layer { position: absolute; transform-origin: left top; left: 100px;

这个地方的主要思路是将一个八等分的圆分成两部分。左边和右边的圆分别用半圆旋转而得。

1、参照栅格系统 2、两端对齐 text-align:justify; text-align-last:justify;3、css3 flex display:flex; justify-content:space-between;

1 注意:每个半圆最后要用外面的外包矩形切一下 详见#lfet #right

我大概看你这个,应该不是一张图这么简单,一般都是在li标签里面加div,当一个列表来做的吧

2 右边旋转的圆顺序不一样后面的可能会遮挡前面的要么顺序要对,要么使用z-index

河南方言文化博大精深,很多词汇都相当传神,分享一些常见的河南方言。1、醭(bú)——面醭,发霉生醭。2、大(da)——父亲或父亲的兄弟。三大。3、捣(dǎo)——欺骗,坑害。捣人。4、嬎(fàn)——鸡等禽类下蛋。鸡嬎蛋。5、薅(hāo)——拔,揪、抓。薅草,薅胡子。6、老(lǎo)——婉称死亡。他爷都老三年了。7、馏(liù)——把凉了的熟食再蒸热。馏馍。8、冇(mǎo)——错过。把他冇过去了。冇(mù)——没有。冇钱。9、觅(mī)——雇、租。觅三轮儿,觅保姆。10、脬(pāo)——膀胱。猪尿(suī)脬。11、搉(quō)——打、敲打、砸。搉你一顿。搉(quō)——捣、舂。搉蒜汁儿。12

问题2 重点代码

其实文玩里面我觉得也是有黑幕的,价格绝对人为操控,就拿金刚菩提和落地红来说,都是植物的种子吧?又不是多贵重的东西,产量也都很高,为什么大家都喜欢金刚,而很贬低落地红呢?这里面是有主流的流派诱导大家,还是金刚的大货主为了卖自己的货而狠命打压落地红呢?举个例子吧,清代贵族皇族玩翡翠,和现代人观点很不相同,冰种,玻璃种,满绿都很少见,大家去故宫看下就知道了!现在的冰种,玻璃种,满绿的都是天价,前几年香港拍卖的乾隆朝珠我在画册上见过,福禄寿,不透明,拍了大概1800万!前几天看了一个报道,满绿玻璃种现代的一个项链拍了大几千万!哪个好??

1 半圆和圆

北方叫做“橘”,南方叫做“桔”,“橘”字俗作“桔”现在已经没有区别了,都指同一种水果。橘子,常绿乔木橘子树的果实,成熟的果实球形稍扁,果皮红黄色,果肉多汁,味道甜。(相当于书面语);桔子:是橘子的俗称(相当于俗语)。桔子:桔,为芸香科植物福桔或朱桔等多种桔类的成熟果实。种类很多,有八布桔、金钱桔、甜桔、酸桔、宫川、新津桔、尾张桔、黄岩桔、温州桔、四川桔等品种。果实较小,常为扁圆形,皮色橙红、朱红或橙黄。果皮薄而宽松,海绵层薄,质韧,容易剥离,瓤瓣7至11个。味甜或酸,种子呈尖细状,不耐贮藏。说到橘子与桔子的区别,一般人是不知道的。而对于橘子与桔子这两种不同的写法,我们一般也只是在文章中才会看得

.circle-left{ width: 100px;height: 200px; border-radius: 0px 100px 100px 0px; position: absolute; right: 0; transform-origin: 0 50%; } .circle-right{ width: 100px;height: 200px; border-radius: 100px 0px 0px 100px ; position: absolute; right: 0; transform-origin: 100% 50%; } #circle0{ width: 200px;height: 200px; border-radius: 100px;background-color: yellowgreen; position: relative; }

幼师是一个很累但又喜欢坚持的职业当幼师职业坚持了很多年后有个当幼师的妈是怎样一种体验?YOYO采访了一些幼师的孩子,听听她们的感受吧~体验着当幼师又是妈妈的感觉真的很幸福很满足其实当妈又当幼师不是想象中一般的辛苦能做她们的孩子真好每个妈妈都是女超人每个当幼师又当妈的简直是女神!为她们点个赞吧更多精彩的手工教程请关注幼儿园创意亲子手工(kidsiy95)每天来点小惊喜!

上面采用的是border-radius实现圆和半圆

2 将半圆切整齐

#left{ clip: rect(0px 100px 200px 0px); position: absolute; right: 0px; width: 100px; height: 200px; overflow: hidden; }

使用clip属性将其切整齐

clip只有一种值rect(a,b,c,d)

代码:

<!DOCTYPE html> <html> <head> <title>CSS等分圆</title> <meta charset="utf-8"> <style type="text/css"> .circle-left{ width: 100px;height: 200px; border-radius: 0px 100px 100px 0px; position: absolute; right: 0; transform-origin: 0 50%; } .circle-right{ width: 100px;height: 200px; border-radius: 100px 0px 0px 100px ; position: absolute; right: 0; transform-origin: 100% 50%; } #circle0{ width: 200px;height: 200px; border-radius: 100px;background-color: yellowgreen; position: relative; } #circle2{ background-color: #70f3ff; } #circle3{ background-color: #ff461f; transform: rotate(45deg); } #circle4{ background-color: #bce672; transform: rotate(90deg); } #circle5{ background-color: #ffffff; transform: rotate(135deg); } #circle6{ background-color: #3b2e7e; transform: rotate(180deg); } #circle7{ background-color: #ff2121; transform: rotate(225deg); } #circle8{ background-color: #16a951; transform: rotate(270deg); } #circle9{ background-color: #e0eee8; transform: rotate(315deg); } #left{ clip: rect(0px 100px 200px 0px); position: absolute; right: 0px; width: 100px; height: 200px; overflow: hidden; } #right{ clip: rect(0px 100px 200px 0px); position: absolute; left: 0px; width: 100px; height: 200px; overflow: hidden; } </style> </head> <body> <div id="circle0"> <div id="left"> <div class="circle-left" id="circle2"></div> <div class="circle-left" id="circle3"></div> <div class="circle-left" id="circle4"></div> <div class="circle-left" id="circle5"></div> </div> <div id="right"> <div class="circle-right" id="circle9"></div> <div class="circle-right" id="circle8"></div> <div class="circle-right" id="circle7"></div> <div class="circle-right" id="circle6"></div> </div> </div> </body> </html>

截图

扩展阅读,根据您访问的内容系统为您准备了以下内容,希望对您有帮助。

用css如何实现一个圆等分12份的样子

<html>

<head>

<meta charset="UTF-8"/>

<title> 端午节快乐</title>

</head>

<style type="text/css">

*{margin: 0;padding: 0;}

div{width: 400px;height: 400px;color: red;border: 5px cornflowerblue solid;position: fixed;top: 0;overflow: hidden;border-radius:50% ;column-count:6 ;column-gap: 30px;

-webkit-column-gap:30px;-webkit-column-count:6;font-size: 2em;}

#a{color: chartreuse;}

#b{transform:rotate(45deg) ;-webkit-transform: rotate(45deg);}

#c{width:300px;height: 300px;background:red;border-radius:50%;position: fixed; top:50px ;left: 50px;}

span{width:1px;height:300px;position: absolute;top:0;left:150px;background:navajowhite;}

.a{transform:rotate(60deg);-webkit-transform: rotate(60deg);background:darkmagenta;}

.b{transform:rotate(90deg);-webkit-transform: rotate(90deg);background:turquoise;}

.c{transform:rotate(120deg);-webkit-transform: rotate(120deg);background: yellow;}

.d{transform:rotate(150deg);-webkit-transform: rotate(150deg);background: mistyrose;}

.e{transform:rotate(180deg);-webkit-transform: rotate(180deg);background: greenyellow;}

.f{transform:rotate(30deg);-webkit-transform: rotate(30deg);background:blue;}

</style>

<body>

<div id="a" class="div">

端午节快乐端午节快乐端午节 快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节 快乐端午节快乐端午节快乐端午节快乐

</div>

<div id="b" class="div">

端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐端午节快乐

</div>

<div id="c">

<span class="a"></span>

<span class="b"></span>

<span class="c"></span>

<span class="d"></span>

<span class="e"></span>

<span class="f"></span>

</div>

</body>

</html>

用css能实现一个圆等分12份的样子吗

可以呀。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css 12等分圆</title>

</head>

<style type="text/css">

    .container {

        position: relative;

        width: 200px;

        height: 200px;

        overflow: hidden;

        border: 2px outset deeppink;

        border-radius: 50%;

        margin:5em auto;

    }

    .layer {

        position: absolute;

        transform-origin: left top;

        left: 100px;

        top: 100px;

        width: 100px;

        height: 100px;

        border: 1px solid white;

        box-sizing: border-box;

    }

</style>

<script type="text/javascript">

    onload = function () {

        [].slice.call(document.querySelectorAll('.layer'), 0).forEach(function (item, i) {

            item.style.backgroundColor = '#' + (~~(Math.random() * (1 << 24))).toString(16);

            item.style.transform = 'rotate(' + 360 / 12 * (i + 1) + 'deg)skewX(60deg)';

        });

    }

</script>

<body>

<div class="container">

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

    <div class="layer"></div>

</div>

</body>

</html>

css画圆,如何用纯css实现一个动态画圆环效

给你一个例子:

<!doctype html>    

<html>    

<head>    

<meta charset="utf-8">    

<title>css动画</title>    

<style>    

*, *:before, *:after {    

box-sizing: border-box;    

margin: 0;    

padding: 0;    

}    

:root, html, body {    

font-family: 'Poiret One', 'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;    

background: #222;    

color: white;    

}    

h1 {    

text-align: center;    

margin: 1rem auto 2rem;    

font-weight: normal;    

}    

p {    

margin: 1rem;    

}    

.row {    

width: 80%;    

height: 150px;    

margin: 2rem auto;    

}    

.cell {    

display: inline-block;    

width: 49%;    

text-align: center;    

}    

.circle {    

display: inline-block;    

width: 100px;    

height: 100px;    

border-radius: 50%;    

background: whiteSmoke;    

box-shadow: 4px -40px 60px 5px rgb(26, 117, 206) inset;    

}    

.square {    

display: inline-block;    

width: 100px;    

height: 100px;    

border-radius: 20px;    

background: whiteSmoke;    

box-shadow: 4px -40px 60px 5px rgb(26, 117, 206) inset;    

}    

.loader {    

background: linear-gradient(to right, rgb(22, 113, 202) 50%, transparent 50%);    

animation: spin 1s infinite linear;    

}    

.loader:before {    

display: block;    

content: '';    

position: relative;    

top: 50%;    

left: 50%;    

transform: translate(-50%, -50%);    

width: 90px;    

height: 90px;    

background: #222;    

border-radius: 50%;    

}    

.gelatine {    

animation: gelatine 0.5s infinite;    

}    

@keyframes gelatine {    

from, to { transform: scale(1, 1); }    

25% { transform: scale(0.9, 1.1); }    

50% { transform: scale(1.1, 0.9); }    

75% { transform: scale(0.95, 1.05); }    

}    

.spin {    

animation: spin 1s infinite linear;    

}    

@keyframes spin {    

from { transform: rotate(0deg); }    

to { transform: rotate(360deg); }    

}    

.elastic-spin {    

animation: elastic-spin 1s infinite ease;    

}    

@keyframes elastic-spin {    

from { transform: rotate(0deg); }    

to { transform: rotate(720deg); }    

}    

.pulse {    

animation: pulse 1s infinite ease-in-out alternate;    

}    

@keyframes pulse {    

from { transform: scale(0.8); }    

to { transform: scale(1.2); }    

}    

.flash {    

animation: flash 500ms ease infinite alternate;    

}    

@keyframes flash {    

from { opacity: 1; }

    

to { opacity: 0; }    

}    

.hithere {    

animation: hithere 1s ease infinite;    

}    

@keyframes hithere {    

30% { transform: scale(1.2); }    

40%, 60% { transform: rotate(-20deg) scale(1.2); }    

50% { transform: rotate(20deg) scale(1.2); }    

70% { transform: rotate(0deg) scale(1.2); }    

100% { transform: scale(1); }    

}    

.grow {    

animation: grow 2s ease infinite;    

}    

@keyframes grow {    

from { transform: scale(0); }    

to { transform: scale(1); }    

}    

.fade-in {    

animation: fade-in 2s linear infinite;    

}    

@keyframes fade-in {    

from { opacity: 0; }    

to { opacity: 1; }    

}    

.fade-out {    

animation: fade-out 2s linear infinite;    

}    

@keyframes fade-out {    

from { opacity: 1; }    

to { opacity: 0; }    

}    

.bounce {    

animation: bounce 2s ease infinite;    

}    

@keyframes bounce {    

70% { transform:translateY(0%); }    

80% { transform:translateY(-15%); }    

90% { transform:translateY(0%); }    

95% { transform:translateY(-7%); }    

97% { transform:translateY(0%); }    

99% { transform:translateY(-3%); }    

100% { transform:translateY(0); }    

}    

.bounce2 {    

animation: bounce2 2s ease infinite;    

}    

@keyframes bounce2 {    

0%, 20%, 50%, 80%, 100% {transform: translateY(0);}    

40% {transform: translateY(-30px);}    

60% {transform: translateY(-15px);}    

}    

.shake {    

animation: shake 2s ease infinite;    

}    

@keyframes shake {    

0%, 100% {transform: translateX(0);}    

10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}    

20%, 40%, 60%, 80% {transform: translateX(10px);}    

}    

.flip {    

backface-visibility: visible !important;    

animation: flip 2s ease infinite;    

}    

@keyframes flip {    

0% {    

transform: perspective(400px) rotateY(0);    

animation-timing-function: ease-out;    

}    

40% {    

transform: perspective(400px) translateZ(150px) rotateY(170deg);    

animation-timing-function: ease-out;    

}    

50% {    

transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);    

animation-timing-function: ease-in;    

}    

80% {    

transform: perspective(400px) rotateY(360deg) scale(.95);    

animation-timing-function: ease-in;    

}    

100% {    

transform: perspective(400px) scale(1);    

animation-timing-function: ease-in;    

}    

}    

.swing {    

transform-origin: top center;    

animation: swing 2s ease infinite;    

}    

@keyframes swing {    

20% { transform: rotate(15deg); }

    

40% { transform: rotate(-10deg); }    

60% { transform: rotate(5deg); }

    

80% { transform: rotate(-5deg); }

    

100% { transform: rotate(0deg); }    

}    

.wobble {    

animation: wobble 2s ease infinite;    

}    

@keyframes wobble {    

0% { transform: translateX(0%); }    

15% { transform: translateX(-25%) rotate(-5deg); }    

30% { transform: translateX(20%) rotate(3deg); }    

45% { transform: translateX(-15%) rotate(-3deg); }    

60% { transform: translateX(10%) rotate(2deg); }    

75% { transform: translateX(-5%) rotate(-1deg); }    

100% { transform: translateX(0%); }    

}    

.fade-in-down {    

animation: fade-in-down 2s ease infinite;    

}    

@keyframes fade-in-down {    

0% {    

opacity: 0;    

transform: translateY(-20px);    

}    

100% {    

opacity: 1;    

transform: translateY(0);    

}    

}    

.fade-in-left {    

animation: fade-in-left 2s ease infinite;    

}    

@keyframes fade-in-left {    

0% {    

opacity: 0;    

transform: translateX(-20px);    

}    

100% {    

opacity: 1;    

transform: translateX(0);    

}    

}    

.fade-out-down {    

animation: fade-out-down 2s ease infinite;    

}    

@keyframes fade-out-down {    

0% {    

opacity: 1;    

transform: translateY(0);    

}    

100% {    

opacity: 0;    

transform: translateY(20px);    

}    

}    

.fade-out-right {    

animation: fade-out-right 2s ease infinite;    

}    

@keyframes fade-out-right {    

0% {    

opacity: 1;    

transform: translateX(0);    

}    

100% {    

opacity: 0;    

transform: translateX(20px);    

}    

}    

.bounce-in {    

animation: bounce-in 2s ease infinite;    

}    

@keyframes bounce-in {    

0% {    

opacity: 0;    

transform: scale(.3);    

}    

50% {    

opacity: 1;    

transform: scale(1.05);    

}    

70% { transform: scale(.9); }    

100% { transform: scale(1); }    

}    

.bounce-in-right {    

animation: bounce-in-right 2s ease infinite;    

}    

@keyframes bounce-in-right {    

0% {    

opacity: 0;    

transform: translateX(2000px);    

}    

60% {    

opacity: 1;    

transform: translateX(-30px);    

}    

80% { transform: translateX(10px); }    

100% { transform: translateX(0); }    

}    

.bounce-out {    

animation: bounce-out 2s ease infinite;    

}    

@keyframes bounce-out {    

0% { transform: scale(1); }    

25% { transform: scale(.95); }    

50% {    

opacity: 1;    

transform: scale(1.1);    

}    

100% {    

opacity: 0;    

transform: scale(.3);    

}    

}    

.bounce-out-down {    

animation: bounce-out-down 2s ease infinite;    

}    

@keyframes bounce-out-down {    

0% { transform: translateY(0); }    

20% {    

opacity: 1;    

transform: translateY(-20px);    

}    

100% {    

opacity: 0;    

transform: translateY(20px);    

}    

}    

.rotate-in-down-left {    

animation: rotate-in-down-left 2s ease infinite;    

}    

@keyframes rotate-in-down-left {    

0% {    

transform-origin: left bottom;    

transform: rotate(-90deg);    

opacity: 0;    

}    

100% {    

transform-origin: left bottom;    

transform: rotate(0);    

opacity: 1;    

}    

}    

.rotate-in-up-left {    

animation: rotate-in-up-left 2s ease infinite;    

}    

@keyframes rotate-in-up-left {    

0% {    

transform-origin: left bottom;    

transform: rotate(90deg);    

opacity: 0;    

}    

100% {    

transform-origin: left bottom;    

transform: rotate(0);    

opacity: 1;    

}    

}    

.hinge {    

animation: hinge 2s ease infinite;    

}    

@keyframes hinge {    

0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }    

20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }    

40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }    

80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }    

100% { transform: translateY(700px); opacity: 0; }    

}    

.roll-in {    

animation: roll-in 2s ease infinite;    

}    

@keyframes roll-in {    

0% {    

opacity: 0;    

transform: translateX(-100%) rotate(-120deg);    

}    

100% {    

opacity: 1;    

transform: translateX(0px) rotate(0deg);    

}    

}    

.roll-out {    

animation: roll-out 2s ease infinite;    

}    

@keyframes roll-out {    

0% {    

opacity: 1;    

transform: translateX(0px) rotate(0deg);    

}    

100% {    

opacity: 0;    

transform: translateX(100%) rotate(120deg);    

}    

}    

</style>    

</head>    

<body>    

<h1>CSS Animation</h1>    

<div class="row">    

<div class="cell">    

<div class="circle loader"></div>    

<p>loader</p>    

</div>    

<div class="cell">    

<div class="circle gelatine"></div>    

<p>gelatine</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle spin"></div>    

<p>spin</p>    

</div>    

<div class="cell">    

<div class="circle elastic-spin"></div>    

<p>elastic spin</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle pulse"></div>    

<p>pulse</p>    

</div>    

<div class="cell">    

<div class="circle flash"></div>    

<p>flash</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="square hithere"></div>    

<p>hi there!</p>    

</div>    

<div class="cell">    

<div class="circle grow"></div>    

<p>grow</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle fade-in"></div>    

<p>fade in</p>    

</div>    

<div class="cell">    

<div class="circle fade-out"></div>    

<p>fade out</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle bounce"></div>    

<p>bounce</p>    

</div>    

<div class="cell">    

<div class="circle bounce2"></div>    

<p>bounce 2</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle shake"></div>    

<p>shake</p>    

</div>    

<div class="cell">    

<div class="circle flip"></div>    

<p>flip</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle swing"></div>    

<p>swing</p>    

</div>    

<div class="cell">    

<div class="circle wobble"></div>    

<p>wobble</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle fade-in-down"></div>    

<p>fade in down</p>    

</div>    

<div class="cell">    

<div class="circle fade-in-left"></div>    

<p>fade in left</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle fade-out-down"></div>    

<p>fade out down</p>    

</div>    

<div class="cell">    

<div class="circle fade-out-right"></div>    

<p>fade out right</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle bounce-in"></div>    

<p>bounce in</p>    

</div>    

<div class="cell">    

<div class="circle bounce-in-right"></div>    

<p>bounce in right</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle bounce-out"></div>    

<p>bounce out</p>    

</div>    

<div class="cell">    

<div class="circle bounce-out-down"></div>    

<p>bounce out down</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle rotate-in-down-left"></div>    

<p>rotate in down left</p>    

</div>    

<div class="cell">    

<div class="circle rotate-in-up-left"></div>    

<p>rotate in up left</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle roll-in"></div>    

<p>roll in</p>    

</div>    

<div class="cell">    

<div class="circle roll-out"></div>    

<p>roll out</p>    

</div>    

</div>    

<div class="row">    

<div class="cell">    

<div class="circle hinge"></div>    

<p>hinge</p>    

</div>    

</div>    

</body>    

</html>本回答被网友采纳

求css3 等分扇形代码,要几等分可以通过一个“n”来设置

是要画图表吗,推荐echarts,挺好用的本回答被提问者采纳

有人会不会用js 或 html 5 写一个圆环 24等分可以点击的 就像这样的

<html>

<head>

<title></title>

<style type="text/css">

.content{display: none;}

</style>

</head>

<body>

<span>设为终点</span><span>设为起点</span><span>搜索附近</span>

<div class="content">1</div>

<div class="content">2</div>

<div class="content">3</div>

<script>

var _span=document.getElementsByTagName("span");

var _div=document.getElementsByTagName("div");

for (var i = 0,len=_span.length; i <len; i++) {

_span[i].index=_div[i].index=i;

_span[i].onclick=function(){

var ind=this.index;

if (_div[ind].className=="content") {

for(var j=0;j<len;j++){

_div[j].className="content";

}

_div[ind].className="";

}else{

_div[ind].className="content";

}

}

};

</script>

</body>

</html>本回答被网友采纳

  • 本文相关:
  • 使用css实现圆形波浪效果图
  • 利用css3 动画 绘画 圆形动态时钟
  • css3 实现圆形旋转倒计时
  • css制作三分圆形效果
  • css3 画基本图形,圆形、椭圆形、三角形等
  • css3制作圆角图片和椭圆形图片
  • css制作箭头图标代码(圆,三角形,椭圆)
  • css圆形图片处理示例(方形图片变圆形图片)
  • 用css如何实现一个圆等分12份的样子
  • 用css能实现一个圆等分12份的样子吗
  • css画圆,如何用纯css实现一个动态画圆环效
  • 求css3 等分扇形代码,要几等分可以通过一个“n”来设置
  • 有人会不会用js 或 html 5 写一个圆环 24等分可以...
  • 一个大圆圈里面有个数字如图 怎么用HTML + CSS实现呢?
  • 如何利用CSS3实现圆形进度条
  • 用css能实现一个圆等分12份的样子吗
  • 如何在css中实现li元素在父元素中平均分布效果
  • 请用html或css画出两个三个圆圈以及圆中连线
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved