感谢

云游君的小站

css中的var()和:root

mdn

Diff.Blog
感谢Diff.Blog收录。

动画结束不切换

css

1. :root里面可以设置公用颜色属性 --bg-color:#fff
   然后颜色用 var(--bg-color);

2. background-img设置渐进色,linear/radio gradient;

3. 鼠标悬浮显示特效

第一种：

文字左右两角悬浮

this is Effect 效果 ↓

Hello,World.click Here you can know it's workd.

<p class="text-hover">
   //text 
</p>

定义两个伪类元素，让其获得边框, 并绝对定位该元素于悬浮触发器元素，设置过渡属性0.3s,运动采用贝塞尔曲线,透明度为0，变形属性设置移动。

.text-hover{
    position:relative;
}
.text-hover:before,.text-hover:after{
    content:'',
    position:absolute;
    width:10px;height:10px;
    border-style:solid;
    transition: .3s;
    transition-timing-function: cubic-bezier(0.17,0.67,0.05,1.29);
    opacity:0;
}
.hover-text::before{
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
  transform: translate3d(10px,10px,0);
}
.hover-text::after{
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
  transform: translate3d(-10px,-10px,0);
}

设置悬浮样式，触发过度效果

.hover-text:hover::before,.hover-text:hover::after{
  opacity: 1;
  transform: translate3d(0,0,0);
}

第二种

今天我想学的东西好多好多，但自己确实只能专注一件事情比较好。

鼠标悬停下划线动画

this is Effect 效果 ↓

click here!

探索，最初，我直接实现了个下划线版，下边框版但有点差异。很好，牛角尖来了，(￣▽￣)”

接招吧云游君，第一招。

浏览器注入内联样式

p:hover{
    text-decoration:none !important;
    border:none !important;
}

竟然不是这个方法。(￢︿̫̿￢☆)

看招，查看脚本事件法。

竟然没有。

还有一招取消属性法。

看我点点，咦。相对定位取消后竟然没有了，让我看看。

点点点！一阵疯狂的输出，终于发现了是绝对定位的的伪类元素。

我怎么就没想呢？

不皮了，接下来就是教程时间：

首先需要定义于元素相对定位，

其次加入伪元素：before或者after 设置绝对定位，和宽度为0，以及过渡属性，时间自定义，云游君用的是.2 s 。

类型可以写width，或者 all 颜色的话自定义。

.hover-a-1:{
    position:relative;
}
.hover-a-1::before{
    content:'';
    position:absoulte;
    left:0;
    bottom:0;
    width:0;
    background-color:#000;
    transition:.8s;
}

这里我发生了一个小错误，就是忘记写width，导致最终效果没有变化。

然后就是设置悬浮属性

.hover-a-1  :hover::before{
    width:100%;
}

第三种

严格来讲，这属于我从云游君模仿学习，中自己写的一个动画。
This is animation,but it finsh its work. Now you should copy code ,to See its effect.

this is effect result ↓

• step1 add classNam and create an including before and after element
  tips:you need to know how to get before and after element like this.

  <div><hr class="about-hr"></div>

  • step2 add css
    The first, I don’t have any animation.
    The secord ,I add it.

  .about-hr{ position: relative; } .about-hr::before,.about-hr::after{ content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid rgba(255, 0, 0, .95); transform: rotate(45deg); } .about-hr::before{ top: -6px; /* left: -1.5px; */ left: 50%; border-top: none; border-right:none ; animation: about-hr-before-move-left 2s ease-in-out; /* 动画结束时不切换原来的样式 */ animation-fill-mode: forwards; } .about-hr::after{ bottom: -6px; /* right: -1.5px ; */ right: 50%; border-left: none; border-bottom:none ; animation: about-hr-before-move-right 2s ease-in-out; /* 动画结束时不切换原来的样式 */ animation-fill-mode: forwards; } @keyframes about-hr-before-move-left{ 100%{ left: -1.5px; } } @keyframes about-hr-before-move-right{ 100%{ right: -1.5px; } }