css实现图片悬浮炫酷立体倾斜边框光效动画效果代码
代码语言:html
所属分类:悬停
代码描述:css实现图片悬浮炫酷立体倾斜边框光效动画效果代码
代码标签: css 图片 悬浮 炫酷 立体 倾斜 边框 光效 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --a { /* control the gradient rotation (no need to update) */ syntax: "<angle>"; initial-value: 45deg; inherits: true; } @property --r { syntax: "<angle>"; initial-value: 5deg; /* control the image rotation */ inherits: true; } @property --p { /* control the color stops of the gradient (no need to update) */ syntax: "<percentage>"; initial-value: 0%; inherits: true; } img { --c: #bec1c9; /* the main coloration of the rotating gradient */ width: 250px; /* the size of the image*/ aspect-ratio: 1; border-radius: 25px; border: 4px solid #0000; /* the thickness for the rotating gradient */ padding: 10px; /* the gap */ background: conic-gradient(from var(--a), #0000 calc(30% - var(--p)), var(--c) calc(50% - var(--p)) calc(50% + var(--p)), #0000 calc(70% + var(--p))) border-box; --g: linear-gradient(#000 0 0); -webkit-mask: var(--g),var(--g) padding-box, conic-gradient(from var(--a), #000d calc(30% - var(--p)), #000 calc(50% - var(--p)) calc(50% + var(--p)), .........完整代码请登录后点击上方下载按钮下载查看
网友评论0