《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 ...
随机推荐
- Mybatis中的update动态SQL语句
Mybatis中的CRUD操作(增删改查)中,简单的SQL操作比较直观,如查找操作: <select id="findBySrcId" resultMap="ent ...
- （并查集） Wireless Network --POJ --2236
链接: http://poj.org/problem?id=2236 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82830#probl ...
- hdu 5012 模拟+bfs
http://acm.hdu.edu.cn/showproblem.php?pid=5012 模拟出骰子四种反转方式,bfs,最多不会走超过6步 #include <cstdio> #in ...
- C#内存释放(垃圾回收)
今天写了个很小的程序,程序的功能仅仅是截图,但是如果长时间开启并截图的时候,程序会变的很大,从刚开始的运行在任务管理器中只有十几K大小,运行一段时间后在任务管理器中看到程序可以达到1G或2G甚至更大: ...
- day111 爬虫第一天
一.模拟浏览器发请求. import requests r1 =requests.get( url ="https://dig.chouti.com/", headers ={ & ...
- 廖雪峰Python学习笔记——使用元类
元类(MetaClasses) 元类提供了一个改变Python类行为的有效方式. 元类的定义是“一个类的类”.任何实例是它自己的类都是元类. class demo(object): pass obj ...
- 201621123018《Java程序设计》第1周学习报告
1.<Java程序设计>第1周学习报告 1.本周学习报告 关键字:Java的发展.Java语言的特点.JDK.JRE.JVE.Java开发工具.Java环境配置.Java是一种面向对象的程 ...
- 2018-2019-2 网络对抗技术 20165219 Exp6 信息搜集与漏洞扫描
2018-2019-2 网络对抗技术 20165219 Exp6 信息搜集与漏洞扫描 实验内容 各种搜索技巧的应用 DNS IP注册信息的查询 基本的扫描技术:主机发现.端口扫描.OS及服务版本探测. ...
- jvm高级特性(6)(线程的种类，调度，状态，安全程度，实现安全的方法，同步种类，锁优化，锁种类）
JVM高级特性与实践(十三):线程实现 与 Java线程调度 JVM高级特性与实践(十四):线程安全 与 锁优化 一. 线程的实现 线程其实是比进程更轻量级的调度执行单位. 线程的引入,可以把一个检查 ...
- C的Define
#define Conn(x,y) x##y //表示x连接y #define ToChar(x) #@x //给x加上单引号 #define ToString(x) #x //给x加双引号 #d ...