js实现卸载提示框表情互动效果代码
代码语言:html
所属分类:弹出层
代码描述:js实现卸载提示框表情互动效果代码,鼠标移动到卸载按钮,表情变得很伤心,放到保留按钮就会显示快乐表情。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; font: inherit; } html { color: #333; font-size: 62.5%; } @media screen and (max-width: 480px) { html { font-size: 50%; } } html body { font-size: 2rem; padding: 0; margin: 0; width: 100vw; height: 100vh; background-image: linear-gradient(toleft bottom, #444, #222); font-family: 'Rubik', sans-serif; } .Confirm { position: absolute; display: flex; flex-direction: column; overflow: hidden; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72rem; max-width: 100%; min-width: 34rem; max-height: 100%; height: 46rem; background-color: #ccc; border-radius: 1rem; box-shadow: 0px 10px 5px -3px rgba(0, 0, 0, 0.2); } .Confirm-Header { display: flex; align-items: center; position: relative; flex: 0 0 4rem; margin: 0 1rem; border-bottom: solid 1px rgba(0, 0, 0, 0.1); white-space: nowrap; } .Confirm-Header-Button { display: block; width: 1.6rem; height: 1.6rem; border-radius: 1rem; flex: 0 0 auto; transition: background-color 0.3s; } .Confirm-Header-Button:not(:last-of-type) { margin-right: 1rem; } .Confirm-Header-Button_Close { background-color: #a43; } .Confirm-Header-Button_Close:hover { background-color: #c85a48; } .Confirm-Header-Button_Maximize { background-color: #cb3; } .Confirm-Header-Button_Maximize:hover { background-color: #d6c95c; } .Confirm-Header-Button_Minimize { background-color: #6a4; } .Confirm-Header-Button_Minimize:hover { background-color: #81c061; } .Confirm-Header-Title { margin: 0; padding: 0; transform: translateX(50%); margin-right: 50%; margin-left: auto; } .Confirm-Body { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; position: relative; margin: 2rem 4rem; } .Confirm-Body-Title { margin: 0; padding: 0; position: absolute; transform: translateY(-50%); top: 5%; text-align: center; width: 100%; } .Confirm-Body-Button, .Confirm-Body-Button:link, .Confirm-Body-Button:visited { color: #fff; border-radius: 1rem; text-decoration: none; padding: 1rem 2rem; margin-bottom: 1rem; min-width: 10rem; text-align: center; transition: background-color 0.3s; } .Confirm-Body-Button_Delete { background-color: #a43; } .Confirm-Body-Button_Delete:hover { background-color: #c85a48; } .Confirm-Body-Button_Cancel { background-color: #6a4; } .Confirm-Body-Button_Cancel:hover { background-color: #81c061; } .Boi { --happiness: 0.9; --derp: 1; --px: 0.5; --py: 0.5; width: 22rem; max-width: 100%; height: 22rem; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: radial-gradient(#f7e0b2, #eb5); border-radius: 100%; overflow: hidden; margin: 0; align-self: center; flex: 0 0 auto; border: solid 2px #ecb23e; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } .Boi, .Boi * { position: absolute; } .Boi::before { content: ''; display: block; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(tobottom, #5a8, rgba(85, 170, 136, 0)); opacity: calc(1 - var(--happiness)); } .Boi-Blush { width: 20%; height: 10%; background-color: rgba(255, 100, 100, 0.3); border: 3px solid rgba(255, 100, 100, 0.3); top: calc(45% + var(--py) * 10%); border-radius: 100%; opacity: calc(var(--happiness) * var(--happiness) *0.9 + 0.1); } .Boi-Blush_L { left: calc(7% + var(--px) * 2%); } .Boi-Blush_R { right: calc(9% - var(--px) * 2%); } .Boi-Eye { width: calc(26% - var(--happiness) * 2%); height: calc(26% - var(--happiness) * 2%); background-color: #f6f6f6; border-radius: 100%; top: calc(25% + var(--py) * 10%); overflow: hidden; } .Boi-Eye_L { left: calc(18% + var(--px) * 4%); } .Boi-Eye_L::after { transform: translate(calc((var(--px) + var(--derp) *0.5) * 100%), calc((var(--py) + var(--derp) * 0.5) * 100%)); } .Boi-Eye_R { right: calc(22% - var(--px) * 4%); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0