css实现div卡片漩涡径向渐变框阴影动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现div卡片漩涡径向渐变框阴影动画效果代码
代码标签: css div 卡片 漩涡 径向 渐变框 阴影 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @layer demo { @property --color1POSx { inherits: false; syntax: "<percentage>"; initial-value: 0%; } @property --color1POSy { inherits: false; syntax: "<percentage>"; initial-value: 0%; } @property --color2POSx { inherits: false; syntax: "<percentage>"; initial-value: 100%; } @property --color2POSy { inherits: false; syntax: "<percentage>"; initial-value: 0%; } @property --color3POSx { inherits: false; syntax: "<percentage>"; initial-value: 100%; } @property --color3POSy { inherits: false; syntax: "<percentage>"; initial-value: 100%; } @property --color4POSx { inherits: false; syntax: "<percentage>"; initial-value: 0%; } @property --color4POSy { inherits: false; syntax: "<percentage>"; initial-value: 100%; } @keyframes --up-n-down-1 { 0%, 100% { --color1POSy: 0% } 50% { --color1POSy: 100% } } @keyframes --side-to-side-1 { 0%, 100% { --color1POSx: 0% } 50% { --color1POSx: 100% } } @keyframes --side-to-side-2 { 0%, 100% { --color2POSx: 100% } 50% { --color2POSx: 0% } } @keyframes --up-n-down-2 { 0%, 100% { --color2POSy: 0% } 50% { --color2POSy: 100% } } @keyframes --side-to-side-3 { 0%, 100% { --color3POSx: 100% } 50% { --color3POSx: 0% } } @keyframes --up-n-down-3 { 0%, 100% { --color3POSy: 100% } 50% { --color3POSy: 0% } } @keyframes --side-to-side-4 { 0%, 100% { --color4POSx: 0% } 50% { --color4POSx: 100% } } @keyframes --up-n-down-4 { 0%, 100% { --color4POSy: 100% } 50% { --color4POSy: 0% } } .card::b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0