纯DOM+CSS3实现简单的小风车动画
|
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> （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号