《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>
《css3揭秘》的效果code的更多相关文章
- 《CSS3揭秘》上（边框，投影，渐变，条纹效果，蚂蚁行军）
最近看了<CSS3揭秘>一书,里面真的是干货满满呀,现将常用到的一些技巧归纳总结,便于日后用到查找.不得不感叹学无止境哦~ 1.边框与背景 半透明边框 .demo{ background- ...
- Image Wall - jQuery & CSS3 图片墙效果
今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...
- css3的transition效果和transfor效果
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css3幻灯片换位效果
<title>css3幻灯片换位效果</title> <style type="text/css"> .flowGallery {width: ...
- 第八十节，CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释 CSS3 ...
- html+css3实现长方体效果
网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看. 2017-07-25 21:30:23 h ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
- 测试css3的动画效果在display:none的时候不耗费性能
也许你也有这个疑惑,动画一直在播放,那它不显示出来的时候也一直在播放的话,那是否一直占用资源呢? <!doctype html> <html> <head> < ...
- css3写下雨效果
css3写下雨效果<pre><div class="xiayuxiaoguo"></div></pre> <pre>.x ...
随机推荐
- 关于RabbitMQ一点
RabbitMQ是AMQP(高级消息队列协议)的标准实现,理论上可以保证消息发送的准确性 RabbitMQ是用Erlang语言编写的,而Erlang语言具有以下特点: 并发性--Erlang支持超大量 ...
- Paxos与zookeeper
1,什么是Paxos算法? Paxos算法是分布式计算领域中一个非常重要的算法,主要解决分布式系统如何就某个值(决议)达成一致的问题.一个典型的场景是分布式数据库的一致问题:如果分布式数据库的各个节点 ...
- node nodemailer
需求:通过nodejs发送邮件 一般都是用nodemailer这个模块.目前有0.7和1.0两个版本,网上的很多教程和代码,大都是按照0.7写的,自己做的时候需要注意看README.md 支持的ser ...
- 2014年誓言：干掉网页设计程序——Dreamweaver！
2014年誓言:干掉网页设计程序——Dreamweaver! 阅读: 评论: 作者:Rybby 日期: 来源:rybby.com 2014年,我写下誓言,用自己设计的在线网页设计工具“拉拉变” ...
- python的特性
python使用c语言开发 1.面向对象的特性 面向对象的程序设计抽象出对象的行为和属性,把行为和属性分离开,但是又合理的组织在一起.它消除了保护类型.抽象类.接口等面向对象的元素,使得面向对象的概念 ...
- windows eclipse IDE打开当前类所在文件路径
1. 展开如下菜单: Run ---- External Tools ---- External Tools Configurations 2. 在 program 下面新建一个工具 program- ...
- EBS获取附件URL
http://wenku.baidu.com/link?url=MnYX269RBqW9ZRh-4famwduhYq9As0-vsIyVPA7aqv64cdxxjZEOaEE1_KZ9SGjY9qCx ...
- Toad 实现 SQL 优化
It is very easy for us to implement sql tuning by toad. We need to do is just give complex sql stat ...
- 在TFS持续集成（持续发布）中执行Telnet任务
Telnet是一种在因特网或局域网上使用虚拟终端连接,提供双向交互式文本通信设备的协议. 它是最早的互联网通讯协议之一.自1969年启用以来,已经经过了将近50年时间,在开放式的操作系统中拥有广泛的用 ...
- 【实战TFS】【QQ群】了解别人是如何使用TFS的
长时间在这个QQ群里面混,了解到其他人是如何使用TFS系统的,也与网友们一起探讨,共同提高,还有分享的大量资料文档. 推荐一下:):)