gsap实现开机按钮点击动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现开机按钮点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @font-face { font-family: "BCSansHeading"; src: url("//repo.bfw.wiki/bfwrepo/font/BritishCouncilSansW05-Headline.woff2") format("woff"); } :root { --width: 237px; --height: 237px; --indigo: #23085a; } html, body{ background-color: var(--indigo); display: flex; align-items: center; justify-content: center; min-height:100%; } .switch { position: relative; height: 237px; width: 237px; cursor:pointer; } .content, .rotate, .shadow { position: absolute; width: var(--width); height: var(--height); top: 0; left: 0; } .content { color: var(--indigo); text-align: center; font-weight: bold; font-size: 100px; display: flex; flex-direction: column; gap: 0px; align-items: center; justify-content: center; line-height: 0.9; font-family: BCSansHeading, sans-serif; padding-top:10px; } .content span { font-size: 35px; } .rotate { background-color: #FFE300; border-radius: 200px 200px 200px 40px; } .shadow { border-radius: 200px 200px 200px 40px; opacity:0; } .shadow-1 { background: rgba(211, 184, 255, 0.5); } .shadow-2 { background: rgba(255, 160, 215, 0.6); transform: rotate(15deg); } .shadow-3 { background: rgba(255, 186, 184, 0.8); transform: rotate(30deg); } .shadow-4{ background: rgba(255, 194, 136, 0.7); transform: rotate(45deg); } .shadow-5{ background: rgba(228, 184, 0, 0.7); transform: rotate(60deg); } .shadow-6{ background: rgba(255, 227, 0, 0.7); transform: rotate(75deg); } /* ---- */ .circles { position: relative; width: 700.88px; height: 673.21px; background-color: #23085a; } .circle-1 { position: absolute; width: 571.77px; height: 571.47px; left: 100px; top: 77px; animation: turn 11s linear 0s infinite; transform-origin: 52% 51%; } .circle-2 { position: absolute; width: 656.85px; height: 656.85px; left: 16px; top: 0; animation: turn 10s linear 0s infinite; transform-origin: 52% 51%; } .circle-3 { position: absolute; width: 656.25px; height: 656.85px; left: 0px; top: 44px; animation: turn 12s linear 0s infinite; transform-origin: 55% 50%; } @keyframes turn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body > " <div id="switch" class="switch"> <div class="shadow shadow-1"></div> <div class="shadow shadow-2"></div> <div class="shadow shadow-3"></div>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0