仅当与主形状接触时才产生粘稠效果

时间：2019-02-17 17:19:41

标签： html css svg

我将其用作预加载器，并且效果很好，但我希望仅当移动形状实际上与中间的圆接触时才会发生“粘稠”效果。看看现在如何始终模糊边缘。

我喜欢运动的形状与圆接触时会模糊起来，但是当它们离圆最大时，它们应该是100％正常的。形状不与中间圆接触时的样子：

enter image description here

您可以尝试将url("#goo")部分注释掉，以查看其正常状态。

.page-preloader-cover {
	position: fixed;
	z-index: 1200;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

.cssload-dots {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin: auto;
	filter: url("#goo");
	-o-filter: url("#goo");
	-ms-filter: url("#goo");
	-webkit-filter: url("#goo");
	-moz-filter: url("#goo");
}

.svg-filter {
	position: absolute;
}

.cssload-dot {
	width: 0;
	height: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%);
	-ms-transform: translate(-50%);
	transform: translate(-50%);
}

.cssload-dot:before {
	content: "";
	width: 48px;
	height: 48px;
	border-radius: 69px;
	background: #9664B4;
	position: absolute;
	left: 50%;
	transform: translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	margin-left: -24.5px;
	margin-top: -24.5px;
}

.cssload-dot:nth-child(5):before {
	z-index: 100;
	width: 62.5px;
	height: 62.5px;
	margin-left: -31.75px;
	margin-top: -31.75px;
	animation: cssload-dot-colors 4.6s ease infinite;
	-o-animation: cssload-dot-colors 4.6s ease infinite;
	-ms-animation: cssload-dot-colors 4.6s ease infinite;
	-webkit-animation: cssload-dot-colors 4.6s ease infinite;
	-moz-animation: cssload-dot-colors 4.6s ease infinite;
}


.cssload-dot:nth-child(1) {
	animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
	-o-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
	-ms-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
	-webkit-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
	-moz-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
}
.cssload-dot:nth-child(1):before {
	background-color: transparent;
	animation: cssload-dot-move 4.6s 0s ease infinite;
	-o-animation: cssload-dot-move 4.6s 0s ease infinite;
	-ms-animation: cssload-dot-move 4.6s 0s ease infinite;
	-webkit-animation: cssload-dot-move 4.6s 0s ease infinite;
	-moz-animation: cssload-dot-move 4.6s 0s ease infinite;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><path style="fill:%2355AF32;" d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"></path></svg>') !important;
}

.cssload-dot:nth-child(2) {
	animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
	-o-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
	-ms-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
	-webkit-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
	-moz-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
}
.cssload-dot:nth-child(2):before {
	background-color: transparent;
	animation: cssload-dot-move 4.6s 1.15s ease infinite;
	-o-animation: cssload-dot-move 4.6s 1.15s ease infinite;
	-ms-animation: cssload-dot-move 4.6s 1.15s ease infinite;
	-webkit-animation: cssload-dot-move 4.6s 1.15s ease infinite;
	-moz-animation: cssload-dot-move 4.6s 1.15s ease infinite;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><path style="fill:%23ff4a49;" d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"></path></svg>') !important;
}

.cssload-dot:nth-child(3) {
	animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
	-o-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
	-ms-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
	-webkit-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
	-moz-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
}
.cssload-dot:nth-child(3):before {
	background-color: transparent;
	animation: cssload-dot-move 4.6s 2.3s ease infinite;
	-o-animation: cssload-dot-move 4.6s 2.3s ease infinite;
	-ms-animation: cssload-dot-move 4.6s 2.3s ease infinite;
	-webkit-animation: cssload-dot-move 4.6s 2.3s ease infinite;
	-moz-animation: cssload-dot-move 4.6s 2.3s ease infinite;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><path style="fill:%230A4B9B;" d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"></path></svg>') !important;
}

