那些遇到过的问题

CSS旋转微笑的脸装载机

Sti*_*ers 9 css css-animations css-shapes

我想用纯CSS复制下面的gif动画,是否可能,以及如何？我也对其他适当的方法持开放态度.

下面的片段是我到目前为止它只是一个静态的脸.

body {
  background: #fff;
  margin: 50px;
}

.loader {
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom, #fff 50%, #51cf66 50%);
}

.loader:before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: 10px;
  border-radius: 50%;
  background: #fff;
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #51cf66;
}

.dot:first-child {
  left: 10px;
  top: 10px;
}

.dot:last-child {
  right: 10px;
  top: 10px;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

旋转的笑脸动画

Tem*_*fif 7

这是解决方案,下面一步一步解释:)

.smile {
  margin: 30px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background:radial-gradient(circle at center,#42bd56 10%,transparent 11%) 43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center,#42bd56 10%,transparent 11%) -43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center, #fff 35px, transparent 35px) 0 0/100% 100% no-repeat, 
  linear-gradient(to bottom, #fff 50%, transparent 50%) 0 0/100% 100% no-repeat, #42bd56;
  position: relative;
}

.smile:before,.smile:after{
      content: "";
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -7px;
    height: 15px;
    background: 
    radial-gradient(circle at center,#42bd56 15%,transparent 16%) 43px 0px/100% 100% no-repeat;
    transform:rotate(-50deg);
    
}
.smile:after {
  background:radial-gradient(circle at center,#42bd56 15%,transparent 16%) -43px 0px/100% 100% no-repeat;
  transform:rotate(50deg);
}


.smile:hover {
  animation: rotateS 1.5s linear;
}

.smile:hover::before {
  animation: rotateL 1.5s linear;
}
.smile:hover::after {
  animation: rotateR 1.5s linear;
}

@keyframes rotateS {
  0% {
    transform: rotate(0deg);
    background-size: auto,auto,auto ,100% 100%, auto;
  }
  50% {
    transform: rotate(360deg);
    background-size: auto,auto,auto, 100% 50%, auto;
  }
  100% {
    transform: rotate(720deg);
    background-size: auto,auto,auto, 100% 100%, auto;
  }
}

@keyframes rotateR {
  0% {
    transform:rotate(50deg);
  }
  30%,70% {
    transform:rotate(-40deg);
  }
  100% {
    transform:rotate(50deg);
  }
}

@keyframes rotateL {
  0% {
    transform:rotate(-50deg);
  }
  30%,70% {
    transform:rotate(-180deg);
  }

  100% {
    transform:rotate(-50deg);
  }
}
Run Code Online (Sandbox Code Playgroud) 
Hover to animate
<div class="smile">
</div>
Run Code Online (Sandbox Code Playgroud)

在这个解决方案中,我将只使用一个元素.我将依赖于具有线性渐变和径向渐变的多个背景,并且还使用伪元素.

微笑

我将使用线性渐变和带背景颜色的径向渐变来创建主要形状,然后我将为圆角添加2个小径向渐变:

.smile {
  margin: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background:radial-gradient(circle at center,#42bd56 10%,transparent 11%) 43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center,#42bd56 10%,transparent 11%) -43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center, #fff 35px, transparent 35px) 0 0/100% 100% no-repeat, 
  linear-gradient(to bottom, #fff 50%, transparent 50%) 0 0/100% 100% no-repeat, #42bd56;
  position: relative;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="smile">
</div>
Run Code Online (Sandbox Code Playgroud)

现在要旋转笑脸,我将使用旋转,也可以改变线性渐变的大小.正如你在GIF中看到的那样,在旋转过程中曲线会增加,所以通过改变线性渐变的大小我会增加它.

在此输入图像描述

你可以注意到用于圆角的小径向渐变在增加之后被隐藏,所以我们也可以考虑同时移动它们但我不会这样做,所以代码不会变得复杂.

这是动画(悬停以激活):

.smile {
  margin: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background:radial-gradient(circle at center,#42bd56 10%,transparent 11%) 43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center,#42bd56 10%,transparent 11%) -43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center, #fff 35px, transparent 35px) 0 0/100% 100% no-repeat, 
  linear-gradient(to bottom, #fff 50%, transparent 50%) 0 0/100% 100% no-repeat, #42bd56;
  position: relative;
}

.smile:hover {
  animation: rotateS 1.5s linear;
}

@keyframes rotateS {
  0% {
    transform: rotate(0deg);
    background-size: auto,auto,auto ,100% 100%, auto;
  }
  50% {
    transform: rotate(360deg);
    background-size: auto,auto,auto, 100% 50%, auto;
  }
  100% {
    transform: rotate(720deg);
    background-size: auto,auto,auto, 100% 100%, auto;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="smile">
</div>
Run Code Online (Sandbox Code Playgroud)

眼睛

对于眼睛,我将使用伪元素和径向渐变来创建圆.我不会简单地创建一个带有border-radius的圆,因为我还需要在与微笑相同的轴上旋转它们.

因此,我们的想法是使它们成为全宽,并使用径向渐变使圆圈位于最右侧/左侧.通过这样做,我可以通过旋转轻松控制它们的位置,并确保它们能够保持旋转度的需要.

在此输入图像描述

.smile {
  margin: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background:radial-gradient(circle at center,#42bd56 10%,transparent 11%) 43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center,#42bd56 10%,transparent 11%) -43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center, #fff 35px, transparent 35px) 0 0/100% 100% no-repeat, 
  linear-gradient(to bottom, #fff 50%, transparent 50%) 0 0/100% 100% no-repeat, #42bd56;
  position: relative;
}

.smile:before,.smile:after{
      content: "";
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -7px;
    height: 15px;
    background: 
    radial-gradient(circle at center,#42bd56 15%,transparent 16%) 43px 0px/100% 100% no-repeat;
    transform:rotate(-50deg);
    
}
.smile:after {
  background:radial-gradient(circle at center,#42bd56 15%,transparent 16%) -43px 0px/100% 100% no-repeat;
  transform:rotate(50deg);
}
Run Code Online (Sandbox Code Playgroud) 
<div class="smile">
</div>
Run Code Online (Sandbox Code Playgroud)

现在对于动画,我将保持第一次旋转也将旋转眼睛,但我会在眼睛上添加一些动画,使它们向相反的方向移动,并创造出微笑的幻觉.因此,我将简单地向眼睛添加负旋转,使它们看起来移动得更慢,从而超越微笑并创建所需的效果:

这里再次是完整的动画:)

.smile {
  margin: 50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background:radial-gradient(circle at center,#42bd56 10%,transparent 11%) 43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center,#42bd56 10%,transparent 11%) -43px 0px/100% 100% no-repeat,
  radial-gradient(circle at center, #fff 35px, transparent 35px) 0 0/100% 100% no-repeat, 
  linear-gradient(to bottom, #fff 50%, transparent 50%) 0 0/100% 100% no-repeat, #42bd56;
  position: relative;
}

.smile:before,.smile:after{
      content: "";
    position: absolute;
    width: 100%;
    top: 50%;
    margin-top: -7px;
    height: 15px;
    background: 
    radial-gradient(circle at center,#42bd56 15%,transparent 16%) 43px 0px/100% 100% no-repeat;
    transform:rotate(-50deg);
    
}
.smile:after {
  background:radial-gradient(circle at center,#42bd56 15%,transparent 16%) -43px 0px/100% 100% no-repeat;
  transform:rotate(50deg);
}


.smile:hover {
  animation: rotateS 1.5s linear;
}

.smile:hover::before {
  animation: rotateL 1.5s linear;
}
.smile:hover::after {
  animation: rotateR 1.5s linear;
}

@keyframes rotateS {
  0% {
    transform: rotate(0deg);
    background-size: auto,auto,auto ,100% 100%, auto;
  }
  50% {
    transform: rotate(360deg);
    background-size: auto,auto,auto, 100% 50%, auto;
  }
  100% {
    transform: rotate(720deg);
    background-size: auto,auto,auto, 100% 100%, auto;
  }
}

@keyframes rotateR {
  0% {
    transform:rotate(50deg);
  }
  30%,70% {
    transform:rotate(-40deg);
  }
  100% {
    transform:rotate(50deg);
  }
}

@keyframes rotateL {
  0% {
    transform:rotate(-50deg);
  }
  30%,70% {
    transform:rotate(-180deg);
  }

  100% {
    transform:rotate(-50deg);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="smile">
</div>
Run Code Online (Sandbox Code Playgroud)

在这个解决方案中,为了简单起见,我使用了线性转换,但它可以更改为任何简易函数,以实现与GIF类似的转换

Fac*_*ini 5

嗯，对于那种动画，从 CSS 调整 SVG 会更受欢迎。

您用来绘制完整 CSS 笑脸的技术依赖于衬里背景来调整线条的“长度”，这在旋转时尝试动画​​（增加长度）会消耗大量资源。

最接近我可以用纯 CSS 调整你的代码，没有 SVG 是这个，希望它有帮助

body {
  background: #fff;
  margin: 50px;
}

.smiley{
  position:relative;
  width: 70px;
  height: 70px;
}

.loader {
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
  width: 70px;
  height: 70px;
  background: linear-gradient(to bottom, #fff 50%, #51cf66 50%);
  animation: rotate 2s infinite;
}

.loader:before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  bottom: 8px;
  border-radius: 50%;
  background: #fff;
}

.dot-left, .dot-right {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #51cf66;
}

.dot-left {
  left: 4px;
  top: 10px;
  animation: dissapearL 2s infinite;
}

.dot-right {
  right: 6px;
  top: 10px;
  animation: dissapearR 2s infinite;
}

@keyframes rotate{
  from{
    transform:rotate(0);
  }
  to{
    transform:rotate(720deg);
  }
}

@keyframes dissapearL{
  0%{
    transform:scale(1);
  }
  10%{
    transform:scale(1);
  }
  15%{
    transform:scale(0);
  }
  45%{
    transform:scale(0);
  }
  50%{
    transform:scale(1);
  }
}

@keyframes dissapearR{
  0%{
    transform:scale(1);
  }
  15%{
    transform:scale(1);
  }
  20%{
    transform:scale(0);
  }
  65%{
    transform:scale(0);
  }
  70%{
    transform:scale(1);
  }
}
Run Code Online (Sandbox Code Playgroud) 
<div class="smiley ">
  <div class="loader">
  </div>
  <div class="dot-left"></div>
  <div class="dot-right"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

web*_*iki 5

虽然这个笑脸动画可以仅使用CSS实现,正如其他人所说,SVG显然是一个更好的选择,主要是出于以下原因:

  • 动画渐变并不是最好的表现
  • 如果不添加非语义标记,在微笑的每一侧进行回合将非常难以实现
  • SVG是一种用于绘制这种形状并为其制作动画的工具.它使它们更易于维护,代码更易于阅读和理解

这就是说,我举了你笑脸动画的例子.
这是看起来像:

CSS和SVG的笑脸动画

这是代码(从codepen demo简化):

svg {
  width:100px;
  height:auto;
  display:block;
  transform:rotateZ(0deg);
  margin:0 auto;
}
.smile, .eyes {
  stroke:teal;
  stroke-width:1.3;
  stroke-linecap:round;
  fill:transparent;
}
svg:hover {animation:rotate 1.2s cubic-bezier(0.65, 0.000, 0.75, 1.000);}
svg:hover .smile{animation: smile 1s cubic-bezier(0.2, 0.000, 0.8, 1.000);}
svg:hover .eyes{animation: eyes 1s cubic-bezier(.7, 0.000, 0.4, 1.000);}

@keyframes rotate { to { transform:rotateZ(720deg); } }
@keyframes smile { 50% { stroke-dasharray:20,5.1327;} }
@keyframes eyes  { 70% { stroke-dasharray:1,0,.5,23.6327;} }
 
 h1 {text-align:center;color:teal;}
Run Code Online (Sandbox Code Playgroud) 
<svg viewbox="0 0 10 10">
  <circle class="smile" cx="5" cy="5" r="4" stroke-dashoffset="-.5" stroke-dasharray="11.5,13.6327" />
  <circle class="eyes" cx="5" cy="5" r="4" stroke-dashoffset="-15.5" stroke-dasharray="0,6.6327,0,17.5" />
</svg>
<h1>Hover me !</h1>
Run Code Online (Sandbox Code Playgroud)

笑脸和动画是如何制作的？

这个笑脸是用两个SVG圆形元素(一个用于眼睛,一个用于微笑)和stroke-dasharray属性来制作眼睛和微笑.

动画:
svg在悬停时使用CSS动画旋转,并且stroke-dasharray属性被动画化以使眼睛在微笑中"消失".微笑的长度也变为大约3/4圈.

缓和功能:
使用贝塞尔曲线缓和功能实现平滑效果.动画时间也进行了调整,以更接近所需的笑脸动画.

  • @TemaniAfif我定义了你在挑战部分的同意,我也很喜欢这些,但这个问题需要一个SVG方法,因为它是"现实世界"的答案,可能对其他人访问这里很有帮助.在svg或gif问题上,两者都有优点和缺点,但现代标准特别是如果需要进行交互则需要SVG. (2认同)

归档时间：

查看次数：

623 次

最近记录：

7 年，2 月 前
相关归档
在OS X上的Firefox中,Bootstrap 3 Styled Select下拉列表看起来很丑陋 69
html输入字段OUTSIDE的形式 49
以未知宽度居中的div 32
如何设置Zurb Foundation图标？ 27
设置一个元素的长度(高度或宽度)减去另一个元素的可变长度,即calc(x-y),其中y未知 27
Bootstrap 4:响应侧边栏菜单到顶部导航栏 25
如果我想控制线之间的高度,那么<br />的替代方案是什么？ 23
媒体查询@ 2x,@ 3x和@ 4x图像 20
CSS背景大小Polyfill？ 17
使用 CSS 动画和背景颜色显示文本 1
难疑归档
如何在ActionScript 3中将"Null"(真正的姓氏!)传递给SOAP Web服务？ 4603
迭代字典的最佳方法是什么？ 2455
当键盘出现时 - 如何开始编辑时,如何让UITextField向上移动？ 1674
如何在Vim中进行不区分大小写的搜索 1579
禁用Chrome缓存以进行网站开发 1563
如何迭代Bash中变量定义的一系列数字？ 1409
如何在git中按名称命名和检索存储？ 1276
你怎么能加速Eclipse？ 1258
对JavaScript对象数组进行排序 1233
我如何修剪空白？ 1035