css实现悬浮滑动式按钮效果代码
代码语言:html
所属分类:悬停
代码描述:css实现悬浮滑动式按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @layer properties { @property --border-lightness { syntax: "<number>"; inherits: true; initial-value: 100; } @property --button-before-opacity { syntax: "<number>"; inherits: true; initial-value: 100; } @property --button-shadow-opacity { syntax: "<number>"; inherits: true; initial-value: 0; } @property --logo-offset { syntax: "<number>"; inherits: true; initial-value: 0; } @property --text-offset { syntax: "<number>"; inherits: true; initial-value: 0; } @property --icon-offset { syntax: "<number>"; inherits: true; initial-value: 0; } @property --arrow-opacity { syntax: "<number>"; inherits: true; initial-value: 0; } } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; } :root { --ic-arrow-top-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up-right'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E"); --ic-algolia: url("data:image/svg+xml,%3Csvg width='333' height='333' viewBox='0 0 333 333' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M166.465 0..........完整代码请登录后点击上方下载按钮下载查看
网友评论0