通过CSS变换,保持偏移框 – 阴影在旋转过程中一致的方向是简单的.
这种方法依赖于
transform origin与转换一起移动的事实.这意味着当在同一个元素上设置几个变换时,每个变换的坐标系根据以前的变化而变化.
在以下示例中,蓝色元素是伪元素,阴影是div元素:
div {
width: 40px; height: 40px;
margin: 40px;
box-shadow: 0px 0px 10px 5px #000;
animation: spinShadow 2s infinite;
background-color: #000;
}
@keyframes spinShadow {
to { transform: rotate(360deg); }
}
div:before {
content: '';
position: absolute;
left:-5px; top:-5px;
width: 50px; height: 50px;
transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
animation:inherit;
animation-name: spinElt;
background-color: #0bb;
}
@keyframes spinElt {
to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}
对伪元素的转换属性的说明(有关步骤的说明,请参阅以下代码段):
transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg)
旋转(-360deg)计数父对象的旋转,使伪元素静态.
> translate(-10px,-10px)将伪元素翻译成阴影偏移
旋转(360度),伪元素沿与父方向相同的方向旋转
div {
width: 40px; height: 40px;
margin: 40px;
box-shadow: 0px 0px 10px 5px #000;
animation: spinShadow 2s infinite;
background-color: #000;
}
@keyframes spinShadow {
to { transform: rotate(360deg); }
}
div:before {
content: '';
position: absolute;
left:-5px; top:-5px;
width: 50px; height: 50px;
animation:inherit;
background-color: #0bb;
}
#first:before{
transform: rotate(0deg);
animation-name: first;
}
@keyframes first {
to { transform: rotate(-360deg); }
}
#second:before{
transform: rotate(0deg) translate(-10px, -10px);
animation-name: second;
}
@keyframes second {
to { transform: rotate(-360deg) translate(-10px, -10px); }
}
#complete:before{
transform: rotate(0deg) translate(-10px, -10px) rotate(0deg);
animation-name: complete;
}
@keyframes complete {
to { transform: rotate(-360deg) translate(-10px, -10px) rotate(360deg); }
}
- Counter rotate:
- Translate :
- Rotate: