那些遇到过的问题

如何制作火花按钮动画？

Zly*_*rin 11 javascript css css-animations

我刚刚发现了一个GitHub Repo,其上有一个很酷的引发动画button,但对于Android.

这是Animation:

动画

但是,我希望我的网站,所以我开始自己设计.

首先,我按帧拆掉了gif.然后,通过这些观点,我制作了一个路线图,这是我在编写代码时所遵循的:

  • 这颗星逐渐scale()消失了.
  • 一小圈橙色逐渐覆盖了恒星scale().
  • 另一个小圆圈,但这次background-color(白色,在这种情况下),也逐渐覆盖前一个圆圈scale().
  • 随之scale()而来的是星星也会再次出现(因此,我要增加z-index),这次是橙色(表示其选定的状态).
  • 新星的四周散落着另一个小圆圈.

这是我到目前为止所做的:

svg {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100px;
  transition: 0.5s;
  fill:gray;
}

svg:hover {
  animation: up-svg 1s;
  fill: darkorange;
  z-index: 1;
}

svg:hover~.svg {
  animation: up-one 0.5s;
  display: block;
}

svg:hover~.svg1 {
  animation: up-two 1s;
  display: block;
}

.svg {
  position: absolute;
  top: 0;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: orange;
  display: none;
  transform: scale(0.9);
  transition: 0.5s;
}

.svg1 {
  position: absolute;
  top: 0;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: white;
  display: none;
  transition: 0.5s;
}

@keyframes up-one {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(0);
  }
  100% {
    transform: scale(0.9);
  }
}

