cssinspirationguide - csc inspiration guide online

chokcoco commented 4 years ago

https://chokcoco.github.io/CSS-Inspiration/#/

csc inspiration guide online

chokcoco commented 4 years ago

评论系统终于正常了？

sleipniry commented 4 years ago

厉害

heny commented 4 years ago

太强了，，

hec9527 commented 4 years ago

厉害了，CSS虽然很难，但是看到这些demo，感觉信心又回来了

chokcoco commented 3 years ago

欢迎小伙伴们加 QQ 群 418766876 一起讨论 CSS ~

chokcoco commented 3 years ago

2021-03-10 更新了一大波新的动画哈~

chokcoco commented 3 years ago

2021-08-11 更新了一大波新的动画哈~

leo-lai commented 3 years ago

css原来那么强大

flightmakers commented 3 years ago

Come!on ! 起飞!

dengkun1 commented 3 years ago

现在开始系统重学css加油

luolinlang commented 2 years ago

宽度改小100px就不知道怎么弄了啊 https://chokcoco.github.io/CSS-Inspiration/#/./svg/svg-btn-hover

chokcoco commented 2 years ago

@luolinlang 宽度改小100px就不知道怎么弄了啊 https://chokcoco.github.io/CSS-Inspiration/#/./svg/svg-btn-hover

你可能需要这篇文章，边框的总长需要计算下 - SVG 线条动画入门【Web动画】SVG 实现复杂线条动画

luolinlang commented 2 years ago

@chokcoco

@luolinlang 宽度改小100px就不知道怎么弄了啊 https://chokcoco.github.io/CSS-Inspiration/#/./svg/svg-btn-hover

你可能需要这篇文章，边框的总长需要计算下 - SVG 线条动画入门【Web动画】SVG 实现复杂线条动画

好,谢谢

luolinlang commented 2 years ago

改小了! 得花时间多看看svg属性,文档,视频不能少

<div class="glowing-border">
  <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
    <rect class="outline" height="100%" width="100%" />
    <div class="text" onclick="needLogin()">加入收藏</div>
  </svg>
</div>

.glowing-border {
  text-align: center;
  display: block;
  position: relative;
  color: #000;
  text-decoration: none;
  width: 150px;
  height: 50px;
  margin: 10px auto;
  overflow: hidden;
}
.glowing-border .outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  stroke: #000;
  stroke-width: 2px;
  fill: transparent;
}
.glowing-border .text {
  position: relative;
  top: -36px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.glowing-border:hover .outline {
  stroke: deeppink;
}
.glowing-border:hover .text {
  color: deeppink;
}
@keyframes woop {
  0% {
    stroke-dasharray: 50 600;
    stroke-dashoffset: -550;
  }
  40%, 50% {
    stroke-dasharray: 50 600;
    stroke-dashoffset: -250;
  }
  100% {
    stroke-dasharray: 600 0;
    stroke-dashoffset: 25;
  }
}

.glowing-border .outline {
  stroke-dasharray: 50 400;
  stroke-dashoffset: 200;
  transition: .5s;
}
.glowing-border:hover .outline {
    stroke-dasharray: 50 150;
    stroke-dashoffset: 550;
}

zhangpei1996 commented 2 years ago

牛批，感觉打开了新世界的大门

BlindMonkLeeSin commented 1 year ago

真滴好强啊

chokcoco / CSS-Inspiration

cssinspirationguide - csc inspiration guide online #132