:doodle {
@size: 100vw 100vmin;
perspective: 10px;
}
:container {
perspective: 10px;
transform-style: preserve-3d;
}
position: absolute;
top: 0;
left: 0;
width: @r(5px, 8px);
height: @r(5px, 8px);
border-radius: 50%;
top: 50%;
left: 50%;
background: hsl(@r(1, 255, 3), @r(70%, 90%), @r(70%, 90%));
animation: move 30s infinite 0s @p(ease-in) alternate;
transform: rotate(@r(180, -360)deg) translate3d(@r(-50, 50, 3)vw, @r(-50, 50, 3)vh, @r(-100, 20)px);
zoom: @rn(.1, 5, 3);
box-shadow: 0 0 @r(5px, 15px) #fff, 0 0 @r(5px, 15px) #fff;
@keyframes move {
100% {
transform: rotate(0) translate(0, 0);
}
}
:doodle {
@size: 100vw 100vmin;
perspective: 10px;
}
:container {
perspective: 10px;
transform-style: preserve-3d;
}
position: absolute;
top: 0;
left: 0;
width: @r(2px, 8px);
height: @r(2px, 8px);
border-radius: 50%;
top: 50%;
left: 50%;
background: hsl(@r(1, 255, 3), @r(50%, 90%), @r(50%, 90%));
animation: move 10s infinite @r(-10, 0)s @p(linear, ease-in, ease-in-out) alternate;
transform: scale(@r(1, 10, 3)) translate3d(@r(-50, 50, 3)vw, @r(-50, 50, 3)vh, @r(-100, 20)px);
zoom: @rn(.1, 5, 3);
box-shadow: 0 0 5px #fff, 0 0 8px #fff;
@keyframes move {
100% {
transform: rotate(0) translate(0, 0);
}
}
本效果使用jQuery插件库创建。