如何将HTML + CSS动画转换为纯CSS？ [英] How to convert html+css animation to pure css?

问题描述

 < style type ='text / css'> @ -webkit关键帧uil-default-anim {0％{opacity：1} 100％{opacity：0}} @keyframes uil-default-anim {0％{opacity：1} 100％{opacity：0}} .uil -default-css> div：nth-​​type-type（1）{ -  webkit-animation：uil-default-anim 1s线性无限;动画：uil-default-anim 1s线性无限; -webkit-animation-delay：-0.5s;动画延迟：-0.5s;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​of-type（2）{ -  webkit-animation：uil-default-anim 1s线性无限;动画：uil-default-anim 1s线性无限; -webkit-animation-delay：-0.4166666666666667s;动画延迟：-0.4166666666666667s;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​type-type（3）{ -  webkit-animation：uil-default-anim 1s线性无限; animation：uil-default-anim 1s线性无限; -webkit-animation-delay：-0.33333333333333337s;动画延迟：-0.33333333333333337s;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​of-type（4）{ -  webkit-animation：uil-default-anim 1s线性无限;动画：uil-default-anim 1s线性无限; -webkit-animation-delay：-0.25s;动画延迟：-0.25s;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​type-type（5）{ -  webkit-animation：uil-default-anim 1s线性无限;动画：uil-default-anim 1s线性无限; -webkit-animation-delay：-0.16666666666666669s;动画延迟：-0.16666666666666669s;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​type-type（6）{ -  webkit-animation：uil-default-anim 1s线性无限;动画：uil-default-anim 1s线性无限; -webkit-animation-delay：-0.08333333333333331s;动画延迟：-0.08333333333333331s;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​of-type（7）{ -  webkit-animation：uil-default-anim 1s线性无限; animation：uil-default-anim 1s线性无限; -webkit-animation-delay：0s; animation-delay：0s ;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​type-type（8）{ -  webkit-animation：uil-default-anim 1s线性无限; animation：uil-default-anim 1s线性无限; -webkit-animation-delay：0.08333333333333337s; animation-delay： 0.08333333333333337s;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​type-type（9）{ -  webkit-animation：uil-default-anim 1s线性无限; animation：uil-default-anim 1s线性无限; -webkit-animation-delay：0.16666666666666663s; animation-delay： uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​type-type（10）{ -  webkit-animation：uil-default-anim 1s线性无限; animation：uil-default-anim 1s线性无限; -webkit-animation-delay：0.25s; animation-delay： }; uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​type-type（11）{ -  webkit-animation：uil-default-anim 1s线性无限; animation：uil-default-anim 1s线性无限; -webkit-animation-delay：0.33333333333333337s; animation-delay： 0.33333333333333337s;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}。uil-default-css> div：nth-​​type-type（12）{ -  webkit-animation：uil-default-anim 1s线性无限; animation：uil-default-anim 1s线性无限; -webkit-animation-delay：0.41666666666666663s; animation-delay： 0.41666666666666663s;}。uil-default-css {position：relative; background：none; width：200px; height：200px;}< / style>< div class ='uil-default-css'style =' -  webkit （0deg）translate（0，0）转换：scale（0.6）'>< div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff; -webkit-transform： -60px）; transform：rotate（0deg）translate（0，-60px）; border-radius：10px; position：absolute;'>< / div>< div style ='top：80px; left：93px;宽度：14px;高度：40px;背景：＃00b2ff; -webkit-transform：rotate（30deg）translate（0，-60px）; transform：rotate（30deg）translate（0，-60px）; border-radius：10px; position：absolute;'>< / div>< div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff; -webkit-transform：rotate（60deg）translate 0，-60px）; transform：rotate（60deg）translate（0， -60px）; border-radius：10px; position：absolute;'>< / div>< div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff;  - webkit-transform：rotate（90deg）translate（0，-60px）; transform：rotate（90deg）translate（0，-60px）; border-radius：10px; position：absolute;'>< / div>< div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff; -webkit-transform：rotate（120deg）translate（0，-60px）; transform：rotate（120deg）translate（ 0，-60px）; border-radius：10px; position：absolute;'>< / div>< div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff ; -webkit-transform：rotate（150deg）translate（0，-60px）; transform：rotate（150deg）translate（0，-60px）; border-radius：10px; position：absolute;'>< / div> < div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff; -webkit-transform：rotate（180deg）translate（0，-60px）; transform：rotate（180deg） translate（0，-60px）; border-radius：10px; position：absolute;'>< / div>< div style ='to p：80px; left：93px; width：14px; height：40px; background：＃00b2ff; -webkit-transform：rotate（210deg）translate（0，-60px）; transform：rotate（210deg）translate（0，-60px ）; border-radius：10px; position：absolute;'>< / div>< div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff; -webkit- transform：rotation（240deg）translate（0，-60px）; transform：rotate（240deg）translate（0，-60px）; border-radius：10px; position：absolute;'>< / div>< div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff; -webkit-transform：rotate（270deg）translate（0，-60px）; transform：rotate（270deg）translate（0， -60px）; border-radius：10px; position：absolute;'>< / div>< div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff;  - webkit-transform：rotate（300deg）translate（0，-60px）; transform：rotate（300deg）translate（0，-60px）; border-radius：10px; position：absolute;'>< / div>< div style ='top：80px; left：93px; width：14px; height：40px; background：＃00b2ff; -webkit-transform：rot （330deg）translate（0，-60px）; transform：rotate（330deg）translate（0，-60px）; border-radius：10px; position：absolute;'>< / div>< / div> 
  

但是我知道在页面元素加载时我需要使用这个微调。我找到了一个很好的示例： http://codepen.io/MattIn4D/pen/LiKFC / p>

感谢您的建议！

解决方案

您只能使用第二个CSS改为链接。你在问怎么把它整合到你的页面中？如果是这样，请将下面的CSS复制到您的样式表中，并删除问题中提到的< div> 作为当前微调器，并用下面的HTML替换它。

查看更新的jsfiddle： https://jsfiddle.net/bxc227dd/2 /

HTML：

 < div class = 加载 的载量&安培;＃8230;< / DIV> 
  

CSS：

  / * Absolute Center Spinner * / 
 .loading {
 position：fixed; 
 z-index：999; 
身高：2em; 
 width：2em; 
 overflow：show; 
 margin：auto; 
 top：0; 
剩下：0; 
 bottom：0; 
 right：0; 
} 
 
 / *透明覆盖图* / 
 .loading：之前{
 content：''; 
 display：block; 
位置：固定; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 background-color：rgba（0,0,0,0.3）; 
 $ * b 
 / *：not（：required）隐藏这些规则，从IE9及以下* / 
 .loading：not（：required）{
 / * hide loading ...文本* / 
字体：0/0 a; 
颜色：透明; 
 text-shadow：none; 
 background-color：transparent; 
 border：0; 
} 
 
 .loading：not（：required）：after {
 content：''; 
 display：block; 
 font-size：10px; 
 width：1em; 
身高：1em; 
 margin-top：-0.5em; 
 -webkit-animation：微调器1500ms无限线性; 
 -moz-animation：微调器1500ms无限线性; 
 -ms-animation：spinner 1500ms无限线性; 
 -o-animation：spinner 1500ms无限线性; 
动画：微调器1500ms无限线性; 
 border-radius：0.5em; 
 -webkit-box-shadow：rgba（0,0,0,0.75）1.5em 0 0 0，rgba（0,0,0,0.75）1.1em 1.1em 0 0，rgba（0，0， 0,0.75）0 1.5em 0 0，rgba（0,0,0,0.75）-1.1em 1.1em 0 0，rgba（0,0,0,0.5）-1.5em 0 0 0，rgba（0,0 ，0,0.5）-1.1em -1.1em 0 0，rgba（0,0,0,0.75）0 -1.5em 0 0，rgba（0,0,0,0.75）1.1em -1.1em 0 0; 
 box-shadow：rgba（0，0，0，0.75）1.5em 0 0 0，rgba（0,0,0,0.75）1.1em 1.1em 0 0，rgba（0,0,0,0.75 ）0 1.5em 0 0，rgba（0,0,0,0.75）-1.1em 1.1em 0 0，rgba（0,0,0,0.75）-1.5em 0 0 0，rgba（0,0,0,0,0） 0.75）-1.1em -1.1em 0 0，rgba（0,0,0,0.75）0 -1.5em 0 0，rgba（0,0,0,0.75）1.1em -1.1em 0 0; 
} 
 
 / *动画* / 
 
 @ -webkit-keyframes微调框{b $ b 0％{
 -webkit-transform：rotate （0deg）; 
 -moz-transform：rotate（0deg）; 
 -ms-transform：rotate（0deg）; 
 -o-transform：rotate（0deg）; 
 transform：rotate（0deg）; 
} 
 100％{
 -webkit-transform：rotate（360deg）; 
 -moz-transform：rotate（360deg）; 
 -ms-transform：rotate（360deg）; 
 -o-transform：rotate（360deg）; 
 transform：rotate（360deg）; 
} 
} 
 @ -moz-keyframes spinner {
 0％{
 -webkit-transform：rotate（0deg）; 
 -moz-transform：rotate（0deg）; 
 -ms-transform：rotate（0deg）; 
 -o-transform：rotate（0deg）; 
 transform：rotate（0deg）; 
} 
 100％{
 -webkit-transform：rotate（360deg）; 
 -moz-transform：rotate（360deg）; 
 -ms-transform：rotate（360deg）; 
 -o-transform：rotate（360deg）; 
 transform：rotate（360deg）; 
 
 
 @ -o-keyframes spinner {
 0％{
 -webkit-transform：rotate（0deg）; 
 -moz-transform：rotate（0deg）; 
 -ms-transform：rotate（0deg）; 
 -o-transform：rotate（0deg）; 
 transform：rotate（0deg）; 
} 
 100％{
 -webkit-transform：rotate（360deg）; 
 -moz-transform：rotate（360deg）; 
 -ms-transform：rotate（360deg）; 
 -o-transform：rotate（360deg）; 
 transform：rotate（360deg）; 
 
 
 @keyframes spinner {
 0％{
 -webkit-transform：rotate（0deg）; 
 -moz-transform：rotate（0deg）; 
 -ms-transform：rotate（0deg）; 
 -o-transform：rotate（0deg）; 
 transform：rotate（0deg）; 
} 
 100％{
 -webkit-transform：rotate（360deg）; 
 -moz-transform：rotate（360deg）; 
 -ms-transform：rotate（360deg）; 
 -o-transform：rotate（360deg）; 
 transform：rotate（360deg）; 
} 
} 
  

Currently to display a spinner I use this code:

<style type='text/css'>@-webkit-keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }@keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }.uil-default-css > div:nth-of-type(1){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(2){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.4166666666666667s;animation-delay: -0.4166666666666667s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(3){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.33333333333333337s;animation-delay: -0.33333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(4){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.25s;animation-delay: -0.25s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(5){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.16666666666666669s;animation-delay: -0.16666666666666669s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(6){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.08333333333333331s;animation-delay: -0.08333333333333331s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(7){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0s;animation-delay: 0s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(8){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.08333333333333337s;animation-delay: 0.08333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(9){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.16666666666666663s;animation-delay: 0.16666666666666663s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(10){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(11){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.33333333333333337s;animation-delay: 0.33333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(12){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.41666666666666663s;animation-delay: 0.41666666666666663s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}</style><div class='uil-default-css' style='-webkit-transform:scale(0.6)'><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(60deg) translate(0,-60px);transform:rotate(60deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(120deg) translate(0,-60px);transform:rotate(120deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(150deg) translate(0,-60px);transform:rotate(150deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(210deg) translate(0,-60px);transform:rotate(210deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(240deg) translate(0,-60px);transform:rotate(240deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(300deg) translate(0,-60px);transform:rotate(300deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#00b2ff;-webkit-transform:rotate(330deg) translate(0,-60px);transform:rotate(330deg) translate(0,-60px);border-radius:10px;position:absolute;'></div></div>

But know I need to use this spinner while page elements loading. I found a good sample: http://codepen.io/MattIn4D/pen/LiKFC

The question is how to transform my blue spinner from css and html code into pure css code (let's say, how can I change spinner from codepen sample to my blue spinner) ?

Thank's for advice!

解决方案

You can use the second CSS only link instead. Are you asking how to integrate this into your page? If so, copy the below css into your stylesheet and remove the <div> mentioned in your question as the current spinner, replacing it with the HTML below.

See updated jsfiddle:https://jsfiddle.net/bxc227dd/2/

HTML:

<div class="loading">Loading&#8230;</div>

CSS:

/* Absolute Center Spinner */
.loading {
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.3);
}

/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}

/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

这篇关于如何将HTML + CSS动画转换为纯CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！