css实现一个漏斗漏沙子动画计时效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个漏斗漏沙子动画计时效果代码,当漏完后自动翻转。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Yellowtail&display=swap"); * { padding: 0; margin: 0 auto; box-sizing: border-box; } body { font-family: 'Yellowtail', cursive; background-color: #eee; color: #777; min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; } .title { font-size: 24px; width: 420px; text-align: left; } .container { position: relative; width: 420px; height: 420px; border: 2px solid #fff; border-radius: 4px; } .hourglass { position: relative; width: 100; height: 100%; -webkit-animation: rotateGlass 60s ease-in-out infinite; animation: rotateGlass 60s ease-in-out infinite; } @-webkit-keyframes rotateGlass { 0%, 90% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.15)); filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.15)); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-filter: drop-shadow(-2px -4px 8px rgba(0, 0, 0, 0.15)); filter: drop-shadow(-2px -4px 8px rgba(0, 0, 0, 0.15)); } } @keyframes rotateGlass { 0%, 90% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.15)); filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.15)); } 100% { -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-filter: drop-shadow(-2px -4px 8px rgba(0, 0, 0, 0.15)); filter: drop-shadow(-2px -4px 8px rgba(0, 0, 0, 0.15)); } } .wood { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: saddlebrown; width: 220px; height: 30px; border-radius: 5px; background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0.25)); background-size: 200%, 100%; -webkit-animation: woodGlr 60s infinite linear; animation: woodGlr 60s infinite linear; } .wood:nth-child(1) { top: 20px; } .wood:nth-child(2) { bottom: 20px; } @-webkit-keyframes woodGlr { 0%, 90% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes woodGlr { 0%, 90% { background-position: 0%; } 100% { background-position: 100%; } } .top { position: absolute; bottom: 50%; left: 50%; width: 200px; height: 110px; border: 2px solid saddlebrown; border-radius: 20px 20px 200px 200px; -webkit-transform: translateX(-50%) scale(1, 1.5); transform: translateX(-50%) scale(1, 1.5); -webkit-transform-origin: bottom; transform-origin: bottom; overflow: hidden; } .top::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: sandybrown; -webkit-animation: sandHeightTop 60s linear infinite; animation: sandHeightTop 60s linear infinite; -webkit-filter: blur(3px); filter: blur(3px); } @-webkit-keyframes sandHeightTop { 0% { height: 100%; } 90%, 100% { height: 0%; } } @keyframes sandHeightTop { 0% { height: 100%; } 90%, 100% { height: 0%; } } .bottom { position: absolute; top: 50%; left: 50%; width: 200px; height: 110px; border: 2px solid saddlebrown; border-radius: 200px 200px 20px 20px; -webkit-transform: translateX(-50%) scale(1, 1.5); transform: translateX(-50%) scale(1, 1.5); -webkit-transform-origin: top; transform-origin: top; overflow: hidden; } .bottom_sand { position: absolute; top: 100%; left: 0%; width: 100%; height: 100%; background-color: sandybrown; -webkit-transform: scale(3, 1); transform: scale(3, 1); -webkit-animation: sandTop 60s linear infinite; animation: sandTop 60s linear infinite; } .bottom_sand::before { content: ''; position: absolute; top: 0; left: 50%; width: 200px; height: 200px; border-radius: 5px; background-color: sandybrown; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); -webkit-animation: sandAngle 60s linear infinite; animation: sandAngle 60s linear infinite; -webkit-filter: blur(2px); filter: blur(2px); } @-webkit-keyframes sandTop { 0% { top: 135%; } 90%, 100% { top: 20%; } } @keyframes sandTop { 0% { top: 135%; } 90%, 100% { top: 20%; } } @-webkit-keyframes sandAngle { 0% { border-radius: 5px; } 90%, 100% { border-radius: 50px; } } @keyframes sandAngle { 0% { border-radius: 5px; } 90%, 100% { border-radius: 50px; } } .mid { position: absolute; top: 50%; left: 50%; width: 18px; height: 6px; border: solid saddlebrown; border-width: 0 3px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: center; transform-origin: center; background-color: sandybrown; } .mid::before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: sandybrown; width: 12px; height: 14px; border-radius: 50%; -webkit-filter: blur(3px); filter: blur(3px); } .drop { position: absolute; top.........完整代码请登录后点击上方下载按钮下载查看
网友评论0