.box
::before
{
content
:
''
;
height
:
8px
;
width
:
50px
;
background
:
#000
;
opacity
: .
2
;
border-radius
:
50%
;
position
: absolute;
top
:
67px
;
left
:
0
;
animation
: shadow .
5s
linear infinite;
.box
::after
{
border-radius
:
5px
;
background
:
#fff
;
animation
: rotate .
5s
linear infinite;
content
:
''
;
position
: absolute;
left
:
0
;
top
:
0
;
width
:
50px
;
height
:
50px
;
@keyframes
shadow {
0%
,
100%
{
transform
:
scaleX
(
1
);}
50%
{
transform
:
scaleX
(
1.2
);}
@keyframes
rotate {
transform
:
translateY
(
0
) ;
25%
{
transform
:
translateY
(
10px
);
50%
{
transform
:
translateY
(
20px
)
scale
(
1.1
,
0.9
);
75%
{
ransform:
translateY
(
10px
) ;
100%
{
transform
:
translateY
(
0
) ;
呼吸效果：
.heart {
animation: breathe .5s linear infinite;
@keyframes breathe {
0%{ transform: scale(.97); }
50%{ transform: scale(1.1); }
100%{ transform: scale(.97); }
复制代码
-
5819
-
yeyan1996
JavaScript
