CSS：动画滚动按钮

Posted 2023-03-06

【中文标题】CSS：动画滚动按钮

【英文标题】：CSS: Animating scroll button

【发布时间】：2014-11-11 04:34:28

【问题描述】：

我有这个图标 (png)

我想知道如何只使用 html 和 CSS 和动画来创建它，所以这 3 个四边形不断改变它们的不透明度（一个接一个），所以它看起来有点像一个加载器。

有什么想法吗？ 谢谢！

【问题讨论】：

您应该查看关键帧：w3schools.com/css/css3_animations.asp

可能创建这种效果所需的 css3 代码比在 base64 中将小型动画 gif 编码为 data-uri 更重 :)

可以用 css 完成...但我同意 Fabrizio，当单个 gif 工作相同（并且可以在旧浏览器中看到）时，工作量太大了

【参考方案1】：

查看http://jsfiddle.net/jo3d9f27/

HTML

 <div id="down"></div>
 <div id="down1"></div>
 <div id="down2"></div>

CSS

#down 
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;
opacity:0;

border-top: 20px solid #f00;

#down1 
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;

border-top: 20px solid #f00;

#down2 
width: 0; 
height: 0; 
border-left: 20px solid transparent;
border-right: 20px solid transparent;

border-top: 20px solid #f00;


@-webkit-keyframes anim
fromopacity:0;
toopacity:1;


#down
-webkit-animation:anim 4s;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count:infinite;
 -webkit-animation-direction:alternate;
 -webkit-animation-timing-function: ease-in-out;


@-webkit-keyframes anim2
fromopacity:0;
toopacity:1;


#down1
-webkit-animation:anim2 4s;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;
 

@-webkit-keyframes anim3
fromopacity:0;
toopacity:1;


#down2
-webkit-animation:anim 4s;
-webkit-animation-delay:3s;    
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-timing-function: ease-in-out;

【讨论】：

浏览器不支持webkit时的问题

@Synoon 你的浏览器是什么？？

ie8 -.- 但是今天 webkit 应该可以在我认为的所有浏览器上运行，但是你是如何包含图片的？我没有看到任何图片背景代码之类的......

@Synoon 这不是图片，那是三个三角形 div

我用非常好奇想要的形状升级你的小提琴：jsfiddle.net/jo3d9f27/2

【参考方案2】：

演示

http://jsfiddle.net/rijosh/u5r5vrk2/2/

HTML

<div id="mouse-scroll" class="ng-scope" style="display: block;">
  <div class="mouse"><div class="wheel"></div></div>
  <div><span class="unu"></span> <span class="doi"></span> <span class="trei"></span> </div>
</div>

CSS

#mouse-scroll position:fixed;margin:auto;left:50%;bottom:80px;-webkit-transform:translateX(-50%);z-index:9999
#mouse-scroll span display:block;width:5px;height:5px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);border-right:2px solid #dddddd;border-bottom:2px solid #dddddd;margin:0 0 3px 5px
#mouse-scroll .unu margin-top:6px
#mouse-scroll .unu, #mouse-scroll .doi, #mouse-scroll .trei -webkit-animation:mouse-scroll 1s infinite;-moz-animation:mouse-scroll 1s infinite
#mouse-scroll .unu -webkit-animation-delay:.1s;-moz-animation-delay:.1s;-webkit-animation-direction:alternate
#mouse-scroll .doi -webkit-animation-delay:.2s;-moz-animation-delay:.2s;-webkit-animation-direction:alternate
#mouse-scroll .trei -webkit-animation-delay:.3s;-moz-animation-delay:.3s;-webkit-animation-direction:alternate
#mouse-scroll .mouse height:21px;width:14px;border-radius:10px;-webkit-transform:none;-ms-transform:none;transform:none;border:2px solid #dddddd;top:170px
#mouse-scroll .wheel height:5px;width:2px;display:block;margin:5px auto;background:#dddddd;position:relative
#mouse-scroll .wheel -webkit-animation:mouse-wheel 1.2s ease infinite;-moz-animation:mouse-wheel 1.2s ease infinite
@-webkit-keyframes mouse-wheel 
  0% opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)
  100% opacity:0;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)


@-webkit-keyframes mouse-wheel 
  0% opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)
  100% opacity:0;-webkit-transform:translateY(6px);-ms-transform:translateY(6px);transform:translateY(6px)