js+css实现6组按钮悬浮点击动画效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现6组按钮悬浮点击动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet"> <style> /* GENERAL STYLES */ body { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; height: 100vh; width: 100vw; position: relative; margin: 0; overflow-x: hidden; background-color: #1e1e23; } * { font-size: 16px; font-family: "Poppins", sans-serif; } .cont { width: 100%; height: 50%; display: flex; justify-content: center; align-items: center; position: relative; } .cont:nth-child(2n) { background-color: #0c0c0e; } .cont:nth-child(3) { height: 100vh; width: 100vw; background-color: #2f2f37; } button { height: 50px; width: 150px; border-radius: 5px; border: none; cursor: pointer; } /* GIANT BUTTON */ #giant { background-color: #7e7ece; transition: all ease 0.2s; position: absolute; } #giant:hover { height: 90vh; width: 95vw; font-size: 30px; border-radius: 10px; } /* DISABLED */ #disabled { background-color: white; position: relative; cursor: not-allowed !important; font-size: 16px; } #disabled::before { content: ""; position: absolute; left: 0; top: 15%; width: 0%; height: 5px; background-color: black; box-shadow: 0 15px 0px black, 0 30px 0px black; transition: width 0.2s ease; } #disabled:hover::before { width: 100%; } #disabled::after { content: ""; position: absolute; top: 0; left: 15%; height: 0%; width: 5px; background-color: black; box-shadow: 50px 0px 0px black, 100px 0px 0px black; transition: height 0.2s ease; } #disabled:hover::after { height: 100%; } /* SHAKE */ #shake { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 20px; font-size: 16px; background-color: #f2f2f2; border: none; cursor: pointer; border-radius: 5px; } .shake { animation: shake 0.5s ease-in-out infinite; } .shake-harder { animation: shake-harder 0.3s ease-in-out infinite; } .shake-hardest { animation: shake-hardest 0.1s ease-in-out infinite; } @keyframes shake { 0% { transform: translate(-50%, -50%); } 25% { transform: translate(-50%, -50%) rotate(-3deg); } 50% { transform: translate(-50%, -50%) rotate(3deg); } 75% { transform: translate(-50%, -50%) rotate(-3deg); } 100% { transform: translate(-50%, -50%) rotate(3deg); } } @keyframes shake-harder { 0% { transform: translate(-50%, -50%); } 25% { transform: translate(-50%, -50%) rotate(-6deg); } 50% { transform: translate(-50%, -50%) rotate(6deg); } 75% { transform: translate(-50%, -50%) rotate(-6deg); } 100% { transform: translate(-50%, -50%) rotate(6deg); } } @keyframes shake-hardest { 0% { transform: translate(-50%, -50%); } 25% { transform: translate(-50%, -50%) rotate(-8deg); } 50% { transform: translate(-50%, -50%) rotate(8deg); } 75% { transform: translate(-50%, -50%) rotate(-8deg); } 100% { transform: translate(-50%, -50%) rotate(8deg); } } /* DOWNLOAD */ #download { height: 50px; width: 150px; background-color: white; border: none; border-radius: 5px; } .square { position: fixed; width: 50px; height: 50px; background-color: #4bc47d; border-radius: 5px; transition: transform 0.5s; cursor: pointer; } .square.poof { animation: poofEffect 0.5s forwards; } @keyframes poofEffect { 0% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } } /* USELESS */ #useless { position: relative; width: 200px; } #useless:hover::after { content: "Click here"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #ccc; border-radius: 5px; display: flex; align-items: center; justify-content: center; animation: changeText 4s linear; } @keyframes changeText { 10% { content: "Oops..."; } 40% { content: "Service unavailable"; } 70% { content: "Check back later..."; } 100% { content: "Click here"; } } /* EMOJI */ #emoji { width: 250px; position: relative; z-index: 0; } span:nth-child(1) { position: absolute; width: 50%; left: 0; top: 0; height: 100%; z-index: 5; } span:nth-child(2) { position: absolute; width: 50%; right: 0; top: 0; height: 100%; z-index: 5; } .emoji-cont { height: 50px; width: 250px; z-index: 1; position: relative; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0