正文
《css3揭秘》的效果code
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
1.在阅读css3揭秘的基础上，跟着书中的效果组合起来的这组代码。
2.代码中有四张图片分别是 1.jpg 2.jpg 3.jpg 4.jpg; 作为demo，图片名称没有语义。
3.兼容性： IE上有部分并不兼容，Edge，FF，chrome没有问题。
4.下面是一个选择器的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$$工具函数</title>
</head>
<body>
<div class="box"> </div>
<div class="box"> </div>
<script>
function $$(selector,context){
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
console.log($$(".box"));
</script>
</body>
</html>
5.效果如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
/*width:200px;*/
/*height:100px;*/
}
.box{
/*background:linear-gradient(90deg,yellow,red);*/
/*线性渐变*/
background: linear-gradient(45deg,yellow 25%,red 0,red 50%,yellow 0,yellow 75%,red 0);
/*background-size:30px 30px;*/
}
/*在浏览器支持这个css特性的时候应用的样式,类似媒体查询*/
@supports (background: red){
.supports{
background: red;
}
}
/*currenColor*/
.reduceCode{
width:60vw;
height: 60vh;
color: red;
text-align: center;
}
.reduceCode hr{
height:.5rem;
background: currentColor;
} /*背景*/
.box1{
width:300px;
height:300px;
border:10px solid hsla(0,0%,100%,.5);
background: red;
background-clip:padding-box;
}
.borderimg{
width:100px;
height:100px;
background: yellow; border-image:url("1.jpg");
}
.backgroudpos{
width:750px;
height: 423px;
background: url("1.jpg") no-repeat;
border:1px solid red;
/*这个是background-position扩展语法,可以指定位置距离哪个边多少距离*/
background-position: right 20px bottom 30px;
}
.calc{
width:750px;
height: 423px;
background: url("1.jpg") no-repeat;
border:1px solid red;
/*与上边的作用相同，用calc()属性,计算百分比和像素的关系*/
background-position: calc(100% - 20px) calc(100% - 30px);
/*background-position: 100% 100%;*/
} .f{
width:300px;
height:200px;
border:1px solid red;
}
.f .s{
width:calc(50% - 10px);
height:calc(50% + 10px);
border:1px solid blue;
} /*内圆角*/
.radius{
width:300px;
height:300px;
/*border:1px solid red;*/
/*正文,效果自行观看，原因在于描边并不会跟着元素的圆角走，但bo-shadow却会跟着圆角走。*/
background: tan;
border-radius:.8em;
padding:1em;
box-shadow: 0 0 0 .6em #665;
outline:.6em solid #665;
} /*条纹背景*/
.gradient{
width:600px;
height:300px;
/*这种repeating的方法不用设置background-size*/
/*background: repeating-linear-gradient(60deg,red 0,red 15px,blue 0 ,blue 30px);*/
/*同色系条纹 还可以用透明色*/
background:repeating-linear-gradient(60deg,lightblue 0,lightblue 15px,transparent 0,transparent 30px)
} /*网格*/
.wangge{
width: 600px;
height:400px; background: white;
background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(rgba(200,0,0,.5) 50%,transparent 0);
background-size:30px 30px;
}
.wangge2{
width: 600px;
height:400px;
/*用像素单位去画网格线*/
background: #58a;
background-image: linear-gradient(90deg,white 1px ,transparent 0),linear-gradient(white 1px ,transparent 0);
background-size:30px 30px;
}
.wangge3{
width: 600px;
height:400px;
/*蓝图网格*/
background: #58a;
background-image:linear-gradient(90deg,white 2px ,transparent 0),linear-gradient(white 2px ,transparent 0),
linear-gradient(90deg,white 1px ,transparent 0),linear-gradient(white 1px ,transparent 0);
background-size: 75px 75px,75px 75px,15px 15px,15px 15px;
} /*径向渐变和波点*/
.bodian{
width:600px;
height:400px;
background: #665;
background-image: radial-gradient(tan 30%,transparent 0);
background-size: 30px 30px;
}
.bodian2{
width:600px;
height:400px;
background: #665;
background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0);
background-size:30px 30px;
background-position: 0 0,15px 15px;
} /*棋盘*/
.sanjiaowen{
width:600px;
height:400px;
background: #eee;
background-image: linear-gradient(45deg,#bbb 50%,transparent 0);
background-size: 30px 30px;
}
.qipan1{
width:600px;
height:400px;
background: #eee;
background-image: linear-gradient(45deg,#bbb 25%,transparent 0);
background-size: 30px 30px;
}
.qipan2{
width:600px;
height:400px;
background: #eee;
background-image: linear-gradient(45deg,transparent 75%,#bbb 0);
background-size: 30px 30px;
}
.qipan3{
width:600px;
height:400px;
background: #eee;
background-image: linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
.qipan4{
width:600px;
height:400px;
background: #eee;
background-image: linear-gradient(45deg,transparent 75%,#bbb 0),
linear-gradient(45deg,#bbb 25%,transparent 0),
linear-gradient(45deg,transparent 75%,#bbb 0),
linear-gradient(45deg,#bbb 25%,transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px,15px 15px,30px 30px;
}
.qipan5{
width:600px;
height:400px;
background: #eee;
background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
} /*角向渐变*/
.jiaoxiangjianbian{
width:400px;
height:400px;
border:1px solid red;
background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);
}
/*伪随机背景*/
.suijibeijing1{
width:600px;
height:400px;
border:1px solid red;
background:linear-gradient(90deg,#fb3 15%,#655 0,#655 40%,#ab4 0,#ab4 65%,hsl(20,40%,90%) 0);
background-size: 80px 100%;
}
.suijibeijing2{
width:600px;
height:400px;
background:hsl(20,40%,90%);
border:1px solid red;
background-image:linear-gradient(90deg,#fb3 10px,transparent 0),
linear-gradient(90deg,#ab4 20px,transparent 0),
linear-gradient(90deg,#655 20px,transparent 0);
/*这里跟上一个的设置不同之处在于，在上边的基础上，把两个同颜色框之间距离最大的那个颜色（通常也是最窄的那个）做成背景颜色，其他渐变
但还是看不到伪随机的效果，要达到随机效果，就要让尺寸取最大的最小公倍数*/
background-size: 80px 100%,60px 100%,40px 100%;
}
.suijibeijing3{
width:600px;
height:400px;
background:hsl(20,40%,90%);
border:1px solid red;
background-image:linear-gradient(90deg,#fb3 11px,transparent 0),
linear-gradient(90deg,#ab4 23px,transparent 0),
linear-gradient(90deg,#655 41px,transparent 0);
background-size: 41px 100%,63px 100%,79px 100%;
}
/*连续的图像边框*/
.lianxubiankuang{
width:600px;
height:400px;
padding:1em;
border:1em solid transparent;
background: linear-gradient(white,white),url("4.jpg");
background-size: cover;
background-clip: padding-box,border-box;
background-origin: border-box; /* 简写方式：
padding:1em;
border:1em solid transparent;
background:linear-gradient(white,white) padding-box,url("4.jpg") border-box 0 / cover;
*/
} /*老式信封*/
.laoshixinfeng{
width:600px;
height:400px;
padding:1em;
border:1em solid transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,red 0,red 12.5%,transparent 0,transparent 25%,#58a 0,#58a 37.5%,transparent 0,transparent 50%) 0 / 5em 5em;
} /*蚂蚁行军*/
@keyframes ants{
to {
background-position: 100%;
}
}
.mayixingjun{
width:600px;
height:400px;
padding:1em;
border:1px solid transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,black 0,black 25%,white 0,white 50%) 0 / 0.6em .6em;
animation:ants 12s linear infinite;
} /*平行四边形*/
.parallelogram{
width:300px;
height: 200px;
transform:skewX(-45deg);
border:1px solid red;
background: yellowgreen;
}
.parallelogram2{
width:300px;
height: 200px;
position: relative;
}
.parallelogram2::before{
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
background: red;
border:1px solid blue;
z-index:-1;
content: '';
transform: skewX(-45deg);
} /*菱形图片*/
.diamond{
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
transition: 1s clip-path;
}
.diamond:hover{
clip-path: polygon(0 0,0 100%,100% 100%, 100% 0);
} /*切角*/
.qiejiao{
width:600px;
height:400px;
background: #58a;
background: linear-gradient(135deg,transparent 15px,#58a 0) top left,
linear-gradient(-135deg,transparent 15px,#58a 0) top right,
linear-gradient(45deg,transparent 15px,#58a 0) bottom left,
linear-gradient(-45deg,transparent 15px,#58a 0) bottom right;
background-size: 50% 50%;
background-repeat:no-repeat;
}
/*内凹圆角*/
.qiejiao2{
width:200px;
height: 100px;
background: #58a;
background: radial-gradient(circle at top left,transparent 15px ,#58a 0) top left,
radial-gradient(circle at top right,transparent 15px ,#58a 0) top right,
radial-gradient(circle at bottom left,transparent 15px ,#58a 0) bottom left, radial-gradient(circle at bottom right,transparent 15px ,#58a 0) bottom right;
background-size: 50% 50%;
background-repeat:no-repeat;
}
/*小三角形*/
.xiaosanjiao{
width:10px;
height:60px;
border:1px solid red;
background: linear-gradient(-45deg,red 0,red 50%,transparent 0,transparent 100%);
}
/*梯形标签页*/
.tixing{
width:100px;
height:20px;
position: relative;
}
.tixing::before{
content: '';
position: absolute;
top:0;
bottom:0;
right:0;
left:0;
z-index:-1;
/*以底线为基准旋转*/
transform-origin:bottom;
transform:scaleY(1.3) perspective(.5em) rotateX(5deg);
background: mediumvioletred;
}
/*饼图*/
.pie{
width:400px;
height:400px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right,transparent 50%,#655 0);
}
/*下面的伪元素旋转可实现0%-50%之间的饼图，要50%-100%之间的饼图需要改变伪元素的颜色，反向旋转*/
.pie::before{
content: '';
display: block;
margin-left: 50%;
height:100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
border:1px solid red;
transform:rotate(.1turn)
}
/*0.5-1之间的静态饼图*/
.pie2{
width:400px;
height:400px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right,transparent 50%,#655 0);
} .pie2::before{
content: '';
display: block;
margin-left: 50%;
height:100%;
border-radius: 0 100% 100% 0 / 50%;
background-color:#655;
transform-origin: left;
border:1px solid red;
transform:rotate(.1turn)
}
/*可以访问的的饼图*/
.pie3{
position: relative;
width:400px;
height:400px;
line-height: 400px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right,transparent 50%,#655 0);
color: transparent;
text-align: center;
}
@keyframes spin{
to {
transform: rotate(.5turn);
}
}
@keyframes bg {
50% {
background: #655;
}
} .pie3::before{
content: '';
position: absolute;
top:0;
left:50%;
width:50%;
height:100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation:spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
border:1px solid red;
} /*svg画饼图*/
.svg circle{
fill:yellowgreen;
stroke:#655;
stroke-width: 32;
stroke-dasharray: 20 10;
/*得到比例为38%的扇区*/
} .svg2{
width:100px;
height:100px;
transform: rotate(-90deg);
border-radius: 50%;
}
.svg2 circle{
fill:yellowgreen;
stroke:#655;
stroke-width: 32;
stroke-dasharray: 38 100;
} /*单边阴影*/
.shadow{
width:600px;
height:300px;
border:1px solid blue;
/*第四个参数是扩张半径，扩大或缩小投影的尺寸*/
box-shadow: -5px 0px 4px -2px black ;
}
/*邻边阴影*/
.shadow2{
width:600px;
height:300px;
border:1px solid blue;
box-shadow: 5px 5px 4px -2px black ;
}
/*对边阴影*/
.shadow3{
width:600px;
height:300px;
border:1px solid blue;
box-shadow: 5px 0px 4px -2px black,-5px 0px 4px -2px black;
} /*滤镜染色*/
.filter{
width:600px;
height:400px;
}
.filter img{
filter:sepia(1);
/*filter:saturate(4);*/
/*filter:hue-rotate(295deg);*/
}
.filter img:hover{
filter:none;
} /*混合模式染色*/
.mixmodel{
background: blue;
width:600px;
height:400px;
}
.mixmodel img{
mix-blend-mode: luminosity;
}
.mixmodel:hover{
background: transparent;
/* 还有一种方法不需要img标签，用背景颜色和背景图片 进行 backgrund-blend-mode:luminosity;进行混合*/
} /*毛玻璃效果*/
/*http://play.csssecrets.io/frosted-glass 这里可以看到明显效果*/
.maoboli{
width:600px;
height:400px; }
.maoboli > p{
width:300px;
height:100px; margin:20% auto ;
position: relative;
background: hsla(0,0%,100%,.3);
/*overflow: hidden;*/
}
.maoboli p::before{
content: '';
position: absolute;
top:0;left:0;
bottom:0;
right:0;
/*background: rgba(255,0,0,0.5);*/
border:1px solid blue;
z-index:-1;
filter:blur(20px);
margin:-30px;
}
.maoboli,.maoboli >p::before{
background: url("./3.jpg") 0 / cover fixed;
} /*折角效果*/
.zhejiao{
width:500px;
height:300px;
background: #58a;
background:linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
linear-gradient(-135deg,transparent 1.5em,#58a 0);
} /* 文本换行 */
.huanhang{
width:400px;
height:200px;
border:1px solid red;
}
.huanhang dd,.huanhang dt{
display: inline;
border:1px solid blue;
}
dd{
font-weight: bolder;
}
.huanhang dd + dt::before{
content: '\A';
white-space: pre;
}
.huanhang dd + dd::before{
content: ', ';
font-weight: normal;
} /* 文本行斑马条纹*/
.banmatiaowen{
width:200px;
height:auto;
line-height: 1.5;
border:1px solid green;
padding:.5em;
background: beige;
background: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0);
background-size: auto 3em;
background-origin: content-box;
} /*发光文字*/
.faguangwenzi{
font-size: 50px;
font-weight: bolder;
color: #ffc;
text-shadow:0 0 .1em,0 0 .3em;
background: #000000;
/*还可以加模糊滤镜 blur(3px)实现*/
} /*svg空心字*/
h1{
font:500%/1 Rockwell ,serif;
background: deeppink;
color: white;
}
h1 text{
fill:currentColor;
}
h1 svg{
overflow: visible;
}
h1 use{
stroke: black;
stroke-width: 6;
stroke-linejoin: round;
} /*环形文字*/
.circular path{
fill:none;
}
.circular{
width:10em;height:10em;
margin:3em auto 0;
}
.circular svg{
display: block;
overflow: visible;
} /*扩大可点击区域*/
/*一种方法是利用透明border，但是会让按钮变大，这时候设置 background-clip:padding-box;，如果按钮要加边框就要用内嵌阴影了 box-shadow：inner*/
/*还有一种是利用伪元素：透明，用定位拉伸，扩大点击区域*/
/*边框扩大可点击区域*/
.borderkuoda{
width:50px;
height:50px;
background: red;
/*边框扩大点击区域*/
border:10px solid transparent;
background-clip: padding-box;
}
.borderkuoda:active{
background: greenyellow;
background-clip: padding-box;
/*鼠标光标设置为cursor：not-allowed，提示用户不能选中。*/
cursor: not-allowed;
} /*伪元素扩大可点击区域*/
.kuodadianji{
width:50px;
height:50px;
background: red;
position: relative;
}
.kuodadianji:active{
background: blue;
}
.kuodadianji::after{
content: '';
position: absolute;
top:-10px;
left:-10px;
right:-10px;
bottom:-10px;
border:1px solid blue;
} /*自定义复选框*/
/*默认样式*/
.definefuxuankuang input[type="checkbox"] + label::before{
content: '\a0'; /* 这个表示不换行空格 */
display:inline-block;
vertical-align: .2em;
width:.8em;
height:.8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}
/*勾选样式*/
/*通过 focus和disabled 也可以设置 聚焦和禁用状态的样式*/
.definefuxuankuang input[type="checkbox"]:checked + label::before{
content: '\2713'; /*对勾*/
background: yellowgreen;
}
/*隐藏掉原来的复选框*/ .definefuxuankuang input[type="checkbox"]{
position: absolute;
clip:rect(0,0,0,0);
} /*开关式按钮*/
.kaiguan input{
position: absolute;
clip:rect(0,0,0,0);
}
.kaiguan label{
display: inline-block;
padding:.3em .5em;
background: #ccc;
background-image: linear-gradient(#ddd,#bbb);
border:1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px white;
}
.kaiguan input:checked + label,.kaiguan input:active + label{
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
} /*内容决定宽度*/
figure{
max-width: 300px;
max-width:min-content;
margin:auto;
}
figure > img {
max-width: inherit; /* 这条不会生效*/
}
</style>
</head>
<body>
<div class="box"></div>
<div class="supports"></div> <div class="reduceCode">YESmdksmdk!
<hr></div>
<div class="box1"></div>
<div class="borderimg">hahah</div>
<div class="backgroudpos"></div> <div class="calc"></div> <div class="f">
<div class="s">calc属性计算百分比和像素值</div>
</div> <!--4，圆角-->
<div class="radius">内圆角</div> <!--条纹背景-->
<div class="gradient">条纹背景</div> <!--线性渐变与网格-->
<div class="wangge">网格色块</div>
<div class="wangge2">网格线</div>
<div class="wangge3">蓝图网格</div> <!--径向渐变和波点-->
<div class="bodian">波点</div>
<div class="bodian2">可以作为背景的斜波点</div> <div class="sanjiaowen">三角纹</div>
<div class="qipan1">棋盘1</div>
<div class="qipan2">棋盘2</div>
<div class="qipan3">棋盘3</div>
<div class="qipan4">棋盘4</div>
<div class="qipan5">棋盘5</div> <!--角向渐变-->
<div class="jiaoxiangjianbian">角向渐变(没有浏览器支持)</div>
<!--伪随机背景-->
<div class="suijibeijing1">伪随机背景1</div>
<div class="suijibeijing2">伪随机背景2</div>
<div class="suijibeijing3">伪随机背景3（最终的伪随机效果）</div> <!--连续图像边框-->
<div class="lianxubiankuang">连续的图像边框</div>
<!--老式信封边框-->
<div class="laoshixinfeng"></div> <!--蚂蚁行军边框-->
<div class="mayixingjun">蚂蚁行军边框</div> <!--平行四边形-->
<div class="parallelogram">平行四边形(文字也变倾斜了 )</div>
<div class="parallelogram2">平行四边形(文字不倾斜 )</div> <!--菱形-->
<img class="diamond" src="4.jpg"></img>
<!--切角效果-->
<div class="qiejiao">切角效果</div>
<div class="qiejiao2">切角效果2</div> <!-- 画个长条的三角形-->
<div class="xiaosanjiao">小三角</div> <!--梯形标签页-->
<div class="tixing">梯形标签页</div>
<!--饼图-->
<div class="pie">饼图0-0.5</div>
<div class="pie2">饼图0.5-1</div>
<div class="pie3">40%</div>
<!--svg 画饼图-->
<svg class="svg">
<circle r="30" cx="50" cy="50" />
</svg>
<svg class="svg2" viewBox="0 0 32 32">
<circle r="16" cx="16" cy="16" />
</svg> <!--js结合svg画饼-->
<div class="svg3">20%</div> <!--单边阴影-->
<div class="shadow">单边阴影</div> <!--邻边阴影-->
<div class="shadow2">邻边阴影</div>
<!--对边阴影-->
<div class="shadow3">对边阴影</div> <div>不规则图形的投影，可以使用滤镜 filter:drop-shadow(2px 2px 10px red);这个参数基本与box-shadow的参数相同。</div> <!--滤镜染色效果-->
<div class="filter"><img src="./2.jpg" alt=""></div> <!-- 混合模式染色-->
<div class="mixmodel"><img src="./2.jpg" alt=""></div> <!--毛玻璃效果-->
<div class="maoboli"> <p> 看文字看文字看文字看文字看文字看文字看文字看文字看文字看文字看文字
看文字看文字看文字看文字看文字</p>
</div> <!--折角效果-->
<div class="zhejiao"></div> <!-- 文本换行 -->
<div>
<ol class="huanhang">
<dt>Name</dt>
<dd>chance</dd>
<dt>email</dt>
<dd>123@126.com</dd>
<dd>456@126.com</dd>
<dt>address</dt>
<dd>china</dd>
</ol>
</div>
<!--文本行斑马条纹-->
<div class="banmatiaowen">
这是一行文本 <br>
这是一行文本 <br>
这是一行文本 <br>
这是一行文本 <br>
这是一行文本 <br>
这是一行文本 <br>
</div> <!--改变tab的宽度-->
<div>代码要写在pre 或code标签中，设置tab的宽度通过 tab-size:4; 设为0表示禁用，浏览器默认设置为8个。</div> <!--文字发光效果-->
<div class="faguangwenzi">glow</div>
<!--svg空心字-->
<h1>
<svg width="2em",height="1.2em">
<use xlink:href="#css" />
<text id="css" y="1em">css</text>
</svg>
</h1> <!--环形文字-->
<div class="circular">
<svg viewBox="0 0 100 100">
<path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle"/>
<text>
<textpath xlink:href="#circle">
circular reasoning works because
</textpath>
</text>
</svg>
</div> <!--边框扩大可点击区域-->
<div class="borderkuoda">
+
</div>
<!--伪元素扩大可点击区域-->
<div class="kuodadianji">-</div>
<br>
<!--自定义单选框，复选框-->
<div class="definefuxuankuang">
<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!!</label>
</div>
<!--开关按钮-->
<div class="kaiguan">
<input type="checkbox" id="kaiguan" />
<label for="kaiguan">开关按钮，一般慎用，容易跟普通按钮混淆</label>
</div> <!--内容决定宽度-->
<div class="contentwidth">
<p>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</p>
<figure>
<img src="./2.jpg" alt="">
<figcaption>
图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍 图片介绍
</figcaption>
</figure>
<p>最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行</p>
</div>
<script> var root = document.documentElement;
console.log(root);
if("backgroundColor" in root.style){
console.log("had")
}else{
console.log("not had")
} function $$(selector,context){
context = context || document;
var elements = context.querySelectorAll(selector);
return Array.prototype.slice.call(elements);
}
//把饼图的百分比文本 转换成 animation-delay
$$(".pie3").forEach(function(pie){
var p = parseFloat(pie.textContent);
pie.style.animationDelay = "-" + p + "s";
}) //js结合svg画饼
$$(".svg3").forEach(function(pie){
var p = parseFloat(pie.textContent);
var NS = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(NS,"svg");
var circle = document.createElementNS(NS,"circle");
var title = document.createElementNS(NS,"title");
circle.setAttribute("r",16);
circle.setAttribute("cx",16);
circle.setAttribute("cy",16);
circle.setAttribute("stroke","#655");
circle.setAttribute("stroke-width",32);
circle.setAttribute("stroke-dasharray",p+" 100");
svg.setAttribute("viewBox","0 0 32 32");
svg.style.borderRadius ="50%";
circle.style.fill = "yellowgreen";
title.textContent = pie.textContent;
pie.textContent = "";
svg.appendChild(title);
svg.appendChild(circle);
pie.appendChild(svg);
})
</script>
</body>
</html>
