canvas三角图形生成器制作

canvas三角图形生成器

CSS部分：

body {

font-family: "Vidaloka", serif;

font-smoothing: antialiased;

font-weight: normal;

background: #151618;

color: #FFF;

margin: 0;

}

h1 {

text-transform: uppercase;

letter-spacing: 4px;

font-weight: normal;

font-size: 16px;

}

p {

line-height: 1.6em;

text-align: center;

font-size: 14px;

}

p + p {

margin-top: 1.0em;

}

a {

transition: color 0.2s ease-out;

text-decoration: none;

color: #FBB;

}

a:hover {

color: #444;

}

.overlay {

pointer-events: none;

position: absolute;

height: 100%;

width: 100%;

left: 0;

top: 0;

}

.container {

position: absolute;

height: 100%;

width: 100%;

}

.controls {

font-smoothing: subpixel-antialiased;

position: absolute;

right: 20px;

top: 0;

}

.links {

position: absolute;

list-style: none;

width: 120px;

bottom: 40px;

right: 20px;

padding: 0;

margin: 0;

}

.links p{

font-smoothing: subpixel-antialiased;

font-family: 'Dosis', sans-serif;

text-transform: uppercase;

text-align: center;

padding: 0.25em 0;

letter-spacing: 2px;

font-weight: 200;

font-size: 10px;

display: block;

width: 100%;

opacity: 0.6;

color: #FFF;

}

.links li {

border-bottom: #222 1px solid;

border-bottom: rgba(255,255,255,0.1) 1px solid;

}

.links li a {

transition: opacity 0.2s ease-out;

font-smoothing: subpixel-antialiased;

font-family: 'Dosis', sans-serif;

text-transform: uppercase;

text-align: right;

padding: 0.25em 0;

letter-spacing: 2px;

font-weight: 200;

font-size: 12px;

display: block;

width: 100%;

opacity: 0.4;

color: #FFF;

}

.links li a:hover {

opacity: 0.8;

}

.links li .who:before {

opacity: 0.5;

content: '@';

float: left;

}

.links li .source:before {

opacity: 0.5;

content: '{ } ';

float: left;

}

.links li .blog:before {

opacity: 0.5;

content: '& ';

float: left;

}

.hide {

opacity: 0;

}

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！