css动画图标调整大小 [英] css animated icon resize

查看：131
本文介绍了css动画图标调整大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在css中使用$ 

  [http://codepen.io/jlong​​/pen/KBhDf] [1 ]

在上面第三行的链接$ heartbeat-size：10px;我想知道如何在样式表中使用这个元素。 scss 在您的笔中：



  @  -  webkit-keyframes heartbeat {0％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; } 14％{-moz-transform：rotate（45deg）scale（1.3）; -ms-transform：rotate（45deg）scale（1.3）; -webkit-transform：rotate（45deg）scale（1.3）; transform：旋转（45deg）scale（1.3）; } 28％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; } 42％{-moz-transform：rotate（45deg）scale（1.3）; -ms-transform：rotate（45deg）scale（1.3）; -webkit-transform：rotate（45deg）scale（1.3）; transform：旋转（45deg）scale（1.3）; } 70％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; }} @  -  moz-keyframes heartbeat {0％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; } 14％{-moz-transform：rotate（45deg）scale（1.3）; -ms-transform：rotate（45deg）scale（1.3）; -webkit-transform：rotate（45deg）scale（1.3）; transform：旋转（45deg）scale（1.3）; } 28％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; } 42％{-moz-transform：rotate（45deg）scale（1.3）; -ms-transform：rotate（45deg）scale（1.3）; -webkit-transform：rotate（45deg）scale（1.3）; transform：旋转（45deg）scale（1.3）; } 70％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; }} @  -  o-keyframes heartbeat {0％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; } 14％{-moz-transform：rotate（45deg）scale（1.3）; -ms-transform：rotate（45deg）scale（1.3）; -webkit-transform：rotate（45deg）scale（1.3）; transform：旋转（45deg）scale（1.3）; } 28％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; } 42％{-moz-transform：rotate（45deg）scale（1.3）; -ms-transform：rotate（45deg）scale（1.3）; -webkit-transform：rotate（45deg）scale（1.3）; transform：旋转（45deg）scale（1.3）; } 70％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; }} @ keyframes heartbeat {0％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; } 14％{-moz-transform：rotate（45deg）scale（1.3）; -ms-transform：rotate（45deg）scale（1.3）; -webkit-transform：rotate（45deg）scale（1.3）; transform：旋转（45deg）scale（1.3）; } 28％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; } 42％{-moz-transform：rotate（45deg）scale（1.3）; -ms-transform：rotate（45deg）scale（1.3）; -webkit-transform：rotate（45deg）scale（1.3）; transform：旋转（45deg）scale（1.3）; } 70％{-moz-transform：rotate（45deg）scale（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; }} body {text-align：center; padding：50px;} / *旧版本的IE * / heartbeat的样式{font-family：sans-serif; font-weight：100;} / *：not（：必需）从IE9和以下隐藏此规则* /。heartbeat：not（：required）{-webkit-animation：heartbeat 1300ms ease 0s infinite normal; -khtml-animation：心跳1300ms缓解0s无限正常; -moz动画：心跳1300ms缓解0s无限正常; -ms-animation：heartbeat 1300ms缓解0s无限正常; -o-animation：心跳1300ms缓解0s无限正常;动画：心跳1300ms缓解0s无限正常; display：inline-block;位置：相对; overflow：hidden; text-indent：-9999px; width：36px; height：36px; -moz-transform：旋转（45deg）刻度（1）; -ms-transform：rotate（45deg）scale（1）; -webkit-transform：rotate（45deg）scale（1）; transform：rotate（45deg）scale（1）; -moz-转化起点：50％50％; -ms-transform-origin：50％50％; -webkit-transform-origin：50％50％;变换起源：50％50％;}。心跳：不（：必需）：after，.heartbeat：not（：required）：before {position：absolute; content：; background：＃e87;}。heartbeat：not（：required）：before {-moz-border-radius-topleft：12px; -webkit-border-top-left-radius：12px; border-top-left-radius：12px; -moz-border-radius-bottomleft：12px; -webkit-border-bottom-left-radius：12px; border-bottom-left-radius：12px; top：12px; left：0; width：36px; height：24px;}。heartbeat：not（：required）：after {-moz-border-radius-topleft：12px; -webkit-border-top-left-radius：12px; border-top-left-radius：12px; -moz-border-radius-topright：12px; -webkit-border-top-right-radius：12px; border-top-right-radius：12px; top：0; left：12px; width：24px; height：12px;}  

 < span class =heartbeat >正在载入...< / span>





要了解原理...



使用 CSS 中的变量不可能在现在，不太可能在任何时候很快。



这只能使用CSS预处理器，例如 少 或 sass 。



jsfiddle 和 codepen 允许您使用<$ c面板中的<$ c> scss （sass），并正确输出处理的 CSS



sass.js 是一个允许您在< link>中使用 .sass

$



$

很可能主要浏览器将很快能够处理 .scss ， .sass 或 .less 文件，并且已经可以使用浏览器扩展。



CSS 将支持变量。


how you use $ in css 

[http://codepen.io/jlong/pen/KBhDf][1]

in the above mentioned link on the 3rd line $heartbeat-size: 10px; I wanted to know how to use this element in the style sheet.

解决方案

To answer your question, here is the processed CSS result of the scss in your pen: 

@-webkit-keyframes heartbeat {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
@-moz-keyframes heartbeat {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
@-o-keyframes heartbeat {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
@keyframes heartbeat {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
body {
  text-align: center;
  padding: 50px;
}

/* Styles for old versions of IE */
.heartbeat {
  font-family: sans-serif;
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.heartbeat:not(:required) {
  -webkit-animation: heartbeat 1300ms ease 0s infinite normal;
  -khtml-animation: heartbeat 1300ms ease 0s infinite normal;
  -moz-animation: heartbeat 1300ms ease 0s infinite normal;
  -ms-animation: heartbeat 1300ms ease 0s infinite normal;
  -o-animation: heartbeat 1300ms ease 0s infinite normal;
  animation: heartbeat 1300ms ease 0s infinite normal;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  width: 36px;
  height: 36px;
  -moz-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.heartbeat:not(:required):after, .heartbeat:not(:required):before {
  position: absolute;
  content: "";
  background: #e87;
}
.heartbeat:not(:required):before {
  -moz-border-radius-topleft: 12px;
  -webkit-border-top-left-radius: 12px;
  border-top-left-radius: 12px;
  -moz-border-radius-bottomleft: 12px;
  -webkit-border-bottom-left-radius: 12px;
  border-bottom-left-radius: 12px;
  top: 12px;
  left: 0;
  width: 36px;
  height: 24px;
}
.heartbeat:not(:required):after {
  -moz-border-radius-topleft: 12px;
  -webkit-border-top-left-radius: 12px;
  border-top-left-radius: 12px;
  -moz-border-radius-topright: 12px;
  -webkit-border-top-right-radius: 12px;
  border-top-right-radius: 12px;
  top: 0;
  left: 12px;
  width: 24px;
  height: 12px;
}

<span class="heartbeat">Loading...</span>

To understand the principle...

Using variables in CSS is not possible at the moment and is unlikely to be possible anytime soon.

This is only available using CSS pre-processors, such as less or sass.

jsfiddle and codepen allow you to use scss (sass) in the CSS panel and correctly output the processed CSS when rendering.

sass.js is a library that allows you to use .sass files in <link> tags and processes them into valid CSS at load time.

It is likely that major browsers will soon be capable of processing .scss, .sass or .less files natively and it is already possible by using browser extensions.

This, however, does not mean CSS will ever support variables.

这篇关于css动画图标调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