看完歪果仁写的CSS,就觉得自己啥也不是

CSS 2023-05-29 阅读:4613

因为喜欢骑行,就闲着没事看看国外车队的官网,
因为喜欢写CSS,能看到歪果仁网站总会学习一下,
这一看一学不要紧,发现了好多新鲜的东西,
看完他们写的CSS,就觉得自己还差太多,
有些东西基础手册都没有,还需要百度去搜索相关的单词,
看完理论一头雾水😒,

看看这效果,太炫酷了,就尝试着偷出来了,越看越懵啊,已经超出我知道的理论了😢
这种效果,在国内可能不太适用吧,十年能有一个甲方愿意用就不错了,要不给我自己的改了?😁
之前看老外专业的CSS站,发现:hover的两次或多次动画就觉得很神奇了,
再看张鑫旭大神对于linear-gradient画图形,再举一反三自己用的很爽,
觉得已经够用了!哎,差得远呐!😒
理论我整不明白,但扒出来拿来用就行了吧,其实我觉得慢慢分析这个动画效果,用linear-gradient、animate、background-clip,mask等等,CSS最基础的方式也能写出来吧

.menu{
display:flex;
align-items:center;
justify-content:center;
}
a{text-decoration:none;}
a.nav-link {
display:inline-block;
margin:20px auto 0;
padding: .25rem 0;
color: #000;
font-size: 2rem;
letter-spacing: 1px;
line-height: 1;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
a.nav-link {
cursor: pointer;
position: relative
}
a.nav-link::before,
a.nav-link::after {
position: relative;
width: 100%;
height: 1px;
top: 100%;
left: 0;
pointer-events: none;
background: currentColor
}
a.nav-link::before,
a.nav-link::after {
position: absolute;
width: 100%;
height: 1px;
top: 100%;
left: 0;
pointer-events: none;
background: currentColor
}
a.nav-link:hover::before,
a.nav-link:hover span{
opacity: 1;
-webkit-animation: glitchLine .4s steps(2, start) forwards;
animation: glitchLine .4s steps(2, start) forwards
}

@-webkit-keyframes glitchLine {
0% {
transform: scale3d(1, 1, 1)
}

10% {
transform: translate3d(10px, 0, 0)
}

20% {
transform: translate3d(0, 4px, 0)
}

30% {
transform: scale3d(.1, 1.4, 1) translate3d(0, -25px, 0);
transform-origin: 100% 0%
}

40% {
transform: scale3d(1, .3, 1) translate3d(0, 25px, 0)
}

50% {
transform: scale3d(.5, .3, 1) translate3d(-100px, -80px, 0)
}

60% {
transform: scale3d(1, 1.25, 1) translate3d(10px, -5px, 0)
}

70% {
transform: scale3d(.5, .5, 1) translate3d(0, 20px, 0)
}

80% {
transform: translate3d(-30, 10px, 0) scale3d(1, .4, 1);
transform-origin: 100% 0%
}

90% {
transform: scale3d(1, .5, 1) translate3d(0, -15px, 0);
transform-origin: 0% 50%
}

100% {
opacity: 1
}
}
a.nav-link:hover span {
-webkit-animation: glitchText .4s linear;
animation: glitchText .4s linear
}

@-webkit-keyframes glitchText {
0% {
opacity: 1;
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%)
}

10% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%)
}

20% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%)
}

35% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%)
}

50% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%)
}

60% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%)
}

70% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%)
}

80% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%)
}

90% {
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1)
}

100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
}

@keyframes glitchText {
0% {
opacity: 1;
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%)
}

10% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%)
}

20% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%)
}

35% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%)
}

50% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%)
}

60% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%)
}

70% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%)
}

80% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%)
}

90% {
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1)
}

100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
}
}
a.nav-link::before {
content: '';
height: 2px;
opacity: 0
}

扒是扒出来了,就是很多不理解的知识,如果你喜欢,直接拿去用吧,管他怎么回事的😊
点击预览Demo

  1. Voleman - 02-19

    几年不见变化挺大,这个主题弄的不赖

  2. sUN - 2023-06-03

    你这主题改的不错啊,右侧的 标签和连接 咋弄的?我也想把连接放侧栏。

    1. 阿博茨德•厄佛格 (作者)  @sUN - 2023-06-03

      需要哪一块的样式可以加QQ 群:539165194聊,需要改的样式我单独拆出来分享。

4614