【100dayscss#88】燃烧的蜡烛

Day #88
Candle: Thanks to the magic of border-radius, this flame is animated by CSS only. It looks way better than I would have imagined.

<div class="frame">
  <div class="center">
		<div class="flame"></div>
		<div class="wick"></div>
		<div class="candle"></div>
		<div class="table"></div>
  </div>
</div>

// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

// use only the available space inside the 400x400 frame
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #2c3e50;
  color: #333;
	font-family: 'Open Sans', Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
@keyframes move {
	0% {
	  border-radius: 26px 80px 26px 26px/5px 80px 26px 26px;
		transform: scale(1.3,1)
	}
	25% {
		border-radius: 26px 96px 36px 36px/96px 5px 36px 36px;
		transform: scale(1,1.3)
	}
	75% {
		border-radius: 35px 35px 26px 26px/70px 100px 26px 26px;
		transform: scale(1.3,1)
	}
	100% {
		border-radius: 35px 35px 26px 26px/100px 70px 26px 26px;
		transform: scale(1,1.3)
	}
}
.flame {
	width: 16px;
	height: 26px;
	background: orange;
	margin: 0 auto;
	border-radius: 35px 35px 26px 26px/70px 70px 26px 26px;
	animation: move 3.5s infinite alternate;
}
.wick {
	width: 4px;
	height: 6px;
	background: brown;
	margin:0 auto;
} 
.candle {
	 width: 60px;
	 height: 100px;
	 background: #fff;
	 border-radius: 3px;
	 margin: 0 auto;
	 box-shadow: -10px 0 0 0  #e0e5ff inset;
}
.table {
	 width: 200px;
	 height: 8px;
	 background: #1b233e;
	 border-radius: 4px;
}

效果

燃烧的蜡烛

标签：border-radius、@keyframes

答案中，将动画拆分成3个，通过阴影显示照明效果

/*初始烛焰*/
border-radius: 8px 8px 8px 8px / 20px 20px 8px 8px;
@keyframes wind {
	0%, 22%, 49%, 62%, 81%, 100% {
		border-radius: 2px 14px 8px 8px / 20px 20px 8px 8px;
	}
	14%, 32%, 56%, 70%, 89% {
		border-radius: 14px 2px 8px 8px / 20px 20px 8px 8px;
	}
}

@keyframes size {
	0%, 22%, 49%, 62%, 81%, 100% {
		transform: scale(1,1);
	}
	14%, 32%, 56%, 70%, 89% {
		transform: scale(0.9, 1.2);
	}
}

@keyframes flickr {
	0%, 22%, 49%, 62%, 81%, 100% {
		box-shadow: 0 0 20px 0 rgba(255,202,0,0.7);
	}
	14%, 32%, 56%, 70%, 89% {
		box-shadow: 0 0 20px 0 rgba(255,202,0,.8);
	}
}