Animierter Rahmen

HTML Knowhow

Quellcode

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style type="text/css">
.animation-text {position: relative; top: 0px; left: 20%; width: 600px; height: 100px; color: red; font-size: 4em; text-align: center;
background: linear-gradient(to bottom, red 50%, blue 50%); background-size: auto 2px; outline: 20px dashed green; box-shadow: 0 0 0 20px #1b676b;
vertical-align: middle; display: table-cell; animation: 5s animate-border ease infinite;}
@keyframes animate-border { to { outline-color: aqua; box-shadow: 0 0 0 10px lime;}}
</style>
</head>

<body>
<div class="animation-text"><strong>HTML</strong> Knowhow</div>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-550eae0ce567d3d9182e33cee4e187761056020161aa87e3ef74dc467972c555.js"></script>
<script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*");}</script>
</body>

<html>