admin 管理员组

文章数量: 1086019


2023年12月17日发(作者：柠檬wifi改ip免费上网)

@keyframes opacityChange { 50% { opacity:.5; } 100% { opacity: 1; }}@keyframes rotate { 100% { transform: rotate(1turn); }} { background-color: #000; padding: 20px; div{

--borderWidth: 12px; --bRadius: 10px; width: 60%; height: 60%; position: relative; z-index: 0; overflow: hidden; padding: 2rem; z-index: 0; border-radius: --bRadius; &::after, &::before { box-sizing: border-box; } &::before { content: ''; position: absolute; z-index: -2; left: -50%; top: -50%; width: 200%; height: 200%; background-color: #1a232a; background-repeat: no-repeat; background-position: 0 0; background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%); animation: rotate 4s linear infinite; }

&::after { content: ''; position: absolute; z-index: -1; left: calc(var(--borderWidth) / 2); top: calc(var(--borderWidth) / 2); width: calc(100% - var(--borderWidth)); height: calc(100% - var(--borderWidth)); background: #000; border-radius: 5px; /*

这句效果打开有助于理解动画 */ /*animation: opacityChange 5s infinite linear;*/ }

}}:nth-child(9) div::after { animation: opacityChange 5s infinite linear;}


本文标签： 柠檬 免费 理解 有助于

版权声明：本文标题：有趣的CSScss-border特效(转动边框,彩虹边框,渐变边框)和css变量_百 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1702826565a432336.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。