【问题标题】:CSS: Animating scroll buttonCSS:动画滚动按钮
【发布时间】:2014-11-11 04:34:28
【问题描述】:

我有这个图标 (png)

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

有什么想法吗? 谢谢!

【问题讨论】:

  • 您应该查看关键帧:w3schools.com/css/css3_animations.asp
  • 可能创建这种效果所需的 css3 代码比在 base64 中将小型动画 gif 编码为 data-uri 更重 :)
  • 可以用 css 完成...但我同意 Fabrizio,当单个 gif 工作相同(并且可以在旧浏览器中看到)时,工作量太大了

标签: html css animation scroll


【解决方案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{
from{opacity:0;}
to{opacity: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{
from{opacity:0;}
to{opacity: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{
from{opacity:0;}
to{opacity: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)}
}  

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多