css3箭頭效果

css3 record1

---

嘗試用css寫了個箭頭效果
思路就是通過span和span子元素i分別通過設置他們的偽元素構造兩個箭頭,但是i構造的箭頭兩條線height都是0,hover的時候漸近的動畫效果就是i箭頭的高度變化而來的,還有rotate相同的角度

css3知識：

• transition
• transform
• 偽元素::before ::after

jsfiddle demo

---

transition

Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

transtion-property拿張鑫旭老師博客列出的參考下CSS3 transition-property使用參考指南
(transform也可當作transtion-property)

transform

開始有個箭頭旋轉的時候設置transform-origin理解有點繞(就是突然覺得自己不會幾何旋轉了...2333)
后來畫了下坐標清晰了，基點(0,0,0)就是原點,默認值是（50%, 50%, 0）,就是平面的中點.

	-webkit-transform-origin: 50% 70%;
	transform-origin: 50% 70%;

上面代碼是x軸50%偏移，向右偏移50%,Y軸70%偏移,向下偏移70%.

偽元素

需要注意的是
content即使為''也必須有這個屬性
偽元素是作為附屬元素的子元素存在,比如下面代碼它們都是i的子元素

.block-arrow .prev i::before, 
.block-arrow .prev i::after{
	outline: 1px solid transparent;
	z-index: 0;
	position: absolute;
	left: 50%;
	top:50%;
	width: 3px;
	height: 50%;
	content: '';
	background: #0099cc;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}