纯css折叠扇折叠伸展动画效果
代码语言:html
所属分类:动画
代码描述:纯css折叠扇折叠伸展动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Shojumaru"); body { background-color: #D3A87A; text-align: center; font-size: 100%; font-family: Arial; line-height: 1.2; } h1 { text-align: center; text-shadow: 0 0 6px rgba(255, 255, 255, 0.7); font-size: 8vmin; font-family: 'Shojumaru', cursive; } .wrapper { position: relative; -webkit-perspective: 1600px; perspective: 1600px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; display: inline-block; margin: 5px auto; } .fan { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; width: 400px; height: 200px; background-color: rgba(255, 0, 0, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation: wave 6s ease infinite; animation: wave 6s ease infinite; } .segment { overflow: hidden; position: absolute; display: inline-block; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; bottom: 0; left: 184px; -webkit-animation: none 6s ease infinite; animation: none 6s ease infinite; } .top { position: relative; width: 32px; height: 8px; } .segment.leaf .top { -webkit-animation: scale 6s ease infinite; animation: scale 6s ease infinite; } .top:before, .top:after { content: ""; position: absolute; border-style: solid; } .top:before { left: 0; border-width: 8px 0 0 16px; border-color: transparent transparent transparent #ee0000; } .top:after { right: 0; border-width: 0 0 8px 16px; border-color: transparent transparent #aa0000 transparent; } .bottom { position: relative; width: 32px; height: 192px; } .segment.leaf .bottom { -webkit-animation: scale 6s ease infinite; animation: scale 6s ease infinite; } .bottom:before, .bottom:after { content: ""; position: absolute; border-style: solid; } .bottom:before { left: 0; border-width: 0 16px 192px 0; border-color: transparent #ee0000 transparent transparent; } .bottom:after { right: 0; border-width: 192px 16px 0 0; border-color: #aa0000 transparent transparent transparent; } .segment.base .top:before, .segment.base .top:after { border-color: #536007; } .segment.base .bottom:before { border-color: transparent #536007 transparent transparent; } .segment.base .bottom:after { border-color: #536007 transparent transparent transparent; } @-webkit-keyframes wave { 0%, 39%, 71%, 100% { -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } 40%, 46%, 52%, 58%, 63%, 69% { -webkit-transform: rotateX(0deg) rotateY(10deg); transform: rotateX(0deg) rotateY(10deg); } 43%, 49%, 55%, 61%, 66% { -webkit-transform: rotateX(30deg) rotateY(10deg); transform: rotateX(30deg) rotateY(10deg); } } @keyframes wave { 0%, 39%, 71%, 100% { -webkit-transform: rotateX(0deg) rotateY(0deg); transform: rotateX(0deg) rotateY(0deg); } 40%, 46%, 52%, 58%, 63%, 69% { -webkit-transform: rotateX(0deg) rotateY(10deg); transform: rotateX(0deg) rotateY(10deg); } 43%, 49%, 55%, 61%, 66% { -webkit-transform: rotateX(30deg) rotateY(10deg); transform: rotateX(30deg) rotateY(10deg); } } @-webkit-keyframes scale { 0%, 20%, 90%, 100% { -webkit-transform: scaleX(0.1); transform: scaleX(0.1); } 40%, 70% { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes scale { 0%, 20%, 90%, 100% { -webkit-transform: scaleX(0.1); transform: scaleX(0.1); } 40%, 70% { -webkit-transform: scaleX(1); transform: scaleX(1); } } .segment:nth-of-type(1) { -webkit-transform: rotate(81deg); transform: rotate(81deg); -webkit-animation-name: fold1; animation-name: fold1; } @-webkit-keyframes fold1 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(81deg); transform: rotate(81deg); } } @keyframes fold1 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(81deg); transform: rotate(81deg); } } .segment:nth-of-type(2) { -webkit-transform: rotate(72deg); transform: rotate(72deg); -webkit-animation-name: fold2; animation-name: fold2; } @-webkit-keyframes fold2 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(72deg); transform: rotate(72deg); } } @keyframes fold2 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(72deg); transform: rotate(72deg); } } .segment:nth-of-type(3) { -webkit-transform: rotate(63deg); transform: rotate(63deg); -webkit-animation-name: fold3; animation-name: fold3; } @-webkit-keyframes fold3 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(63deg); transform: rotate(63deg); } } @keyframes fold3 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(63deg); transform: rotate(63deg); } } .segment:nth-of-type(4) { -webkit-transform: rotate(54deg); transform: rotate(54deg); -webkit-animation-name: fold4; animation-name: fold4; } @-webkit-keyframes fold4 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(54deg); transform: rotate(54deg); } } @keyframes fold4 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(54deg); transform: rotate(54deg); } } .segment:nth-of-type(5) { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation-name: fold5; animation-name: fold5; } @-webkit-keyframes fold5 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(45deg); transform: rotate(45deg); } } @keyframes fold5 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(45deg); transform: rotate(45deg); } } .segment:nth-of-type(6) { -webkit-transform: rotate(36deg); transform: rotate(36deg); -webkit-animation-name: fold6; animation-name: fold6; } @-webkit-keyframes fold6 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(36deg); transform: rotate(36deg); } } @keyframes fold6 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(36deg); transform: rotate(36deg); } } .segment:nth-of-type(7) { -webkit-transform: rotate(27deg); transform: rotate(27deg); -webkit-animation-name: fold7; animation-name: fold7; } @-webkit-keyframes fold7 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(27deg); transform: rotate(27deg); } } @keyframes fold7 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(27deg); transform: rotate(27deg); } } .segment:nth-of-type(8) { -webkit-transform: rotate(18deg); transform: rotate(18deg); -webkit-animation-name: fold8; animation-name: fold8; } @-webkit-keyframes fold8 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(18deg); transform: rotate(18deg); } } @keyframes fold8 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(18deg); transform: rotate(18deg); } } .segment:nth-of-type(9) { -webkit-transform: rotate(9deg); transform: rotate(9deg); -webkit-animation-name: fold9; animation-name: fold9; } @-webkit-keyframes fold9 { 0%, 20%, 90%, 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 40%, 70% { -webkit-transform: rotate(9deg); transform: rotate(9deg); } } @keyframes fold9 { 0%, 20%, 90%, 100% { -webkit-transform: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0