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;
}