css+js实现图标菜单点击排列动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css+js实现图标菜单点击排列动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css"> <style> *, *:before, *:after { box-sizing: border-box; } body, html { margin: 0; height: 100%; } body { height: 100%; display: flex; align-items: center; justify-content: center; } body .reactions { width: 216px; height: 66px; display: flex; border: 1px solid #d9d9d9; background-image: linear-gradient(to top, #f7f7f7, white); padding: 8px; border-radius: 45px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05); } body .reactions.wave .like { animation: bounce 0.5s cubic-bezier(0.72, -0.01, 0.34, 1) forwards; } body .reactions.wave .love { animation: bounce 0.5s 0.125s cubic-bezier(0.72, -0.01, 0.34, 1) forwards; } body .reactions.wave .laugh { animation: bounce 0.5s 0.25s cubic-bezier(0.72, -0.01, 0.34, 1) forwards; } body .reactions.wave .cry { animation: bounce 0.5s 0.375s cubic-bezier(0.72, -0.01, 0.34, 1) forwards; } body .reactions > div { flex: 0 0 calc(25% - 10px); margin: 5px; border-radius: 100%; background-color: white; transition: background-color 0.5s cubic-bezier(0.72, -0.01, 0.34, 1); position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); color: #666666; } body .reactions > div:before { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; margin: -3px 0 0 -3px; display: block; height: 6px; width: 6px; border-radius: 100%; transform: rotate(45deg) scale(1); } body .reactions > div:after { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; margin: -5px 0 0 -5px; display: block; height: 10px; width: 10px; border-radius: 100%; transform: rotate(90deg) scale(1); } body .reactions > div > span { position: relative; z-index: 1; } body .reactions > div.active { z-index: 1; } body .reactions > div.like { transition: none; } body .reactions > div.like:hover { color: #00de54; box-shadow: inset 0 0 0 1px #00de54; } body .reactions > div.like:before, body .reactions > div.like:after { background-color: transparent; box-shadow: 0 0 0 #00de54, 0 0 0 #00de54, 0 0 0 #00de54, 0 0 0 #00de54; } body .reactions > div.like.active { background-color: #00de54; text-shadow: 0 1px 2px #00782d; box-shadow: inset 0 0 0 1px #00ab41, inset 0 2px 4px #00ab41; color: white; transition: all 0.35s 0.25s cubic-bezier(0.72, -0.01, 0.34, 1); } body .reactions > div.like.active > span { animation: thumbsUp 0.6s 0.2s cubic-bezier(0.72, -0.01, 0.34, 1) forwards; } body .reactions > div.like.active:before, body .reactions > div.like.active:after { transition: all 0.8s 0.375s cubic-bezier(0, -0.02, 0.04, 1); height: 0; width: 0; box-shadow: 0 50px 0 #00de54, 50px 0 0 #00de54, -50px 0 0 #00de54, 0 -50px 0 #00de54; margin: 0 0 0 0; } body .reactions > div.love { transition: none; } body .reactions > div.love:hover { color: orangered; box-shadow: inset 0 0 0 1px orangered; } body .reactions > div.love:before, body .reactions > div.love:after { background-color: transparent; box-shadow: 0 0 0 orangered, 0 0 0 orangered, 0 0 0 orangered, 0 0 0 orangered; } body .reactions > div.love.active { background-color: orangered; text-shadow: 0 1px 2px #992900; box-shadow: inset 0 0 0 1px #992900, inset 0 2px 4px #b33000; color: white; transition: all 0.35s 0.375s cubic-bezier(0.72, -0.01, 0.34, 1); } body .reactions > div.love.active > span { animation: heartBeat 3s 0.6s cubic-bezier(0.72, -0.01, 0.34, 1) forwards; } body .reactions > div.love.active:before, body .reactions > div.love.active:after { height: 0; width: 0; transition: all 0.8s 0.5s cubic-bezier(0, -0.02, 0.04, 1); box-shadow: 0 50px 0 orangered, 50px 0 0 orangered, -50px 0 0 orangered, 0 -50px 0 orangered; margin: 0 0 0 0; } body .reactions > div.laugh { transition: none; } body .reactions > div.laugh:hover { color: #ff7500; box-shadow: inset 0 0 0 1px #ff7500; } body .reactions > div.laugh:before, body .reactions > div.laugh:after { background-color: transparent; box-shadow: 0 0 0 #ff7500, 0 0 0 #ff7500, 0 0 0 #ff7500, 0 0 0 #ff7500; } body .reactions > div.laugh.active { background-color: #ff7500; text-shadow: 0 1px 2px #b35200;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0