效果預覽

https://codepen.io/strugglingBoy/pen/BqKWBY

程式碼下載

https://github.com/enstrongbill/daily-frontend-exercise/tree/master/020-shrug

程式碼解讀

1.html程式碼:

定義一個.shrug容器

<div class="shrug">
        <span>¯\_</span>
        <span>(◑_◑)</span>
        <span>_/¯</
 
span>
 </div>

2.css程式碼

居中顯示

body{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
}

讓元素一排顯示,這裡用的是inline-block,這裡不用flex是因為他要3行程式碼。能少寫就少寫。而且用flex實現肩和臉之間感覺太近了。

.shrug{
	font-family: arial;
	font-size: 10vw;
}
.shrug span:nth-child(1), .shrug span:nth-child(3)
 
{
	display: inline-block;
	animation: shrughands 2s infinite;
}

聳肩動畫

@keyframes shrughands{
	0%{
	    transform: translateY(0);
	}
	10%{
	    transform: translateY(-10%);
	}
	20%, 100%{
	    transform: translateY(0)
	}
}