Vorher .auto-style73 { z-index: 44; position: absolute; left: 1304px; top: 2363px; width: 138px; height: 133px; border: 3px ridge #808080; box-shadow: 1px 2px 22px 1px #a6a4a4; } ------------------------------------------------------------------------ .auto-style73 { border-style: groove; border-color: #808080; z-index: 44; position: absolute; left: 1304px; top: 2363px; width: 138px; height: 133px; border: 3px ridge #808080; box-shadow: 1px 2px 22px 1px #a6a4a4; } .auto-style73::after { content: ''; position: absolute; top: -2px; /* Leicht über den Rand hinaus */ left: -2px; right: -2px; bottom: -2px; border: 6px solid grey; border-radius: 5px; clip-path: inset(0 100% 0 0); animation: clippath 4s linear infinite; pointer-events: none; /* Damit es nicht klickbar ist */ } /* Animation des roten Randes */ @keyframes clippath { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } 25% { clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 100%); } 50% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%); } 75% { clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); } 100% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } } ------------------------------------------------------------------------------------------------- Border um Themensendung .auto-style61 { border-style: groove; z-index: 25; position: absolute; left: 81px; top: 122px; width: 481px; height: 236px; box-shadow: 1px 2px 22px 1px #a6a4a4; background-color: #000000; } .auto-style61::after { content: ''; position: absolute; top: -2px; /* Leicht über den Rand hinaus */ left: -2px; right: -2px; bottom: -2px; border: 6px solid grey; border-radius: 5px; clip-path: inset(0 100% 0 0); animation: clippath 4s linear infinite; pointer-events: none; /* Damit es nicht klickbar ist */ } /* Animation des roten Randes */ @keyframes clippath { 0% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } 25% { clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 100%); } 50% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 100% 100%); } 75% { clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); } 100% { clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%); } }