@keyframes up-two {
  0% {
    transform: scale(0);
  }
  37.5% {
    transform: scale(0);
  }
  50% {
    transform: scale(0.25);
  }
  62.5% {
    transform: scale(0.5);
  }
  75% {
    transform: scale(0.75);
  }
  87.5% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes up-svg {
  0% {
    transform: scale(1);
    fill: gray;
    z-index: 0;
  }
  70% {
    transform: scale(0);
    fill: darkorange;
    z-index: 1;
  }
  100% {
    transform: scale(1);
    fill: darkorange;
    z-index: 1;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<svg id="s-tt" class="s-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>
<div class="svg"></div>
<div class="svg1"></div>
Run Code Online (Sandbox Code Playgroud)

我已经尽了最大努力,但它看起来并不像预期的那样,而且我也被这些圆圈所困扰.

颜色现在不是首要任务.我现在坚持使用hover属性(这样动画可以一次又一次地看到而不重新加载)直到动画完成.

我在Google和SO上搜索过,但到目前为止还没有运气.

那么,任何人都可以帮我制作那种动画吗？

Tem*_*fif 11

这是我非完美的想法,我将只依靠CSS和少数元素.我将单独详细介绍每个部分,然后将其合并为一个动画.

对于图标部分(星形),我会做同样的事情,但我可能会考虑使用一个grayscale过滤器,使其具有适用于任何元素和任何颜色的通用效果.

.magic i{
  color:red;
  filter:grayscale(100%);
}
.magic:hover i{
  animation:change 1s forwards;
}


@keyframes change{
  50% {
    transform:scale(0);
  filter:grayscale(100%);
  }
  51% {
    filter:grayscale(0%);
  }
  100% {
    transform:scale(1);
    filter:grayscale(0%);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<span class="magic">
<i class="fas fa-star fa-5x"></i>
</span>
Run Code Online (Sandbox Code Playgroud)

对于圆圈,我将只考虑一个元素,这里的技巧是依赖边框着色与背景着色.我们最初制作高度/宽度0,我们只有边框,因此它将是一个完整的圆圈.然后我们简单地减小边框的厚度,同时保持整体宽度相同.所以我们会这样做:

  1. 开始窗体宽度/高度0和边框宽度0
  2. 我们增加边框宽度以创建比例效果
  3. 我们减小边框宽度,同时增加宽度/高度以保持整体宽度/高度相同.

.circle {
  display:inline-block;
  width:0px;
  height:0px;
  border-radius:50%;
  border-color:orange;
  border-style:solid;
  border-width:0px;
  box-sizing:border-box;
}

body:hover .circle {
  animation:change 1s forwards;
}

@keyframes change {
   50% {
    border-width:25px;
   }
   100% {
    border-width:0;
    width:50px;
    height:50px;
   }

}

body {
 min-height:100px;
}
Run Code Online (Sandbox Code Playgroud) 
<span class="circle"></span>
Run Code Online (Sandbox Code Playgroud)

该解决方案具有小的缺点,因为它将使元件从左上方而不是中心增加.我们可以通过使用比例而不是改变宽度/高度来纠正这个问题:

.circle {
  display:inline-block;
  width:50px;
  height:50px;
  border-radius:50%;
  border-color:orange;
  border-style:solid;
  border-width:25px;
  transform:scale(0);
  box-sizing:border-box;
}

body:hover .circle {
  animation:change 1s linear forwards;
}

@keyframes change {
   50% {
    transform:scale(1);
    border-width:25px;
   }
   100% {
    transform:scale(1);
    border-width:0;
   }

}

body {
 min-height:100px;
}
Run Code Online (Sandbox Code Playgroud) 
<span class="circle"></span>
Run Code Online (Sandbox Code Playgroud)

考虑到简单的过渡,我们仍然可以简化:

.circle {
  display:inline-block;
  width:50px;
  height:50px;
  border-radius:50%;
  border-color:orange;
  border-style:solid;
  border-width:25px;
  transform:scale(0);
  box-sizing:border-box;
  transition:
    transform 0.5s,
    border-width 0.5s 0.5s;
}

body:hover .circle {
  border-width:0;
  transform:scale(1);
}

body {
 min-height:100px;
}
Run Code Online (Sandbox Code Playgroud) 
<span class="circle"></span>
Run Code Online (Sandbox Code Playgroud)

现在是棘手的部分和小圈子.为此,我将依靠radial-gradient并扩展.我们的想法是在一个元素内创建具有渐变的小圆圈,并使用缩放我们将创建扩展效果.

.small {
  display:inline-block;
  width:100px;
  height:100px;
  background:
    /*4 reds*/
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    /*4 oranges*/
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%); 
  
  background-size:16px 16px; 
  background-position:
    calc(50% - 30px) calc(50% - 30px),
    calc(50% + 30px) calc(50% - 30px),
    calc(50% - 30px) calc(50% + 30px),
    calc(50% + 30px) calc(50% + 30px),
    calc(50% +  0px) calc(50% + 40px),
    calc(50% + 40px) calc(50% +  0px),
    calc(50% - 40px) calc(50% +  0px),
    calc(50% +  0px) calc(50% - 40px);
  background-repeat:no-repeat;
  border-radius:50%;
}
Run Code Online (Sandbox Code Playgroud) 
<span class="small"></span>
Run Code Online (Sandbox Code Playgroud)

我创建了8个圆圈并将它们从中心放置(请查看此答案以获取有关background-position工作原理的更多详细信息:https://stackoverflow.com/a/51734530/8620333).您只需根据需要调整圆的大小,位置和颜色即可.

这是动画:

.small {
  display:inline-block;
  width:100px;
  height:100px;
  background:
    /*4 reds*/
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    /*4 oranges*/
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%); 
  
  background-size:16px 16px;
  background-position:
    calc(50% - 30px) calc(50% - 30px),
    calc(50% + 30px) calc(50% - 30px),
    calc(50% - 30px) calc(50% + 30px),
    calc(50% + 30px) calc(50% + 30px),
    calc(50% +  0px) calc(50% + 40px),
    calc(50% + 40px) calc(50% +  0px),
    calc(50% - 40px) calc(50% +  0px),
    calc(50% +  0px) calc(50% - 40px);
  background-repeat:no-repeat;
  border-radius:50%;
  transform:scale(0);
  transition:transform 0.5s,opacity 0.4s 0.4s;
}

body {
 min-height:200px;
}
body:hover .small {
  transform:scale(1);
  opacity:0;
}
Run Code Online (Sandbox Code Playgroud) 
<span class="small"></span>
Run Code Online (Sandbox Code Playgroud)

如果你想要一个更准确的动画,你也可以考虑减少圆圈来减少圆圈background-size.

.small {
  display:inline-block;
  width:100px;
  height:100px;
  background:
    /*4 reds*/
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    /*4 oranges*/
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%); 
  
  background-size:16px 16px; /*at least 2x7px */
  background-position:
    calc(50% - 30px) calc(50% - 30px),
    calc(50% + 30px) calc(50% - 30px),
    calc(50% - 30px) calc(50% + 30px),
    calc(50% + 30px) calc(50% + 30px),
    calc(50% +  0px) calc(50% + 40px),
    calc(50% + 40px) calc(50% +  0px),
    calc(50% - 40px) calc(50% +  0px),
    calc(50% +  0px) calc(50% - 40px);
  background-repeat:no-repeat;
  border-radius:50%;
  transform:scale(0);
  transition:transform 0.5s,opacity 0.4s 0.4s,background-size 0.5s 0.4s;
}

body {
 min-height:200px;
}
body:hover .small {
  transform:scale(1);
  opacity:0;
  background-size:0 0;
}
Run Code Online (Sandbox Code Playgroud) 
<span class="small"></span>
Run Code Online (Sandbox Code Playgroud)

现在,您只需通过更改某些值对其他小圆圈执行相同操作即可.

让我们把所有这些放在一起!

.magic {
  display:inline-block;
  margin:50px;
  position:relative;
}

.magic i{
  color:orange;
  filter:grayscale(100%);
  position:relative;
}
.magic:hover i{
  animation:change 1s forwards;
}


@keyframes change{
  50% {
    transform:scale(0);
  filter:grayscale(100%);
  }
  51% {
    filter:grayscale(0%);
  }
  100% {
    transform:scale(1);
    filter:grayscale(0%);
  }
}
/**/

.magic:before {
  content:"";
  position:absolute;
  top:calc(50% - 45px);
  left:calc(50% - 45px);
  width:90px;
  height:90px;
  border-radius:50%;
  border-color:orange;
  border-style:solid;
  border-width:45px;
  transform:scale(0);
  box-sizing:border-box;
}

.magic:hover::before {
  transition:
    transform 0.5s,
    border-width 0.5s 0.5s;
  border-width:0;
  transform:scale(1);
}

/**/

.magic::after {
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  left:calc(50% - 80px);
  top:calc(50% - 80px);
  background:
    /*4 reds*/
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    /*4 oranges*/
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%); 
  
  background-size:16px 16px; 
  background-position:
    calc(50% - 50px) calc(50% - 50px),
    calc(50% + 50px) calc(50% - 50px),
    calc(50% - 50px) calc(50% + 50px),
    calc(50% + 50px) calc(50% + 50px),
    calc(50% +  0px) calc(50% + 70px),
    calc(50% + 70px) calc(50% +  0px),
    calc(50% - 70px) calc(50% +  0px),
    calc(50% +  0px) calc(50% - 70px);
  background-repeat:no-repeat;
  border-radius:50%;
  transform:scale(0);
}

.magic:hover:after {
  transform:scale(1);
  opacity:0;
  background-size:0 0;
  transition:
    transform 0.5s 0.5s,
    opacity 0.4s 0.9s,
    background-size 0.5s 0.9s;
}
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<span class="magic">
<i class="fas fa-star fa-5x"></i>
</span>

<span class="magic">
<i class="fas fa-user fa-5x"></i>
</span>
Run Code Online (Sandbox Code Playgroud)

正如我所说,它不是完美的,但非常接近您想要的元素和所需的细节,因此您可以轻松调整不同的值.它也可以很容易地与任何图标一起使用,因为您只需要为图标添加包装器.

为简单起见,我没有添加小圆圈,但我们可以考虑另一个伪元素并轻松添加它们:

.magic {
  display:inline-block;
  margin:50px;
  position:relative;
}

.magic i{
  color:orange;
  filter:grayscale(100%);
}
.magic:hover i{
  animation:change 1s forwards;
}


@keyframes change{
  50% {
    transform:scale(0);
  filter:grayscale(100%);
  }
  51% {
    filter:grayscale(0%);
  }
  100% {
    transform:scale(1);
    filter:grayscale(0%);
  }
}
/**/

.magic:before {
  content:"";
  position:absolute;
  top:calc(50% - 45px);
  left:calc(50% - 45px);
  width:90px;
  height:90px;
  border-radius:50%;
  border-color:orange;
  border-style:solid;
  border-width:45px;
  transform:scale(0);
  box-sizing:border-box;
}

.magic:hover::before {
  border-width:0;
  transform:scale(1);
  transition:
    transform 0.5s,
    border-width 0.5s 0.5s;
}

/**/

.magic::after,
.magic i::after{
  content:"";
  position:absolute;
  width:160px;
  height:160px;
  left:calc(50% - 80px);
  top:calc(50% - 80px);
  background:
    /*4 reds*/
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    radial-gradient(circle,red 50%,transparent 60%),
    /*4 oranges*/
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%),
    radial-gradient(circle,orange 50%,transparent 60%); 
  
  background-size:16px 16px; 
  background-position:
    calc(50% - 50px) calc(50% - 50px),
    calc(50% + 50px) calc(50% - 50px),
    calc(50% - 50px) calc(50% + 50px),
    calc(50% + 50px) calc(50% + 50px),
    calc(50% +  0px) calc(50% + 70px),
    calc(50% + 70px) calc(50% +  0px),
    calc(50% - 70px) calc(50% +  0px),
    calc(50% +  0px) calc(50% - 70px);
  background-repeat:no-repeat;
  border-radius:50%;
  transform:scale(0);
}
.magic i::after {
  background-size:10px 10px;
  transform:rotate(10deg) scale(0);
}

.magic:hover:after {
  transform:scale(1);
  opacity:0;
  background-size:0 0;
  transition:transform 0.5s 0.5s,opacity 0.4s 0.9s,background-size 0.5s 0.9s;
}
.magic:hover i:after {
  transform:rotate(10deg) scale(1);
  opacity:0;
  background-size:0 0;
  transition:transform 0.5s 0.5s,opacity 0.4s 0.9s,background-size 0.5s 0.9s;
}

/**/
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<span class="magic">
<i class="fas fa-star fa-5x"></i>
</span>

<span class="magic">
<i class="fas fa-user fa-5x"></i>
</span>
Run Code Online (Sandbox Code Playgroud)

UPDATE

这是对代码的改进,考虑到一些CSS变量并使用更多flexbile单元来轻松控制维度:

.magic {
  display:inline-block;
  margin:50px;
  position:relative;
  --r:45px;
}

.magic i{
  color:orange;
  filter:grayscale(100%);
}
.magic:hover i{
  animation:change 1s forwards;
}


@keyframes change{
  50% {
   transform:scale(0);
   filter:grayscale(100%);
  }
  51% {
    filter:grayscale(0%);
  }
  100% {
    transform:scale(1);
    filter:grayscale(0%);
  }
}
/**/

.magic:before {
  content:"";
  position:absolute;
  top:calc(50% - var(--r));
  left:calc(50% - var(--r));
  width:calc(2*var(--r));
  height:calc(2*var(--r));
  border-radius:50%;
  border:solid orange var(--r);
  transform:scale(0);
  box-sizing:border-box;
}

.magic:hover::before {
  border-width:0;
  transform:scale(1);
  transition:
    transform 0.5s,
    border-width 0.5s 0.5s;
}

/**/

.magic::after,
.magic i::after{
  content:"";
  position:absolute;
  width: calc(4*var(--r));
  height:calc(4*var(--r));
  left:calc(50% - 2*var(--r));
  top: calc(50% - 2*var(--r));
  --c1:radial-gradient(circle,red 50%   ,transparent 60%);
  --c2:radial-gradient(circle,orange 50%,transparent 60%);
  background:
    /*4 reds*/
    var(--c1),var(--c1),var(--c1),var(--c1),
    /*4 oranges*/
    var(--c2),var(--c2),var(--c2),var(--c2); 
  
  background-size:calc(var(--r)/3) calc(var(--r)/3); 
  background-position:
    calc(50% - var(--r)) calc(50% - var(--r)),
    calc(50% + var(--r)) calc(50% - var(--r)),
    calc(50% - var(--r)) calc(50% + var(--r)),
    calc(50% + var(--r)) calc(50% + var(--r)),
    calc(50% +  0px) calc(50% + var(--r)*1.414),
    calc(50% + var(--r)*1.414) calc(50% +  0px),
    calc(50% - var(--r)*1.414) calc(50% +  0px),
    calc(50% +  0px) calc(50% - var(--r)*1.414);
  background-repeat:no-repeat;
  transform:scale(0);
}
.magic i::after {
  background-size:calc(var(--r)/5) calc(var(--r)/5);
  transform:rotate(55deg) scale(0);
}

.magic:hover:after {
  transform:scale(1);
  opacity:0;
  background-size:0 0;
  transition:
    transform 0.5s 0.5s,
    opacity 0.4s 0.9s,
    background-size 0.5s 0.9s;
}
.magic:hover i:after {
  transform:rotate(55deg) scale(1);
  opacity:0;
  background-size:0 0;
  transition:
    transform 0.5s 0.5s,
    opacity 0.4s 0.9s,
    background-size 0.5s 0.9s;
}

/**/
Run Code Online (Sandbox Code Playgroud) 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<span class="magic" style="--r:80px;">
<i class="fas fa-star fa-10x"></i>
</span>
<span class="magic">
<i class="fas fa-user fa-5x"></i>
</span>
<span class="magic" style="--r:20px;">
<i class="far fa-bell fa-3x"></i>
</span>
Run Code Online (Sandbox Code Playgroud)

基本上,变量r将定义整个形状的半径,您可以根据图标的大小轻松更改.

归档时间：

查看次数：

620 次

最近记录：

6 年，6 月 前
在线性渐变上使用背景位置的百分比值 12
更多相关链接
相关归档
由于MIME类型错误,Chrome拒绝执行AJAX脚本 142
如何本地化jQuery UI Datepicker？ 114
是否有明确支持AngularJS的IDE？ 89
在IIS7上启用跨源资源共享 84
不是CSS选择器 69
NodeList何时生效,何时是静态的？ 58
如何将CSS中的锚元素居中？ 51
使用@media查询时,手机是否会加载不相关的查询和图片？ 39
如何水平居中图像并将其与容器底部对齐？ 38
有人真的使用css命名空间吗？ 28
难疑归档
什么是Python中的元类？ 5409
在JavaScript中循环遍历数组 2940
如何在Python中延迟时间？ 2638
在JavaScript中创建多行字符串 2412
显示两个修订版之间已更改的文件 2041
如何在不安装Ms Office的情况下在C#中创建Excel(.XLS和.XLSX)文件？ 1804
将存储过程的结果插入临时表 1526
如何在HTTP POST请求中发送参数？ 1396
如何使用INER JOIN与SQL Server删除？ 1181
Ukkonen的简明英语后缀树算法 1065