前端基础之摆弄图形

body {

  font-family: "Karla";

  background: #edeae5;

  width: 100%;

  height: 100%;

  position: relative;

  margin: 0px;

  text-align: center;

}



a {

  text-decoration: none;

  color: rgba(0, 0, 0, 0.5);

  font-style: italic;

  transition: 0.4s;

}



a:hover {

  color: rgba(0, 0, 0, 0.7);

}



div {

  transition: linear 0.2s;

}



#container {

  width: 480px;

  height: 480px;

  position: absolute;

  top: calc(50% - 240px);

  left: calc(50% - 240px);

}

.circle {

  width: 60px;

  height: 60px;

  background: white;

  display: inline-block;

  margin-right: 30px;

  border-radius: 50%;

}

.square {

  width: 60px;

  height: 60px;

  background: orange;

  display: inline-block;

  margin-right: 30px;

}

.row {

  margin-bottom: 30px;

}

.green {

  background: #78c272;

}

.fancy {

  border: 3px inset rgba(74, 74, 74, 0.25);

  width: 54px;

  height: 54px;

}

#third-row .circle{

  width: 60px;

  height: 60px;

  background:#de6868;

  display: inline-block;

  margin-right: 30px;

  border-radius: 50%;

}



div.circle.fancy{

  border-style: dotted;

  width: 54px;

  height: 54px;

}



.row>.circle:first-child{

  opacity: 0;

  width: 54px;

  height: 54px;

}



.green,.fancy{

  background: #6392c0;

  width: 54px;

  height: 54px;

}



.circle:hover{

  opacity: 0.5;

}



#second-row .circle:hover{

  transform: scale(1.25);

}