div+css实现鼠标悬停图片遮罩动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现鼠标悬停图片遮罩动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { min-height: 100vh; background: #222; display: grid; place-items: center; } @property --w{ syntax: "<percentage>"; inherits: false; initial-value: 32%; } @property --p1 { syntax: "<percentage>"; inherits: false; initial-value: 70%; } @property --p2 { syntax: "<percentage>"; inherits: false; initial-value: 32%; } @property --p3 { syntax: "<percentage>"; inherits: false; initial-value: 32%; } @property --p4 { syntax: "<percentage>"; inherits: false; initial-value: 70%; } .parent { position: relative; width: 400px; height: 400px; box-shadow: 0px 0px 0px 20px #222, 0px 0px 20px 40px rgba(255, 255, 255,.2); border-radius: 50%; overflow: hidden; } img { --p1: 70%; --p2: 32%; --p3: 32%; --p4: 70%; --w: 25%; width: 400px; border-radius: 50%; aspect-ratio: 1; mask: radial-gradient(300px at var(--p1) var(--p2), black var(--w), transparent var(--w) 100%), radial-gradient(300px at var(--p3) var(--p4), black var(--w), transparent va.........完整代码请登录后点击上方下载按钮下载查看
网友评论0