有趣的鼠标悬浮效果

发表于 更新于 阅读次数：

1.文字的流光效果

关键代码：background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);
这句代码设置背景色的线性渐变
-webkit-background-clip: text;
以文字的形状裁剪背景色，这时候文字颜色还在背景色之上
-webkit-text-fill-color: transparent;
将文字颜色设置为透明
background-size: 200% 100%;
设置一下背景色的大小，之所以设置宽为原来的两倍，是与前面设好的蓝红蓝相对应

1
2
3
4
5
6
7
8
@keyframes streamer {
    0%  {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

animation: streamer 3s infinite linear;
最后让背景的位置移动就实现了流光效果，infinite（循环播放），linear（线性移动）

学习到的知识点
linear-gradient(起点，开始颜色，结束颜色);
可参考http://www.fx114.net/qa-264-77177.aspx

1
2
background-clip
background-clip: border-box|padding-box|content-box|text(要加-webkit)

border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
text 背景被裁剪到文字区域（此时文字颜色会盖住背景色）

animation
animation: name duration timing-function delay iteration-count direction;

animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 规定动画的速度曲线
animation-delay 规定在动画开始之前的延迟
animation-iteration-count 规定动画应该播放的次数
animation-direction 规定是否应该轮流反向播放动画

transition
transition: property duration timing-function delay;
默认值：all 0 easy 0
|transition-property | 规定设置过渡效果的 CSS 属性的名称|
| ——– | ——– |
|transition-duration | 规定完成过渡效果需要多少秒或毫秒|
|transition-delay | 定义过渡效果何时开始|

2.背景图片模糊化

主要是用到-webkit-filter： blur（）
-webkit-filter的方法十种：

  1. grayscale灰度
  2. sepia褐色
  3. saturate饱和度
  4. hue-rotate色相旋转
  5. invert反色
  6. opacity透明度
  7. brightness亮度
  8. contrast对比度
  9. blur模糊
  10. drop-shadow阴影
    参考：http://www.w3cplus.com/css3/ten-effects-with-css3-filter

3.按钮边框的从中间到两边扩展开

主要是用到css伪类before和after，配合transform-origin:center,通过在before伪类里设置border-left和border-right，另外加上这句关键代码transform: scale3d(1, 0, 1)，意思就是y轴伸缩为0倍，也就是消失，同理after上写border-top，border-bottom，transform: scale3d(0, 1, 1)，最后在hover伪类上写transform: scale3d(1, 1, 1) 和transform 0.75s ease-in-out 0.75s。