Ein PNG-Bild pulsieren!?

Ombra · 14.09.2017

Hallo zusammen,

Ich möchte ein PNG-Bild (Smiley) pulsieren lassen: Soll heißen das Bild soll sich zufällig ein wenig drehen/kippen und zufällig ein wenig verkleinern/vergrößern.

Ist das mit PHP machbar?

Ich danke im Voraus.
LG Ombra

Chris_EDI · 14.09.2017

Schaust du ma hier. PHP hat einige Image-Funktionen auf Lager. Unter anderem auch imagerotate.
Hoffe, das hilft dir weiter

dn3d_fanboy · 15.09.2017

Macht da CSS nicht mehr Sinn?

Chris_EDI · 15.09.2017

dn3d_fanboy schrieb:
Macht da CSS nicht mehr Sinn?

Dachte ich mir auch erst. Aber der TE schreibt auch von zufällig drehen/pulsieren etc.
Kommt darauf an, was er möchte. Eigentlich ist die Zeit von herumhüpfenden Smileys schon vorbei.

noltehans · 15.09.2017

Hi Ombra,

du kannst eine Kombination aus PHP und CSS machen.

Leg dir mehrere CSS-Animationen an.

Ein sehr simples Beispiel einer CSS-Animation:

Code:

<!DOCTYPE html>
<html>
<head>
 <title>Titel</title>
 <meta charset="UTF-8">
<style>
.smiley-animation{
  animation: smiley-animationFrames ease 1s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

@keyframes smiley-animationFrames{
  0% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) skewX(0deg) skewY(0deg) ;
  }
  50% {
    transform:  rotate(35deg) scaleX(0.42) scaleY(0.42) skewX(-22deg) skewY(11deg) ;
  }
  100% {
    transform:  rotate(0deg) scaleX(1.00) scaleY(1.00) skewX(0deg) skewY(0deg) ;
  }
}
</style>
</head>
<body>
<img class="smiley-animation" src="smiley.png" width="120" height="127" alt="" />
</body>
</html>

Und hiermit kannst du die verschiedenen Animationen "zufällig" abspielen.
https://www.rocketmill.co.uk/random-styling-with-php-and-css