纯DOM+CSS3实现简单的小风车动画(6)

发布时间：2020-03-15 00:26 所属栏目：52 来源：站长网

导读：background:-webkit-gradient(linear,lefttop,leftbottom,from(#B91717),to(#f5f5f5)); background:-webkit-linear-gradient(top,#B91717,#f5f5f5); background:linear-gradient(180deg,#B91717,#f5f5f5); -webkit-

background: -webkit-gradient(linear, left top, left bottom, from(#B91717), to(#f5f5f5));

background: -webkit-linear-gradient(top, #B91717, #f5f5f5);

background: linear-gradient(180deg, #B91717, #f5f5f5);

-webkit-transition: background 2s linear 2s;

transition: background 2s linear 2s;

}

.leaf3 {

border: 0.05rem solid #C6079D;

background-color: rgba(130, 0, 100, 5);

-webkit-transform: rotate(0deg) translate(0);

transform: rotate(0deg) translate(0);

background: -webkit-gradient(linear, left top, left bottom, from(#1CBA9F), to(#f5f5f5));

background: -webkit-linear-gradient(top, #1CBA9F, #f5f5f5);

background: linear-gradient(180deg, #1CBA9F, #f5f5f5);

-webkit-transition: background 2s linear;

transition: background 2s linear;

-webkit-transition: background 2s linear 4s;

transition: background 2s linear 4s;

}

.leaf4 {

border: 0.05rem solid #3A5FD1;

background-color: rgba(230, 100, 100, 5);

-webkit-transform: rotate(-180deg) translate(0);

transform: rotate(-180deg) translate(0);

background: -webkit-gradient(linear, left top, left bottom, from(#335642), to(#f5f5f5));

background: -webkit-linear-gradient(top, #335642, #f5f5f5);

background: linear-gradient(180deg, #335642, #f5f5f5);

-webkit-transition: background 2s linear 6s;

transition: background 2s linear 6s;

}

/* 尾部 */

.windmill-pillar {

-webkit-transform: translateZ(0);

transform: translateZ(0);

width: 3rem;

height: 20rem;

background: #FFF;

-webkit-transform: translateY(-52%);

transform: translateY(-52%);

position: relative;

z-index: -2;

border-radius: 50% 50% 0 0;

-webkit-animation: cd 2s linear infinite;

animation: cd 2s linear infinite;

}

@-webkit-keyframes rotate-windmill {

0% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

@keyframes rotate-windmill {

0% {

-webkit-transform: rotate(0);

transform: rotate(0);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

@-webkit-keyframes cd {

0% {

background: #F5F5F5;

}

50% {

background: #E1CB82;

}

75% {

background: #F1F358;

}

100% {

background: #FFFC00;

}

@keyframes cd {

0% {

background: #F5F5F5;

}

50% {

background: #E1CB82;

}

75% {

background: #F1F358;

}

100% {

background: #FFFC00;

}

</style>

</head>

<body>

（编辑：ASP站长网）