css实现轨道轨迹运动动画效果
代码语言:html
所属分类:动画
代码描述:css实现轨道轨迹运动动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua-1.5.5.css"> <style> body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #464343; } :root { --white-color-transparent-1: rgba(255, 255, 255, 0.5); --white-color-transparent-2: rgba(255, 255, 255, 0.35); --brown-color-transparent: rgba(162, 118, 63, 0.5); --blue-color-transparent: rgba(66, 91, 100, 0.95); --red-color-transparent: rgba(150, 61, 65, 0.95); --yellow-color-transparent: rgba(149, 144, 65, 0.95); } .w-half { width: 50%; } .h-half { height: 50%; } .w-quart { width: 25%; } .h-quart { height: 25%; } .bg-blue-transparent { background: var(--blue-color-transparent); } .bg-red-transparent { background: var(--red-color-transparent); } .bg-yellow-transparent { background: var(--yellow-color-transparent); } .bg-white-transparent-2 { background: var(--white-color-transparent-2); } .border-white-transparent-1 { border-color: var(--white-color-transparent-1); } .border-white-transparent-2 { border-color: var(--white-color-transparent-2); } .orbit { --orbit-width: 6rem; --point-width: 1.5rem; --orbit-color: var(--white-color-transparent-1); --point-color: white; --spin-duration: 4s; --spin-delay: 0s; position: relative; width: var(--orbit-width); height: var(--orbit-width); display: flex; justify-content: center; align-items: center; border: 1px solid var(--orbit-color); border-radius: 50%; } .orbit .point { position: absolute; width: var(--point-width); height: var(--point-width); animation: spin var(--spin-duration) var(--spin-delay) linear infinite; } .orbit .point::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: var(--point-color); border-radius: 50%; transform: translateX(calc((var(--orbit-width)) / 2)); } .wave { transform: scale(0); animation: wave 3s var(--wave-delay, 0s) var(--ease-out-cubic) forwards infinite; } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(1turn); } } @keyframes wave { 0% { transform: scale(0); } 10%, 65% { transform: scale(1.5); } 80%, 100% { opacity: 0; transform: scale(1.5); } } </style> </head> <body translate="no" > <div class="flex flex-col items-center space-y-12"> <div class="text-6xl text-white">Orbit</div> <div class="flex space-x-12"> <div class="orbit"> <div class="point"></div> </div> <div class="orbit"> <div class="absolute left-0 top-0 w-quart h-quart border border-solid border-white-transparent-2 rounded-full wave" style="--wave-delay: 0.1s" ></div> <div class="absolute left-0 bottom-0 w-half h-half border border-solid border-white-transparent-2 rounded-full wave" style="--wave-delay: 0s" ></div> <div class="absolute right-0 bottom-0 w-quart h-quart border border-solid border-white-transparent-2 rounded-full wave" style="--wave-delay: 0.2s" ></div> <div class="absolute top-0 right-0 w-half h-half bg-blue-transparent rounded-full wave" style="--wave-delay: 0.4s" ></div> <div class="absolute left-0 w-half h-half bg-white-transparent-2 rounded-full wave" style="--wave-delay: 0.5s" ></div> <div class="absolute w-full h-0 border border-dashed border-white-transparent-1"></div> <div class="absolute w-0 h-full border border-dashed border-white-transparent-1"></div> <div class="absolute border border-solid border-white w-half h-half rounded-full"></div> <div class="absolute border border-solid border-white w-quart h-quart rounded-full"></div> <div class="point" style="--point-color: var(--brown-color-transparent); --point-width: 1rem"></div> <div class="point" style=" --point-color: var(--brown-color-transparent); --point-width: 1rem; --spin-delay: calc(var(--spin-duration) / -2); " ></div> </div> <div class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0