问题：

CSS跨浏览器动画提示（液体/粘性复选框动画）

阎渝

2023-03-14

关于此自定义CSS单选按钮（下面的代码片段或@https://codepen.io/Zaku/pen/xrKMgb)...

为什么Safari显示模糊的CSS元素？

这在Chrome完美工作，但不是Safari...

这是一件大事，因为大多数iPhone

你知道为什么会发生这种情况以及如何解决吗？

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #af4671 0%, #a45cd1 100%);
}

* {
  box-sizing: border-box;
}

input[type=checkbox] {
  display: none;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: url('#gooey');
}

@keyframes circle__in {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  16% {
    transform: translate(-50%, -50%) scale(0.95, 1.05);
  }

  33% {
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    transform: translate(-50%, -50%) scale(1.05, 0.95);
  }

  66% {
    transform: translate(-50%, -50%) scale(1);
  }

  83% {
    transform: translate(-50%, -50%) scale(0.98, 1.02);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}


input:checked + .circle {
  transform-origin: 50% 50%;
  animation-name: circle__in;
  animation-duration: 750ms;
  animation-timing-function: linear;
}

.circle {
  transform-origin: 50% 50%;
  animation-name: circle__out;
  animation-duration: 1000ms;
  animation-timing-function: ease;
}

.circle--outer {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 6px solid white;
}

.circle--inner {
  top: 15px;
  left: 15px;
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background: white;
}

@keyframes circle--inner__in {
  0% {
    transform: scale(0.0);
  }

  80% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

input:checked + .circle .circle--inner {
  transform-origin: 50% -20%;
  animation-name: circle--inner__in;
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
}

@keyframes circle--inner__out {
  0% {
    transform: scale(1);
  }

  80% {
    transform: scale(0.19);
  }

  99% {
    transform: scale(0.21);
  }

  100% {
    transform: scale(0);
  }
}

.circle--inner {
  animation-name: circle--inner__out;
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
  animation-fill-mode: forwards;
}

.circle--inner__1 { transform-origin: -12% -8%; }
.circle--inner__2 { transform-origin: -35% 50%; }
.circle--inner__3 { transform-origin: 60% 130%; }
.circle--inner__4 { transform-origin: 112% 90%; }
.circle--inner__5 { transform-origin: 75% -30%; }

// dribbble - twitter
.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
  img {
    display: block;
    height: 28px;
  }
}
.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
  svg {
    width: 32px;
    height: 32px;
    fill: #1da1f2;
  }
}

<label>
  <input type="checkbox" />
  <div class="circle">
    <div class="circle--inner circle--inner__1" ></div>
    <div class="circle--inner circle--inner__2" ></div>
    <div class="circle--inner circle--inner__3" ></div>
    <div class="circle--inner circle--inner__4" ></div>
    <div class="circle--inner circle--inner__5" ></div>
    <div class="circle--outer" ></div>
  </div>
  <svg>
    <defs>
      <filter id="gooey">
        <feGaussianBlur
          in="SourceGraphic"
          result="blur"
          stdDeviation="3"
        />
        <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="gooey"
        />
        <feBlend
          in2="gooey"
          in="SourceGraphic"
          result="mix"
        />
      </filter>
    </defs>
  </svg>
</label>


<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
  <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
  <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
    <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
  </svg>    
</a>

共有3个答案

蔺弘

2023-03-14

整个SVG

https://jsfiddle.net/webmw/zct6rmd0/8/

有什么理由让这个SVG

这似乎与纯CSS动画一起工作：

<label>
  <input type="checkbox" />
  <div class="circle">
    <div class="circle--inner circle--inner__1" ></div>
    <div class="circle--inner circle--inner__2" ></div>
    <div class="circle--inner circle--inner__3" ></div>
    <div class="circle--inner circle--inner__4" ></div>
    <div class="circle--inner circle--inner__5" ></div>
    <div class="circle--outer" ></div>
  </div>
</label>

欢迎您提供一个更好的答案，该答案扩展了CSS动画技术的最佳实践，我将奖励您50点声誉积分。寻找最大的跨浏览器支持。

郁灿

2023-03-14

Safari正在削减feGaussianBlur的输出

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4">
    <filter x="-50%" width="200%" y="-50%" height="200%" id="gooey" color-interpolation-filters="sRGB">
        <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"result="goo" />
        <feComposite in="SourceGraphic" in2="goo" operator="atop" />
    </filter>
    <g filter="url(#gooey)" class="top-circles">
        <circle class="top-circ" fill="#fff" cx="2" cy="2" r="2"/>
        <circle class="second-circ" fill="#fff" cx="2" cy="2" r="1.6" />
        
    </g>
</svg>

鲜于仰岳

2023-03-14

只需更换

在除Safari之外的每个浏览器中，颜色插值过滤器默认设置为sRGB。

使用svg的原因是，如果仔细观察复选框，可以看到一种粘性效果。如果在这种情况下删除动画，则不会降低动画质量，因为更改非常微小。只是为了告诉你区别，当选中复选框时，我将动画从transform:scale（）更改为translateX（），并且还启用了svg，因此当它上下移动时，你会看到白色圆圈尝试在外圈中混合，但当你移除svg时，它不会混合。

css prettyprint-override">html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #af4671 0%, #a45cd1 100%);
}

* {
  box-sizing: border-box;
}

