个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我将其用作预加载器并且运行良好，但我希望仅当移动的形状实际与中间的圆接触时才会出现“粘”效果。现在看看边缘是如何一直模糊的。
我喜欢移动的形状在与圆圈接触时会模糊，但当它们远离圆圈时它们应该是 100% 正常的。不与中间圆圈接触时形状的样子:
您可以尝试注释掉 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>最佳答案
这是您转换为 SVG 格式的加载器。
与 Blob 模糊相关的部分在这里:
<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.15s 动画持续时间的百分比。如果您愿意，可以调整那些 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>关于html - 仅在与主要形状接触时才产生粘性效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54735697/
25
4
0
我是 TensorFlow 菜鸟。我已经从 deeppose 的开源实现中训练了一个 TensorFlow 模型，现在必须针对一组新图像运行该模型。 该模型是在大小为 100 * 100 的图像上训练
我正在尝试以这种方式设置节点的大小: controller[shape=circle,width=.5,label="Controller",style=filled,fillcolor="#8EC1
是否有 VBA 代码可以在选择的每个单元格周围添加文本框。文本框应该是单元格的大小(类似于边框)？ 最佳答案 您可以使用 .AddTextbox方法。循环遍历您选择的单元格，并使用单元格的尺寸属性来设
我有一个变量 a尺寸 (1, 5) 我想“平铺”的次数与我的小批量的大小一样多。例如，如果小批量大小为 32，那么我想构造一个张量 c维度为 (32, 5)，其中每一行的值与原始 (1, 5) 变量
我在使用 javaFX 时遇到问题。我想每 1000 毫秒在应用程序窗口中显示一次时间。 public class Main extends Application { StackPane root
所以我目前正在创建这个 API。这个登录类应该只创建一个场景，其中包含制作 GUI 所需的所有框。我遇到的问题是，单击时我的形状不会执行任何操作。我有事件监听器，但它不起作用。 import
我正在用 python turtle 画一些东西，我使用了形状函数，但是形状 overdraw 了它们之前的其他形状(我可以看到形状在移动)，并且我只得到了最后一个形状: `up() goto(-20
我正在读取多个 .csv 文件作为具有相同形状的 panda DataFrame。对于某些索引，某些值为零，因此我想选择具有相同形状的每个索引的值，并为相同的索引放置零值并删除零以成为相同的形状: a
我有一个简单的二维网格，格式为 myGrid[x,y] 我正在尝试找到一种方法来找到围绕选定网格的周长，这样我就有了一个可供选择的形状。 这是我的意思的一个例子: 这里的想法是找到所有相关的“角”，也
我有一个网络层，用于调用多个端点。我想减少重复代码的数量，并认为也许我可以将响应模型作为端点的一部分传递。 这个想法是不需要多个仅因响应而不同的函数，我可以调用我的网络层并根据路径进行设置。 我看到的
我正在创建一个自定义 ImageView，它将我的图像裁剪成六边形并添加边框。我想知道我的方法是否正确，或者我是否以错误的方式这样做。有很多自定义库已经在执行此操作，但开箱即用的库中没有一个具有我正在
我正在编写一些代码，这些代码需要识别一些基于节点云的相当基本的几何图形。我会对检测感兴趣: 板(简单有界平面) 圆柱体(两个节点循环) 半圆柱(圆弧+直线+圆弧+直线) 圆顶(n*loop+top n
我有这个形状: http://screencast.com/t/9UUhAXT5Wu 但边界在截止点处没有跟随它 - 我该如何解决？ 这是我当前 View 的代码: self.view.backgro
我现在脑震荡，所以我想问一个非常简单的问题。 目前，我正在尝试打印出这样的开头 当输入为 7 时，输出为 * ** * ** * ** * 这里是我的代码，它打印 14 次而不是 7 次，或者当我输入
我想生成如下设计。计划选项卡顶部的"new"。我使用的属性适用于 chrome 和 mozilla，但在 Edge 中出现故障。 以下是我在 chrome 中应用的样式: a.subnav__item
我想要一个带有两种颜色边框轮廓的 shape 元素。我可以使用 solid 元素做一个单一的颜色轮廓，但这只允许我画一条线。我尝试在我的形状中使用两个 stroke 元素，但这也不起作用。 有没有办法
我需要为屏幕上的形状着色任何我想要的颜色。我目前正在尝试使用 UIImage 来执行此操作，我想根据自己的需要重新着色。据我所知，执行此操作的唯一方法是获取 UIImage 的各个像素，这需要更多我想
因此，经过多年的 OOP，我从我的一门大学类(class)中得到了一个非常简单的家庭作业，以实现一个简单的面向对象的结构。 要求的设计: 实现面向对象的解决方案以创建以下形状: 椭圆、圆形、正方形、矩
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
我想知道是否可以使用类似于以下的 div 制作复杂的形状: 它基本上是一个四 Angular 向内收缩的圆 Angular 正方形。目标是使用背景图像来填充它。我可以使用具有以下 SVG 路径的剪辑蒙
我是一名优秀的程序员,十分优秀！