欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

 

  <title>canvas三角图形生成器</title>

<meta name="keywords" content=" canvas三角图形生成器" />

<meta name="description" content=" canvas三角图形生成器" />

      <link rel="stylesheet" href="css/style.css">

 

 

</head>

 

<body>

  <div id="container" class="container">

  <div id="output" class="container">

  </div>

 

 

</div>

<div id="controls" class="controls">

</div>

 

      <script src="js/index.js"></script>

 

</body>

</html>

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;

}

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html5/h15587.shtml