css实现鼠标滚动提示指示动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现鼠标滚动提示指示动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @import url(https://fonts.googleapis.com/css?family=Cabin); body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #222a30; } p { margin-top: 50px; font-family: "Cabin", sans-serif; letter-spacing: 12px; text-indent: 12px; color: #ffffff; -webkit-animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite; animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite; } .mouse { background: #4e5559 linear-gradient(transparent 0%, transparent 50%, #ffffff 50%, #ffffff 100%); position: relative; width: 52px; height: 88px; border-radius: 100px; background-size: 100% 200%; -webkit-animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite; animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite; } .mouse:before, .mouse:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .mouse:before { width: 46px; height: 82px; background-color: #222a30; border-radius: 100px; } .mouse:after { background-color: #ffffff; width: 10px; height: 10px; border-radius: 100%; -webkit-animation: trackBallSlide 5s linear infinite; animation: trackBallSlide 5s linear infinite; } @-webkit-keyframes colorSlide { 0% { background-position: 0% 100%; } 20% { background-position: 0% 0%; } 21% { background-color: #4e5559; } 29.99% { background-color: #ffffff; background-position: 0% 0%; } 30% { background-color: #4e5559; background-position: 0% 100%; } 50% { background-position: 0% 0%; } 51% { background-color: #4e5559; } 59% { background-color: #ffffff; background-position: 0% 0%; } 60% { background-color: #4e5559; background-position: 0% 100%; } 80% { background-position: 0% 0%; } 81% { background-color: #4e5559; } 90%, 100% { background-color: #ffffff; } } @keyframes colorSlide { 0% { background-position: 0% 100%; } 20% { background-position: 0% 0%; } 21% { background-color: #4e5559; } 29.99% { background-color: #ffffff; background-position: 0% 0%; } 30% { background-color: #4e5559; background-position: 0% 100%; } 50% { background-position: 0% 0%; } 51% { background-color: #4e5559; } 59% { background-color: #ffffff; background-position: 0% 0%; } 60% { background-color: #4e5559; background-position: 0% 100%; } 80% { background-position: 0% 0%; } 81% { background-color: #4e5559; } 90%, 100% { background-color: #ffffff; } } @-webkit-keyframes trackBallSlide { 0% { opacity: 1; transform: scale(1) translateY(-20px); } 6% { opacity: 1; transform: scale(0.9) translateY(5px); } 14% { opacity: 0; transform: scale(0.4) translateY(40px); } 15%, 19% { opacity: 0; transform: scale(0.4) translateY(-20px); } 28%, 29.99% { opacity: 1; transform: scale(1) translateY(-20px); } 30% { opacity: 1; transform: scale(1) translateY(-20px); } 36% { opacity: 1; transform: scale(0.9) translateY(5px); } 44% { opacity: 0; transform: scale(0.4) translateY(40px); } 45%, 49% { opacity: 0; transform: scale(0.4) translateY(-20px); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0