cssinspirationguide - csc inspiration guide online

[chokcoco]

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

csc inspiration guide online

[chokcoco]

评论系统终于正常了？

[sleipniry]

厉害

[heny]

太强了，，

[hec9527]

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

[chokcoco]

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

[chokcoco]

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

[chokcoco]

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

[leo-lai]

css原来那么强大

[flightmakers]

Come!on ! 起飞!

[dengkun1]

现在开始系统重学css加油

[luolinlang]

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

[chokcoco]

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

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

[luolinlang]

@chokcoco

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

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

好,谢谢

[luolinlang]

改小了! 得花时间多看看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]

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

[BlindMonkLeeSin]

真滴好强啊