js+css布局猫头眼睛跟随鼠标转动交互效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css布局猫头眼睛跟随鼠标转动交互效果代码
代码标签: js css布局 猫头 眼睛 跟随 鼠标 转动 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @import url("https://fonts.googleapis.com/css?family=Baloo+Bhaina"); * { box-sizing: border-box; } .flex { display: flex; } html, body, .wrap { height: 100%; } body { background: #27313D; } .bg { background: rgba(0, 0, 0, 0.2); position: fixed; top: 0; left: 0; height: 100%; width: 50%; z-index: 10000; } .wrap { align-items: center; justify-content: center; } .cat { height: 150px; width: 200px; } .face { background: #ededed; border-radius: 100%; height: inherit; position: relative; } .ears { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; } .ear { background: #ededed; border-radius: 30px; align-items: center; justify-content: center; height: 80px; position: absolute; top: -6px; width: 80px; } .ear::before { background: #F58E7E; border-radius: 23px; content: ""; height: 73px; width: 73px; } .ear-left { left: 14px; transform: rotate(25deg) skewX(30deg) skewY(8deg); } .ear-right { right: 14px; transform: rotate(-25deg) skewX(-30deg) skewY(-8deg); } .eyes { height: 40px; position: absolute; top: 40%; left: 0; transform: translateY(-40%); width: 100%; } .eye { background: #333333; border: 2px solid #333333; align-items: center; justify-content: center; height: 35px; overflow: hidden; position: absolute; top: 0; width: 45px; /* 虹彩 */ /* 瞳 */ } .eye-iris { background: #58BE89; align-items: center; justify-content: center; height: 40px; width: 40px; } .eye-iris, .eye-pupil, .eye-pupil::before { border-radius: 100%; } .eye-pupil { background: #333333; align-items: center; justify-content: center; height: 35px; width: 35px; /* 瞳の光 */ } .eye-pupil::before { background: #fff; content: ""; height: 6px; width: 6px; } .eye-left { border-radius: 0 70% 0 70%; left: 30px; } .eye-right { border-radius: 70% 0 70% 0; right: 30px; } .nose { border-top: 20px solid #ededed; border-left: 2px solid transparent; border-right: 2px solid transparent; height: 20px; position: absolute; top: 56%; left: 50%; transform: translate(-50%, 0%); width: 50px; z-index: 3; /* 鼻 */ } .nose::before { background: #F26752; border-radius: 40%; content: ""; height: 30px; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 50px; z-index: 1; } .whisker-pads { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 4; } .whisker-pads > .whisker-pad { border-radius: 100%; } .whisker-pads > .whisker-pad-left, .whisker-pads > .whisker-pad-right { background: whitesmoke; border-bottom: 1px solid #b3b3b3; height: 44px; position: absolute; bottom: 2px; width: 60px; } .whisker-pads > .whisker-pad-left { border-right: 2px solid #b3b3b3; left: 50%; transform: translateX(-98%); } .whisker-pads > .whisker-pad-right { border-left: 2px solid #b3b3b3; right: 50%; transform: translateX(98%); } .pores { flex-wrap: wrap; height: 30px; position: absolute; top: 50%; width: 50px; } .pores-left { left: 50%; transform: skewX(5deg) translate(-50%, -50%); } .pores-right { right: 50%; transform: skewX(-5deg) translate(50%, -50%); } .pores > .pore { align-items: center; justify-content: center; height: 33.3333333333%; width: 33.3333333333%; } .pores > .pore::before { background: #b3b3b3; border-radius: 100%; content: ""; display: block; height: 3px; width: 3px; } .whiskers { flex-wrap: wrap; align-content: space-around; height: 100%; position: absolute; top: 0; width: 100%; } .whiskers-left { transform: translateX(-50%); } .whiskers-left .whisker-2 { transform: skewY(-10deg); } .whiskers-left .whisker-3 { transform: skewY(-20deg); } .whiskers-right { transform: translateX(50%); } .whiskers-right .whisker-2 { transform: skewY(10deg); } .whiskers-right .whisker-3 { transform: skewY(20deg); } .whiskers > .whisker { flex-direction: column; border-top: 1px solid #b3b3b3; border-top-left-radius: 50%; border-top-right-radius: 50%; height: 10px; width: 100%; } .mouth { background: #ededed; border-radius: 100%; height: 55px; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); width: 90px; } .message { display: none; color: #fff; font-size: 28px; font-family: "Baloo Bhaina", cursive; margin-top: 30px; text-align: center; } </style> </head> <body translate="no"> <div class="bg"></div> <div class="wrap flex"> <div class="cat"> <div class="face"> <div class="ears"> <div class="ear ear-left flex"></div> <div class="ear ear-right flex"></div> </div> <div class="eyes"> <div class="eye eye-left flex"> <div class="eye-iris eye-iris-left flex"> <div class="eye-pupil eye-pupil-left flex"></div> </div> </div> <div class="eye eye-right flex"> <div class="eye-iris eye-iris-right flex"> <div class=&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0