作者热门文章
- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我找到了一个有吸引力的微调器(CSS3,SCSS):http://codepen.io/weaintplastic/pen/qEMZbx .
@for $i from 1 through 6 {
@keyframes preload-show-#{$i}{
from{
transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-hide-#{$i}{
to{
transform: rotateZ(60* $i + deg) rotateY(-90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
@keyframes preload-cycle-#{$i}{
$startIndex: $i*5;
$reverseIndex: (80 - $i*5);
#{$startIndex * 1%}{
transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
#{$startIndex + 5%},
#{$reverseIndex * 1%}{
transform: rotateZ(60* $i + deg) rotateY(0) rotateX(0deg);
border-left-color: #f7484e;
}
#{$reverseIndex + 5%},
100%{
transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0deg);
border-left-color: #9c2f2f;
}
}
}
@keyframes preload-flip{
0%{
transform: rotateY(0deg) rotateZ(-60deg);
}
100%{
transform: rotateY(360deg) rotateZ(-60deg);
}
}
body{
background: #efefef;
}
.preloader{
position: absolute;
top: 50%;
left: 50%;
font-size: 20px;
display: block;
width: 3.75em;
height: 4.25em;
margin-left: -1.875em;
margin-top: -2.125em;
transform-origin: center center;
transform: rotateY(180deg) rotateZ(-60deg);
.slice{
border-top: 1.125em solid transparent;
border-right: none;
border-bottom: 1em solid transparent;
border-left: 1.875em solid #f7484e;
position: absolute;
top: 0px;
left: 50%;
transform-origin: left bottom;
border-radius: 3px 3px 0 0;
}
@for $i from 1 through 6 {
.slice:nth-child(#{$i}) {
transform: rotateZ(60* $i + deg) rotateY(0deg) rotateX(0);
animation: .15s linear .9 - $i*.08s preload-hide-#{$i} both 1;
}
}
&.loading{
animation: 2s preload-flip steps(2) infinite both;
@for $i from 1 through 6 {
.slice:nth-child(#{$i}) {
transform: rotateZ(60* $i + deg) rotateY(90deg) rotateX(0);
animation: 2s preload-cycle-#{$i} linear infinite both;
}
}
}
}
<div class="preloader loading">
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
<span class="slice"></span>
</div>
但是它在动画中间有一个抖动的时刻(故障):六边形的底部向右移动一两个像素。
我拍下了这一刻:youtu.be/_TwDuxME8wc .
我尝试过自己修复它,但我没有足够的技能。你能提示如何修复它吗?谢谢!
最佳答案
您使用了很多 em
测量值,这导致了很多小数像素值。重要的是您只有整数值以避免这些故障。
如果你采用@Nick Barlett 的解决方案并将 .preloader
的字体大小从 20px
更改为 24px
你将摆脱十进制值。看这支笔:http://codepen.io/pstenstrm/pen/mJJpvP
这当然也会使加载程序变得更大,因此您可能希望将 em
值更改为 px
。
关于html - css3微调器上的抽搐动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29768032/
我有一个 View,我希望它可以被拖动,所以我覆盖了它的 onTouchEvent(MotionEvent event) 方法,并且在移动事件中,我重新定位/翻译我的View 基于事件操作的 (x,
这很奇怪,我找不到任何相关信息。 我有一个非常简单的项目(刚刚开始使用 React Native),当我将项目列表放在 ScrollView 中时,我会不断地“抽搐”。以下是该行为的视频:https:
我是一名优秀的程序员,十分优秀!