纯css实现hover小甜心动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Challenges: CSS Hover Pudding🍮 </title> <style> *:before, *:after { position: absolute; content: ""; } *:hover { z-index: 10; } body { width: 100%; height: 100%; background: #f8dee9; } .dessert { position: absolute; } .pudding { position: absolute; width: 150px; height: 150px; top: calc(50% - 75px); left: calc(50% - 75px); } .pudding__part { position: absolute; width: 150px; height: 120px; background: #f4d37c; -webkit-transform-origin: bottom; transform-origin: bottom; } .pudding__part:before { top: 0; right: -10px; width: 0; height: 0; border-left: 10px solid #f4d37c; border-top: 120px solid transparent; border-bottom: 0 solid transparent; } .pudding__part:after { top: 0; left: -10px; width: 0; height: 0; border-right: 10px solid #f4d37c; border-top: 120px solid transparent; border-bottom: 0 solid transparent; } .pudding__cream .........完整代码请登录后点击上方下载按钮下载查看
网友评论0