.cssload-dot:nth-child(4) {
	animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
	-o-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
	-ms-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
	-webkit-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
	-moz-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
}
.cssload-dot:nth-child(4):before {
	background-color: transparent;
	animation: cssload-dot-move 4.6s 3.45s ease infinite;
	-o-animation: cssload-dot-move 4.6s 3.45s ease infinite;
	-ms-animation: cssload-dot-move 4.6s 3.45s ease infinite;
	-webkit-animation: cssload-dot-move 4.6s 3.45s ease infinite;
	-moz-animation: cssload-dot-move 4.6s 3.45s ease infinite;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><path style="fill:%239664B4;" d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"></path></svg>') !important;
}

@keyframes cssload-dot-move {
	0% {
		transform: translateY(0);
	}
	18%, 22% {
		transform: translateY(-96px);
	}
	40%, 100% {
		transform: translateY(0);
	}
}

@-o-keyframes cssload-dot-move {
	0% {
		-o-transform: translateY(0);
	}
	18%, 22% {
		-o-transform: translateY(-96px);
	}
	40%, 100% {
		-o-transform: translateY(0);
	}
}

@-ms-keyframes cssload-dot-move {
	0% {
		-ms-transform: translateY(0);
	}
	18%, 22% {
		-ms-transform: translateY(-96px);
	}
	40%, 100% {
		-ms-transform: translateY(0);
	}
}

@-webkit-keyframes cssload-dot-move {
	0% {
		-webkit-transform: translateY(0);
	}
	18%, 22% {
		-webkit-transform: translateY(-96px);
	}
	40%, 100% {
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes cssload-dot-move {
	0% {
		-moz-transform: translateY(0);
	}
	18%, 22% {
		-moz-transform: translateY(-96px);
	}
	40%, 100% {
		-moz-transform: translateY(0);
	}
}

@keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4; /*#7a6cea*/
	}
	25% {
		background-color: #55AF32; /*#2be1df*/
	}
	50% {
		background-color: #E61423; /*#ff4a4a*/
	}
	75% {
		background-color: #0A4B9B; /*#3b55e6*/
	}
	100% {
		background-color: #9664B4;
	}
}

@-o-keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4;
	}
	25% {
		background-color: #55AF32;
	}
	50% {
		background-color: #ff4a49;
	}
	75% {
		background-color: #0A4B9B;
	}
	100% {
		background-color: #9664B4;
	}
}

@-ms-keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4;
	}
	25% {
		background-color: #55AF32;
	}
	50% {
		background-color: #ff4a49;
	}
	75% {
		background-color: #0A4B9B;
	}
	100% {
		background-color: #9664B4;
	}
}

@-webkit-keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4;
	}
	25% {
		background-color: #55AF32;
	}
	50% {
		background-color: #ff4a49;
	}
	75% {
		background-color: #0A4B9B;
	}
	100% {
		background-color: #9664B4;
	}
}

@-moz-keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4;
	}
	25% {
		background-color: #55AF32;
	}
	50% {
		background-color: #ff4a49;
	}
	75% {
		background-color: #0A4B9B;
	}
	100% {
		background-color: #9664B4;
	}
}

@keyframes cssload-dot-rotate-1 {
	0% {
		transform: rotate(-105deg);
	}
	100% {
		transform: rotate(270deg);
	}
}

@-o-keyframes cssload-dot-rotate-1 {
	0% {
		-o-transform: rotate(-105deg);
	}
	100% {
		-o-transform: rotate(270deg);
	}
}

