美文网首页我爱编程
IFE2018 CSS-Animation 笔记1

IFE2018 CSS-Animation 笔记1

作者: Criya | 来源:发表于2018-05-22 19:36 被阅读0次

No1任务地址

知识点

  • transtion
  • 伪类

核心

这个动效的难点是,需要点击后下划线从中间开始延伸
一开始咋一看可能想不到,但是我们只需要将动画分解一下。

  • 从中间开始
  • 向右
  • 向左

从中间开始和向右(向左)可以合成一步。

text::after{
  left: 50%;   /*从中点开始*/
  width: 0;    /*初始状态*/
  transition: all 0.3s;
}
text.active::after{
  width: 100% ;   /*开始动画*/
}

这样就完成了单向向右移动,这时只需要再让它同时向左移动就完成了。

left: 0;

相关文章

网友评论

    本文标题:IFE2018 CSS-Animation 笔记1

    本文链接:https://www.haomeiwen.com/subject/pxykjftx.html