百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

CSS3动画的编写及伪元素的使用

作者林梓标课程有趣的鼠标悬浮模糊效果2857次浏览282017-02-28 10:52

概述

这是IFE2017的任务,也是我选择的第一个任务,练练手。
主要实现的是CSS3动画的编写,伪元素的使用,背景图片模糊以及文字流光效果,知识点大概就是这三个。

先看一下实现的效果:

边框从两边散开

这个主要是使用了伪元素::before::after来实现,在父容器上加上伪元素,里面填写的CSS分别的上下,左右的边框,并定位到相应的位置。
在这里父容器使用相对定位,伪元素使用绝对定位,先做好位置。

那么怎么实现边框从两边散开?
hover的时候,分别吧对应的lefttop值变为0,之前设置了相对父容器的50%。

说了这么多,看代码吧

.wrap .caption .container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 0;
  border: 3px solid ghostwhite;
  border-width: 0 3px;
  overflow: hidden;
  visibility: hidden;
  transition: all .8s;
  box-sizing: border-box;
}

.wrap .caption .container::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 100%;
  border: 3px solid ghostwhite;
  border-width: 3px 0;
  overflow: hidden;
  visibility: hidden;
  transition: all .8s;
  box-sizing: border-box;
}

.wrap:hover .container {
  opacity: 1
}

.wrap:hover .container::before {
  height: 100%;
  visibility: visible;
  top: 0;
}

.wrap:hover .container::after {
  width: 100%;
  visibility: visible;
  left: 0;
}

文字流光效果

这个在之前并不知道怎么实现,Google了一下,看了张鑫旭大神的博客,也能理解了。
主要是用背景的属性来实现。
用到的CSS属性

background-image -webkit-text-fill-color -webkit-background-clip -webkit-background-size

代码:

.wrap .caption .container .ribbon {
    /*渐变背景,此处为能无缝拼接的渐变 即0~100%*/
  background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%, #ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
  color: transparent;
  /*文字填充色为透明*/
  -webkit-text-fill-color: transparent;
  /*背景剪裁为文字,相当于用背景填充文字 CSS3新属性*/
  -webkit-background-clip: text;
   /*背景图片向水平方向扩大一倍,这样background-position才有移动与变化的空间*/
  -webkit-background-size: 200% 100%;
  background-size: 200% 100%;
  /* 动画 */
  -webkit-animation: masked-animation 4s infinite linear;
}


@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@-webkit-keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

总结

多写多总结,多查API。

参考文章

小tip: CSS3与文字渐变光影流动动画效果实现
MDN CSS3

0条评论