css布局实现悬停饼奶酪裂开分开效果代码
代码语言:html
所属分类:悬停
代码描述:css布局实现悬停饼奶酪裂开分开效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #f8f9f2; } .box { width: 100px; height: 100px; position: relative; } .box:hover .bread { transform: translate(-30px, 0%); } .box:hover .bread:nth-child(2) { transform: translate(30px, 0%); } .box:hover .bread-side { transform: skewX(21deg) scaleX(0.6) translate(50px, 0px); } .box:hover .cheese { transform: skewX(21deg) scaleX(1); } .box .bread { position: absolute; width: 100%; height: 100%; transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1); clip-path: polygon(0% -1%, 27% 0%, 60% 85%, 59% 101%, -1% 103%); } .box .bread:nth-child(2) { clip-path: polygon(29% 0%, 100% 0%, 100% 100%, 60% 102%, 60% 82%); } .box .bread .bread-top { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -20%); width: 80%; height: 80%; background: #ffbe76; border-radius: 20px 20px 5px 5px; border: 3px solid #f0932b; } .box .bread .bread-top::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 90%; border-radius: inherit; border: inherit; } .box .bread .bread-btm-side { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -100%); width: 80%; height: 25%; background: #f0932b; border-radius: 0 0 5px 5px; border: 3px solid #f0932b; } .box .bread .bread-btm-side__cheese-line { position: absolute; top: 70%; width: 100%; height: 20%; background: #f9ca24; border-radius: 0 0 5px 5px; } .box .bread .bread-btm-side__cheese-drop { position: absolute; top: 70%; left: 20%; width: 10%; height: 45%; background: #f9ca24; border-radius: 0 0 50px 50px; } .box .bread .bread-btm-side__cheese-drop:nth-child(2) { left: 75%; } .box .bread-side { clip-path: polygon(1.48% 18.94%, 66.95% -14.74%, 100% 100%, 1.48% 100%); position: absolute; top: 5%; left: 36%; transform: skewX(21deg) scaleX(0.6); width: 30%; height: 95%; background: #f0932b; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0