@-ms-keyframes cssload-dot-rotate-1 {
	0% {
		-ms-transform: rotate(-105deg);
	}
	100% {
		-ms-transform: rotate(270deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-1 {
	0% {
		-webkit-transform: rotate(-105deg);
	}
	100% {
		-webkit-transform: rotate(270deg);
	}
}

@-moz-keyframes cssload-dot-rotate-1 {
	0% {
		-moz-transform: rotate(-105deg);
	}
	100% {
		-moz-transform: rotate(270deg);
	}
}

@keyframes cssload-dot-rotate-2 {
	0% {
		transform: rotate(165deg);
	}
	100% {
		transform: rotate(540deg);
	}
}

@-o-keyframes cssload-dot-rotate-2 {
	0% {
		-o-transform: rotate(165deg);
	}
	100% {
		-o-transform: rotate(540deg);
	}
}

@-ms-keyframes cssload-dot-rotate-2 {
	0% {
		-ms-transform: rotate(165deg);
	}
	100% {
		-ms-transform: rotate(540deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-2 {
	0% {
		-webkit-transform: rotate(165deg);
	}
	100% {
		-webkit-transform: rotate(540deg);
	}
}

@-moz-keyframes cssload-dot-rotate-2 {
	0% {
		-moz-transform: rotate(165deg);
	}
	100% {
		-moz-transform: rotate(540deg);
	}
}

@keyframes cssload-dot-rotate-3 {
	0% {
		transform: rotate(435deg);
	}
	100% {
		transform: rotate(810deg);
	}
}

@-o-keyframes cssload-dot-rotate-3 {
	0% {
		-o-transform: rotate(435deg);
	}
	100% {
		-o-transform: rotate(810deg);
	}
}

@-ms-keyframes cssload-dot-rotate-3 {
	0% {
		-ms-transform: rotate(435deg);
	}
	100% {
		-ms-transform: rotate(810deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-3 {
	0% {
		-webkit-transform: rotate(435deg);
	}
	100% {
		-webkit-transform: rotate(810deg);
	}
}

@-moz-keyframes cssload-dot-rotate-3 {
	0% {
		-moz-transform: rotate(435deg);
	}
	100% {
		-moz-transform: rotate(810deg);
	}
}

@keyframes cssload-dot-rotate-4 {
	0% {
		transform: rotate(705deg);
	}
	100% {
		transform: rotate(1080deg);
	}
}

@-o-keyframes cssload-dot-rotate-4 {
	0% {
		-o-transform: rotate(705deg);
	}
	100% {
		-o-transform: rotate(1080deg);
	}
}

@-ms-keyframes cssload-dot-rotate-4 {
	0% {
		-ms-transform: rotate(705deg);
	}
	100% {
		-ms-transform: rotate(1080deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-4 {
	0% {
		-webkit-transform: rotate(705deg);
	}
	100% {
		-webkit-transform: rotate(1080deg);
	}
}

@-moz-keyframes cssload-dot-rotate-4 {
	0% {
		-moz-transform: rotate(705deg);
	}
	100% {
		-moz-transform: rotate(1080deg);
	}
}
<div class="page-preloader-cover">
					<div class="cssload-dots">
						<div class="cssload-dot"></div>
						<div class="cssload-dot"></div>
						<div class="cssload-dot"></div>
						<div class="cssload-dot"></div>
						<div class="cssload-dot"></div>
					</div>

					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-filter">
						<defs>
							<filter id="goo">
								<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12"></feGaussianBlur>
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0	0 1 0 0 0	0 0 1 0 0	0 0 0 18 -7" result="goo" ></feColorMatrix>
							</filter>
						</defs>
					</svg>
			</div>

1 个答案:

答案 0 :(得分：2)

这是将您的加载程序转换为SVG格式。

与斑点模糊相关的部分在这里：

<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12">
  <animate attributeName="stdDeviation"
           keyTimes="0; 0.5; 0.9; 1.0"
           values="12; 0; 0; 12"
           dur="1.15s" repeatCount="indefinite"/>
</feGaussianBlur>

正在发生的事情是，模糊会减少到0，然后每1.15秒再次回到12，以适应形状的移动。在此1.15秒间隔内，stdDeviation变为：

  • 从12（0 * 1.15s）到0（0.5 * 1.15s），然后
  • 从0在（0.9 * 1.15s）到12在（1 * 1.15s）

IOW，keyTimes值表示该1.15秒动画持续时间的百分比。如果需要，可以调整这些keyTimes的值以调整模糊动画的时间。

.page-preloader-cover {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.page-preloader-cover svg {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: visible;
}
<div class="page-preloader-cover">

  <svg viewBox="0 0 200 200">
    <defs>
      <filter id="goo">
        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12">
          <animate attributeName="stdDeviation"
                   keyTimes="0; 0.5; 0.9; 1.0"
                   values="12; 2; 2; 12"
                   dur="1.15s" repeatCount="indefinite"/>
        </feGaussianBlur>
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0	0 1 0 0 0	0 0 1 0 0	0 0 0 18 -7" result="goo" ></feColorMatrix>
      </filter>
      
      <symbol id="shape" viewBox="0 0 150 150">
        <path d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"/>
      </symbol>
    </defs>

    <g transform="translate(100,100)" filter="url(#goo)">
      <animate attributeName="filter"
               keyTimes="0; 0.4; 0.9; 1.0"
               values="url(#goo); none; none; url(#goo)"
               dur="1.15s" repeatCount="indefinite"/>
      <g>
        <use x="-24" y="-24" width="48" height="48" xlink:href="#shape" fill="#55AF32">
          <animate attributeName="y" dur="4.6s" repeatCount="indefinite"
                   calcMode="spline"
                   keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0"
                   keyTimes="0; 0.18; 0.22; 0.4; 1.0"
                   values="-24; -120; -120; -24; -24"/>
        </use>
        <animateTransform attributeName="transform"
                          type="rotate" from="-105" to="270"
                          dur="4.6s" repeatCount="indefinite"/>
      </g>
      <g>
        <use x="-24" y="-24" width="48" height="48" xlink:href="#shape" fill="#ff4a49">
          <animate attributeName="y" dur="4.6s" repeatCount="indefinite" begin="1.15s"
                   calcMode="spline"
                   keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0"
                   keyTimes="0; 0.18; 0.22; 0.4; 1.0"
                   values="-24; -120; -120; -24; -24"/>
        </use>
        <animateTransform attributeName="transform"
                          type="rotate" from="165" to="540"
                          dur="4.6s" repeatCount="indefinite" begin="1.15s"/>
      </g>
      <g>
        <use x="-24" y="-24" width="48" height="48" xlink:href="#shape" fill="#0A4B9B">
          <animate attributeName="y" dur="4.6s" repeatCount="indefinite" begin="2.3s"
                   calcMode="spline"
                   keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0"
                   keyTimes="0; 0.18; 0.22; 0.4; 1.0"
                   values="-24; -120; -120; -24; -24"/>
        </use>
        <animateTransform attributeName="transform"
                          type="rotate" from="435" to="810"
                          dur="4.6s" repeatCount="indefinite" begin="2.35s"/>
      </g>
      <g>
        <use x="-24" y="-24" width="48" height="48" xlink:href="#shape" fill="#9664B4">
          <animate attributeName="y" dur="4.6s" repeatCount="indefinite" begin="3.45s"
                   calcMode="spline"
                   keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0"
                   keyTimes="0; 0.18; 0.22; 0.4; 1.0"
                   values="-24; -120; -120; -24; -24"/>
        </use>
        <animateTransform attributeName="transform"
                          type="rotate" from="705" to="1080"
                          dur="4.6s" repeatCount="indefinite" begin="3.45s"/>
      </g>

      <circle cx="0" cy="0" r="31.25" fill="#9664B4">
      	<animate attributeName="fill" dur="4.6s" repeatCount="indefinite"
                 keyTimes="0; 0.25; 0.5; 0.75; 1"
                 values="#9664B4; #55AF32; #E61423; #0A4B9B; #9664B4"/>
      </circle>
    </g>
  </svg>

</div>

相关问题
最新问题