input[type=checkbox] {
  display: none;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  filter: url('#gooey');
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes circle__in {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  16% {
    transform: translate(-50%, -50%) scale(0.95, 1.05);
  }
  33% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05, 0.95);
  }
  66% {
    transform: translate(-50%, -50%) scale(1);
  }
  83% {
    transform: translate(-50%, -50%) scale(0.98, 1.02);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

input:checked+.circle {
  transform-origin: 50% 50%;
  animation-name: circle__in;
  animation-duration: 750ms;
  animation-timing-function: linear;
}

.circle {
  transform-origin: 50% 50%;
  animation-name: circle__out;
  animation-duration: 1000ms;
  animation-timing-function: ease;
}

.circle--outer {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  border: 6px solid white;
}

.circle--inner {
  top: 15px;
  left: 15px;
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background: white;
}

@keyframes circle--inner__in {
  0% {
    transform: scale(1)translateX(80px);
  }
  80% {
    transform: scale(1)translateX(-80px);
  }
  100% {
    transform: scale(1)translateX(80px);
  }
}

input:checked+.circle .circle--inner {
  transform-origin: 50% -20%;
  animation-name: circle--inner__in;
  animation-duration: 4s;
  animation-timing-function: linear;
}

@keyframes circle--inner__out {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.19);
  }
  99% {
    transform: scale(0.21);
  }
  100% {
    transform: scale(0);
  }
}

.circle--inner {
  animation-name: circle--inner__out;
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.85, 0, 0.2, 1);
  animation-fill-mode: forwards;
}

.circle--inner__1 {
  transform-origin: -12% -8%;
}

.circle--inner__2 {
  transform-origin: -35% 50%;
}

.circle--inner__3 {
  transform-origin: 60% 130%;
}

.circle--inner__4 {
  transform-origin: 112% 90%;
}

.circle--inner__5 {
  transform-origin: 75% -30%;
}

// dribbble - twitter
.dribbble {
  position: fixed;
  display: block;
  right: 20px;
  bottom: 20px;
}

.twitter {
  position: fixed;
  display: block;
  right: 64px;
  bottom: 14px;
}

svg {
  fill: #1da1f2;
  border: 2px solid white;
}

label svg {
  height: 100vh;
  width: 100vw;
}

<label>
  <input type="checkbox" />
  <div class="circle">
    <div class="circle--inner circle--inner__1" ></div>
    <div class="circle--inner circle--inner__2" ></div>
    <div class="circle--inner circle--inner__3" ></div>
    <div class="circle--inner circle--inner__4" ></div>
    <div class="circle--inner circle--inner__5" ></div>
    <div class="circle--outer" ></div>
  </div>
<svg>
    <defs>
      <filter id="gooey" filterUnits="userSpaceOnUse">
        <feGaussianBlur
          in="SourceGraphic"
          result="blur"
          stdDeviation="3"
        />
        <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="gooey"
        />
        <feBlend
          in2="gooey"
          in="SourceGraphic"
          result="mix"
        />
      </filter>
    </defs>
  </svg>
</label>

类似资料：

CSS滚动条样式跨浏览器

问题内容：如何定义跨浏览器的CSS滚动条样式？我测试了此代码，它仅在IE和Opera中起作用，但在Chrome，Safari和Firefox中失败。问题答案：滚动条CSS样式是Microsoft开发人员发明的一种奇怪方法。它们不是CSS的W3C标准的一部分，因此大多数浏览器只是忽略它们。
跨浏览器CSS

问题内容：专业的网页设计师如何创建跨浏览器的CSS？通常是手动完成，还是像YUI针对JavaScript那样可以简化流程的工具包？我希望远离Dreamweaver之类的所见即所得编辑器。谢谢！问题答案：通常是手工完成的。通常从对比赛场地应用CSS重置开始。而且，您应该针对符合标准的CSS，然后作为对IE的最后手段，才可以使用hacks（是的，我刚刚说过）。
带过滤器的跨浏览器SVG动画（Chrome工作，不是Firefox/Safari）

我使用&过滤器和标记创建了一个Porter-Duff Out（knockout）效果，它在底部的叶子形状层上切出一个圆形孔。我在Chrome中的一切都运行良好，但在Firefox和Safari中发现了不同的行为。 Firefox根本不会呈现过滤后的元素，从我的在线搜索来看，原因似乎是Firefox不支持feImage标记中的支离破碎的svg元素。然而，即使我尝试用1）到实际svg文件的完整链接和
如何对齐复选框及其标签始终跨浏览器

问题内容：这是困扰我的CSS小问题之一。Stack Overflow周围的人们如何垂直对齐以及他们始终如一的跨浏览器？每当我在Safari中正确对齐它们（通常在上使用）时，它们在Firefox和IE中就完全关闭了。在Firefox中进行修复，不可避免地将Safari和IE弄乱了。每次编写表单时，我都会在此上浪费时间。这是我使用的标准代码：我通常使用Eric Meyer的重置，因此表单
动画后CSS动画属性保持不变

问题内容：我试图让CSS动画属性在完成后保留，这可能吗？这就是我想要实现的目标… 当用户登陆页面时，该元素应该被隐藏，在3秒钟（或任何其他时间）之后，该元素应淡入，动画完成后应留在该页面上。这是一个小提琴尝试… 这是保存代码… 我知道如何使用jQuery ..就像这样… 问题答案：我认为您正在寻找CSS3属性 animation-fill-mode CSS属性指定CSS动画在执行之前和之后
CSS动画和显示无

问题内容：我有一个div的CSS动画，经过一定时间后会滑入。我想要几个div填充滑入的动画div的空间，然后它将这些元素向下推到页面上。当我在第一个div尝试此操作时，即使看不见，幻灯片仍会占用空间。如果我将div更改为div，则根本不会滑入。我如何让div在不定时的情况下不占用空间（使用CSS进行计时）。我正在为动画使用Animate.css。代码如下所示：如代码所示，我希望隐藏主d

CSS跨浏览器动画提示（液体/粘性复选框动画）

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档