css - CSS 跨浏览器动画技巧(液体/粘糊糊的复选框动画)
问题描述
关于这个自定义 CSS 单选按钮(下面的片段或 @ https://codepen.io/Zaku/pen/xrKMgb)...
为什么 Safari 显示模糊的 CSS 元素?
这在 Chrome 中完美运行,但在 Safari 中不适用......下面的演示:
这很重要,因为大多数 iPhone 和 Mac 用户默认使用 Safari 浏览器...
知道为什么会发生这种情况以及如何解决吗?
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>
解决方案
只需替换<filter id="gooey">
为<filter id="gooey" color-interpolation-filters="sRGB">
在除 Safari 之外的所有浏览器中,颜色插值过滤器默认设置为 sRGB。
编辑:
使用 svg 的原因是为了提供一种粘糊糊的效果,如果您仔细观察复选框,就会看到这种效果。如果在这种情况下删除它不会降低动画质量,因为变化很小。只是为了告诉你区别,当复选框从 transform:scale() 选中到 translateX() 并且还启用了 svg 时,我更改了动画,所以当它上下移动时,你会看到白色圆圈正在尝试混合外部圈子,但是当您删除 svg 时,它不会融入其中。
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>
推荐阅读
- django - Django admin,如何限制用户只能在他的国家/地区插入记录?
- python - 使用 pywinauto 在窗口上执行各种任务
- python - 返回每个键具有最高值的行,而不会丢失 RDD 中的整行
- python - 节点模块依赖问题
- flutter - 使用 AnimationPositioned 移动图像
- java - Junits 中的 NullPointerException
- docker - 'update-ca-certificates' 未被识别为内部或外部命令
- sql - SQL查询中的日期分组范围
- flutter - 如何允许后退按钮在颤动中退出应用程序
- php - 将 ACF 字段添加到 WooCommerce 订单列表列