gsap+svg实现拖动地球公转位置选择日期时间效果代码
代码语言:html
所属分类:选择器
代码描述:gsap+svg实现拖动地球公转位置选择日期时间效果代码
代码标签: gsap svg 拖动 地球 公转 位置 选择 日期 时间
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .useful-datepicker { transform: scale(1.35); width: 260px; position: relative; } .useful-datepicker .form-input input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; outline: none; font-family: inherit; font-size: 16px; font-weight: 500; font-feature-settings: "tnum"; width: 100%; color: #f6f6f9; background-color: #272c39; padding: 12px 16px; line-height: 20px; margin: 0; border-radius: 7px; box-shadow: 0px 1px 3px rgba(8, 9, 12, 0.1), 0px 4px 16px rgba(8, 9, 12, 0.1), inset 0px 1px 0px rgba(234, 240, 255, 0.04); } .useful-datepicker .form-input input::-moz-placeholder { color: #788199; opacity: 1; } .useful-datepicker .form-input input:-ms-input-placeholder { color: #788199; opacity: 1; } .useful-datepicker .form-input input::placeholder { color: #788199; opacity: 1; } .useful-datepicker .form-input button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; border-radius: 0 7px 7px 0; padding: 12px 12px 12px 24px; margin: 0; position: absolute; right: 0; top: 0; cursor: pointer; } .useful-datepicker .form-input button svg { width: 20px; height: 20px; display: block; fill: none; stroke: #879aff; stroke-linecap: round; stroke-linejoin: round; } .useful-datepicker .popover { background-color: #272c39; border-radius: 7px; margin-top: 8px; } .useful-datepicker .popover .solar-system { padding: 32px 40px; position: relative; } .useful-datepicker .popover .solar-system .rotate .solar-system-dash { width: 180px; height: 180px; display: block; fill: none; stroke: #464c5b; } .useful-datepicker .popover .solar-system .rotate .earth { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + 90px), -50%); } .useful-datepicker .popover .solar-system .rotate .earth:before, .useful-datepicker .popover .solar-system .rotate .earth:after { content: ""; width: 19px; height: 19px; position: absolute; left: 50%; top: 50%; background: rgba(200, 228, 255, 0.15); border-radius: 50%; } .useful-datepicker .popover .solar-system .rotate .earth:before { transform: translate(-50%, -50%) scale(1.2); } .useful-datepicker .popover .solar-system .rotate .earth:after { transform: translate(-50%, -50%) scale(1.4); } .useful-datepicker .popover .solar-system .rotate .earth .earth-dash { width: 43px; height: 43px; display: block; fill: none; stroke: #464c5b; } .useful-datepicker .popover .solar-system .rotate .earth .earth-planet { width: 19px; height: 19px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .useful-datepicker .popover .solar-system .rotate .earth .moon { width: 7px; height: 7px; background-color: #f2e6f6; position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(calc(-50% + 21.5px), -50%); box-shadow: 0 0 0 1px rgba(242, 230, 247, 0.25); } .useful-datepicker .popover .solar-system .sun { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .useful-datepicker .popover .solar-system .sun .blur { width: 40px; height: 40px; position: absolute; left: 0; right: 0; border-radius: 50%; background-color: #fcd385; opacity: 0.2; } .useful-datepicker .popover .solar-system .sun .blur.blur-1 { -webkit-animation: sun-blur 3s linear 0s infinite; animation: sun-blur 3s linear 0s infinite; } .useful-datepicker .popover .solar-system .sun .blur.blur-2 { -webkit-animation: sun-blur 3s linear -1s infinite; animation: sun-blur 3s linear -1s infinite; } .useful-datepicker .popover .solar-system .sun .blur.blur-3 { -webkit-animation: sun-blur 3s linear -2s infinite; animation: sun-blur 3s linear -2s infinite; } @-webkit-keyframes sun-blur { 50% { opacity: 0.2; } 100% { opacity: 0; } 100% { transform: scale(1.75); } } @keyframes sun-blur { 50% { opacity: 0.2; } 100% { opacity: 0; } 100% { transform: scale(1.75); } } .useful-datepicker .popover .solar-system .sun svg { fill: #fcd385; width: 40px; height: 40px; display: block; position: relative; z-index: 1; } .useful-datepicker .popover .action { padding: 0 16px 16px 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 16px; } .useful-datepicker .popover .action button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; border-radius: 5px; padding: 6px 0; text-align: center; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 20px; margin: 0; cursor: pointer; } .useful-datepicker .popover .action button.secondary { color: #788199; background: #32394a; box-shadow: inset 0px 1px 0px rgba(234, 240, 255, 0.04); } .useful-datepicker .popover .action button.primary { color: #fff; background: #879aff; box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.1); } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; display: flex; font-family: "Inter", Arial; justify-content: center; align-items: center; background-color: #1c202a; } body .twitter { position: fixed; display: block; right: 12px; bottom: 12px; } body .twitter svg { width: 32px; height: 32px; fill: #1da1f2; } </style> </head> <body > <div class="useful-datepicker"> <div class="form-input"> <input type="text" placeholder="05-13-2022" /> <button> <svg viewBox="0 0 20 20"> <path d="M9.9987 16.6666C13.6806 16.6666 16.6654 13.6818 16.6654 9.99992C16.6654 6.31802 13.6806 3.33325 9.9987 3.33325C6.3168 3.33325 3.33203 6.31802 3.33203 9.99992C3.33203 13.6818 6.3168 16.6666 9.9987 16.6666Z" /> <path d="M6.44531 9.99993C6.44531 9.05686 6.81994 8.15242 7.48679 7.48557C8.15364 6.81872 9.05808 6.44409 10.0011 6.44409" /> <path d="M19 4.8042C19.9567 6.46087 16.7025 10.13 11.7317 13C6.76083 15.87 1.95667 16.8525 1 15.1959" /> <path d="M0.99972 15.2C0.416387 14.1916 1.39139 12.4416 3.35805 10.575" /> <path d="M13.8242 4.54169C16.4159 3.76669 18.4159 3.80003 18.9992 4.80003" /> </svg> </button> </div> <div class="popover"> <div class="solar-system"> <div class="rotate"> <svg class="solar-system-dash" viewBox="0 0 162 162"> <circle cx="81" cy="81" r="80" stroke-dasharray="3 3" /> </svg> <di.........完整代码请登录后点击上方下载按钮下载查看
网友评论0