纯DOM+CSS3实现简单的小风车动画
|
副标题[/!--empirenews.page--]
用CSS3实现了一个小风车的效果，转转转，挺简单。 效果
代码
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title>小风车-转啊转</title> <style type="text/css"> html { font-size: 10px; }
html * { -webkit-box-sizing: border-box; box-sizing: border-box; }
.windmill { width: 25rem; min-height: 30rem; height: auto; margin: 3rem auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /* 头部 */
.windmill-head { height: 20rem; width: 20rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation: rotate-windmill 1s linear infinite; animation: rotate-windmill 1s linear infinite; border-radius: 50%; border: 0.1rem solid #DBE526; -webkit-transition: border-radius 2s linear; transition: border-radius 2s linear; } /* 两片叶子的包裹层 */
.wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; height: 135%; width: 50%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /* 包裹层对称 */
.wrapper1 { -webkit-transform: rotate(-45deg) translate(5rem); transform: rotate(-45deg) translate(5rem); -webkit-transform-origin: right center; transform-origin: right center; }
.wrapper2 { -webkit-transform: rotate(45deg) translate(-5rem); transform: rotate(45deg) translate(-5rem); -webkit-transform-origin: left center; transform-origin: left center; } /* 扇叶的形状及底色 */
.leaf { height: 13rem; width: 5rem; border-radius: 5rem/ 5rem 5rem 20rem 20rem; （编辑：好传媒网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
