Heim >Web-Frontend >HTML-Tutorial >css3箭头效果_html/css_WEB-ITnose

css3箭头效果_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:53:201609Durchsuche

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

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn