纯css连接点

下载代码

html

css

分享到微信朋友圈

html

•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•

css

:root {
  --speed: 800ms;
  --delay: 4s;
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
}

html, body {
  height: 100%;
}

body {
  display: grid;
  cursor: crosshair;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  margin: 0;
  padding: 0;
  place-items: center;
  width: 100%;
}

span {
  align-items: center;
  display: flex;
  font-size: calc(1rem + 4vmin);
  height: 100%;
  justify-content: center;
  position: relative;
  user-select: none;
  width: 100%;
  -webkit-text-stroke-width: 1vmin;
  -webkit-text-stroke-color: white;
}
span:before, span:after {
  --size: 2px;
  content: '';
  height: var(--size);
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  transform: scaleX(0);
  transition: transform var(--speed) var(--delay) var(--ease);
  width: 100%;
  z-index: -1;
}
span:after {
  height: 100%;
  width: var(--size);
  transform: scaleY(0);
}
span:nth-child(1n) {
  color: #799a7a;
}
span:nth-child(1n):before, span:nth-child(1n):after {
  background: #799a7a;
}
span:nth-child(2n) {
  color: #71dca3;
}
span:nth-child(2n):before, span:nth-child(2n):after {
  background: #71dca3;
}
span:nth-child(3n) {
  color: #ae7eb6;
}
span:nth-child(3n):before, span:nth-child(3n):after {
  background: #ae7eb6;
}
span:nth-child(4n) {
  color: #df8a86;
}
span:nth-child(4n):before, span:nth-child(4n):after {
  background: #df8a86;
}
span:nth-child(5n) {
  color: #a7a5cc;
}
span:nth-child(5n):before, span:nth-child(5n):after {
  background: #a7a5cc;
}
span:nth-child(6n) {
  color: #b8a3de;
}
span:nth-child(6n):before, span:nth-child(6n):after {
  background: #b8a3de;
}
span:nth-child(7n) {
  color: #d5b2dd;
}
span:nth-child(7n):before, span:nth-child(7n):after {
  background: #d5b2dd;
}
span:nth-child(8n) {
  color: #adb583;
}
span:nth-child(8n):before, span:nth-child(8n):after {
  background: #adb583;
}
span:nth-child(9n) {
  color: #7ca27e;
}
span:nth-child(9n):before, span:nth-child(9n):after {
  background: #7ca27e;
}
span:nth-child(10n) {
  color: #87c596;
}
span:nth-child(10n):before, span:nth-child(10n):after {
  background: #87c596;
}
span:nth-child(11n) {
  color: #7aba7e;
}
span:nth-child(11n):before, span:nth-child(11n):after {
  background: #7aba7e;
}
span:nth-child(12n) {
  color: #bac4c7;
}
span:nth-child(12n):before, span:nth-child(12n):after {
  background: #bac4c7;
}
span:nth-child(13n) {
  color: #bf8991;
}
span:nth-child(13n):before, span:nth-child(13n):after {
  background: #bf8991;
}
span:nth-child(14n) {
  color: #9d83a2;
}
span:nth-child(14n):before, span:nth-child(14n):after {
  background: #9d83a2;
}
span:nth-child(15n) {
  color: #867ac2;
}
span:nth-child(15n):before, span:nth-child(15n):after {
  background: #867ac2;
}
span:nth-child(16n) {
  color: #8eab67;
}
span:nth-child(16n):before, span:nth-child(16n):after {
  background: #8eab67;
}
span:nth-child(17n) {
  color: #cdbac9;
}
span:nth-child(17n):before, span:nth-child(17n):after {
  background: #cdbac9;
}
span:nth-child(18n) {
  color: #af86b7;
}
span:nth-child(18n):before, span:nth-child(18n):after {
  background: #af86b7;
}
span:nth-child(19n) {
  color: #93d4c4;
}
span:nth-child(19n):before, span:nth-child(19n):after {
  background: #93d4c4;
}
span:nth-child(20n) {
  color: #a4cd80;
}
span:nth-child(20n):before, span:nth-child(20n):after {
  background: #a4cd80;
}
span:nth-child(21n) {
  color: #7390a4;
}
span:nth-child(21n):before, span:nth-child(21n):after {
  background: #7390a4;
}
span:nth-child(22n) {
  color: #6bc0d2;
}
span:nth-child(22n):before, span:nth-child(22n):after {
  background: #6bc0d2;
}
span:nth-child(23n) {
  color: #72d9ca;
}
span:nth-child(23n):before, span:nth-child(23n):after {
  background: #72d9ca;
}
span:nth-child(24n) {
  color: #c59eba;
}
span:nth-child(24n):before, span:nth-child(24n):after {
  background: #c59eba;
}
span:nth-child(25n) {
  color: #a196d0;
}
span:nth-child(25n):before, span:nth-child(25n):after {
  background: #a196d0;
}
span:hover:before, span:hover:after {
  transition-duration: calc(var(--speed) / 10);
  transition-delay: 0s;
}
span:hover:before {
  transform: scaleX(1);
}
span:hover:after {
  transform: scaleY(1);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg