Rumah > hujung hadapan web > html tutorial > css3箭头效果_html/css_WEB-ITnose

css3箭头效果_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:53:20
asal
1599 orang telah melayarinya

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>
    Salin selepas log masuk

    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%;
    Salin selepas log masuk

    上面代码是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;}
    Salin selepas log masuk

    Label berkaitan:
    sumber:php.cn
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Tutorial Popular
    Lagi>
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan