div+css实现丝带折叠悬浮下垂动画背景效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现丝带折叠悬浮下垂动画背景效果代码
代码标签: div css 丝带 折叠 悬浮 下垂 动画 背景
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --d { syntax: "<length>"; initial-value: 0px; inherits: true; } h1 { --r: 20px; /* control the cutout of the ribbon */ --s: 20px; /* size of the folded part */ --c: #d81a14; --d: 0px; /* This will control the animation part */ line-height: 1.6; /* control the height */ padding-inline: 1.2lh calc(var(--r) + .2lh); color: #fff; background: linear-gradient(#0000 40%,#0002) var(--c); clip-path: polygon(calc(1lh + var(--d)) 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,100% 999px, var(--d) 999px,var(--d) 100%); position: relative; cursor: pointer; transition: --d .3s linear; /*width: fit-content; you may need this in your real example */ } h1.alt { --c: #8FBE00; padding-inline: calc(var(--r) + .2lh) 1.2lh; clip-path: polygon(calc(100% .........完整代码请登录后点击上方下载按钮下载查看
网友评论0