折纸加载动画
代码语言:html
所属分类:加载滚动
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { background-color: #2c3e50; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } .kinetic { position: relative; height: 80px; width: 80px; } .kinetic::after, .kinetic::before { content: ''; position: absolute; top: 0; left: 0; border: 50px solid transparent; border-bottom-color: #fff; height: 0; width: 0; animation: rotateA 2s linear infinite 0.5s; } .kinetic::before { transform: rotate(90deg); animation: rotateB 2s linear infinite; } @keyframes rotateA { 0%, 25% { transform: rotate(0deg); } 50%, 75%{ transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes rotateB { 0%, 25% { transform: rotate(90deg); } 50%, 75%{ transform: rotate(270deg); } 100% { transform: rotate(450deg); } } /* SOCIAL PANEL CSS */ .social-panel-container { position: fixed; right: 0; bottom: 80px; transform: translateX(100%); transition: transform 0.4s ease-in-out; } .social-panel-container.visible { transform: translateX(-10px); } .social-panel { background-color: #fff; border-radius: 16px; box-shadow: 0 16px 31px -17px rgba(0,31,97,0.6); border: 5px solid #001F61; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'Muli'; position: relative; height: 169px; width: 370px; max-width: calc(100% - 10px); } .social-panel button.close-btn { border: 0; color: #97A5CE; cursor: pointer; font-size: 20px; position: absolute; top: 5px; right: 5px; } .social-panel button.close-btn:focus { outline: none; } .social-panel p { background-color: #001F61; border-radius: 0 0 10px 10px; color: #fff; font-size: 14px; line-height: 18px; padding: 2px 17px 6px; position: absolute; top: 0; left: 50%; margin: 0; transform: translateX(-50%); text-align: center; width: 235px; } .social-panel p i { margin: 0 5px; } .social-panel p a { color: #FF7500; text-decoration: none; } .social-panel h4 { margin: 20px 0; color: #97A5CE; font-family: 'Muli'; font-size: 14px; line-height: 18px; text-transform: uppercase; } .social-panel ul { display: flex; list-style-type: none; padding: 0; margin: 0; } .social-panel ul li { margin: 0 10px; } .social-panel ul li a { border: 1px solid #DCE1F2; border-radius: 50%; color: #001F61; font-size: 20px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0