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