Ich habe ja bereits im letzten Video gezeigt, dass das neue Widget Overlay System von Ecamm Live eine sehr geniale und starke Sache ist. Man kann jetzt nämlich sehr einfach kleine Animationen über CSS und HTML machen und nicht mehr über Adobe Premiere Pro oder Final Cut Pro X. Das erleichtert einem das Leben wirklich sehr.
Im heutigen Video zeige ich wie man eine kleine Form erstellen kann inkls einem Rand der auch gleich noch animiert ist. Und natürlich zeige ich gleich nochmal, wie man so ein HTML File danach in Ecamm Live mit dem Widget Overlay einbauen kann, damit man eine coole neue Szene hat.
Eigentlich ist es gar nicht so schwer – das schafft jeder 🙂
Einfach das Video anschauen und der Erklärung lauschen und danach könnt ihr das File zb mit dem TextEditor erstellen und als frame.html abspeichern. Danach müsst ihr es nur noch in euer Webserver hochladen (Dropbox/ Google Drive etc funktioniert nicht) und dann könnt ihr es anwenden.
Video
HTML & CSS Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>animierter avatarbereich</title>
<style>
body {
background: rgba(0,0,0,0); /* durchsichtigen hintergrund*/
}
.avatar {
top:30px;
left:30px;
position: relative;
width: 300px; /* Die BREITE der Form */
height: 300px; /* Die HÖHE der Form */
background-color: #B817F4; /* Farbe der Form */
border-radius: 0%; /* 0% = Eckig // 50% komplett abgerundete Ecken (Kreis) */
border: 10px #000000 solid; /* Randgrösse, Farbe */
animation: blinker 2s linear infinite;
}
@keyframes blinker {
0% {
border: 10px #000000 solid;
}
50% {
border: 10px #FF0032 solid;
}
100% {
border: 10px #000000 solid;
}
}
</style>
</head>
<body>
<div class="avatar"></div>
</body>
</html> |
0 Kommentare