Оформление блога на 8 Марта
Цветы CSS
Первый цветок
Найден на сайте https://atuin.ru/.
В коде цветка тоже можно менять цвет и размер каждой детали. Лучше, конечно, уменьшать/увеличивать каждую деталь одновременно.
Посмотреть можно на тестовом блоге.
<b><font face="Comic Sans MS" size="+3" color="FF0000">Ваш текст</font></b>
<div class="wrapper">
<div class="plant">
<div class="flower">
<div class="head">
<div class="face"></div>
</div>
</div>
<div class="leaf__one"></div>
<div class="leaf__two"></div>
<div class="leaf__three"></div>
</div>
<div class="pot">
<div class="top"></div>
</div>
</div>
<style>
.wrapper {
height: 340px;
width: 300px;
position: relative;
margin: 20px auto;
z-index: 2;
filter: drop-shadow(0 0 6px #aaa);
}
.wrapper .plant {
height: 100px;
width: 6px;
position: absolute;
left: 0;
right: 0;
bottom: 90px;
margin: auto;
background: #00e600;
z-index: 1;
transform-origin: center bottom;
animation: lean 3s .5s infinite;
}
.wrapper .plant .leaf__one {
height: 30px;
width: 30px;
background: #30862D;
position: relative;
top: 10px;
left: 6px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
transform: rotateZ(-67.5deg);
z-index: -2;
}
.wrapper .plant .leaf__two {
height: 26px;
width: 26px;
background: #30862D;
position: relative;
top: 12px;
right: 26px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-right-radius: 100%;
transform: rotateZ(67.5deg);
}
.wrapper .plant .leaf__three {
height: 24px;
width: 24px;
background: #30862D;
position: relative;
top: 22px;
left: 6px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
transform: rotateZ(-67.5deg);
}
.wrapper .plant .flower {
height: 40px;
width: 40px;
position: absolute;
top: -80px;
left: -40px;
animation: rotate 3s .5s infinite;
}
.wrapper .plant .flower::before {
content: "";
height: 40px;
width: 40px;
position: absolute;
top: -30px;
left: 20px;
background: #C2000A;
border-radius: 100%;
z-index: -1;
box-shadow: -37px 15px #C2000A, -47px 54px #C2000A, -26px 89px #C2000A, 15px 93px #C2000A, 43px 63px #C2000A, 36px 21px #C2000A;
}
.wrapper .plant .flower .head {
height: 80px;
width: 80px;
position: absolute;
border-radius: 100%;
background: #E8AD17;
box-shadow: 0 0 3px #333;
z-index: 10;
}
.wrapper .plant .flower .head .face {
height: 26.6666666667px;
width: 26.6666666667px;
position: absolute;
left: 0;
right: 0;
bottom: 10px;
margin: auto;
border: 4px transparent solid;
border-bottom: 4px black solid;
border-right: 4px black solid;
border-radius: 100%;
transform: rotate(45deg);
z-index: 10;
box-sizing: content-box;
}
.wrapper .plant .flower .head .face::before,
.wrapper .plant .flower .head .face::after {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: -10px;
background: black;
border-radius: 100%;
}
.wrapper .plant .flower .head .face::before {
top: 8px;
left: -16px;
}
.wrapper .plant .flower .head .face::after {
top: -16px;
right: 8px;
}
.wrapper .pot {
height: 80px;
width: 60px;
background: #4D2319;
position: absolute;
left: 0;
right: 0;
bottom: 8px;;
margin: auto;
}
.wrapper .pot .top {
height: 20px;
width: 120px;
position: absolute;
left: -30px;
background: #431f16;
z-index: 2;
}
.wrapper .pot .top::after {
content: "";
height: 14px;
width: 120px;
position: absolute;
top: -8px;
left: 0;
border: 0;
border-top: 14px #220F0B solid;
border-radius: 100%;
}
.wrapper .pot::before,
.wrapper .pot::after {
content: "";
position: absolute;
border-color: #4D2319;
border-top-width: 40px;
border-right-width: 15px;
border-bottom-width: 40px;
border-left-width: 15px;
border-style: solid;
border-bottom-color: transparent;
}
.wrapper .pot::before {
left: -30px;
border-left-color: transparent;
}
.wrapper .pot::after {
right: -30px;
border-right-color: transparent;
}
@keyframes lean {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(-22.5deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(22.5deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(22.5deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(-22.5deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}</style>
В коде можно поменять у текста всё - от размера, до шрифта. Можно установить анимированный текст, бегущую строку и т.п.<div class="wrapper">
<div class="plant">
<div class="flower">
<div class="head">
<div class="face"></div>
</div>
</div>
<div class="leaf__one"></div>
<div class="leaf__two"></div>
<div class="leaf__three"></div>
</div>
<div class="pot">
<div class="top"></div>
</div>
</div>
<style>
.wrapper {
height: 340px;
width: 300px;
position: relative;
margin: 20px auto;
z-index: 2;
filter: drop-shadow(0 0 6px #aaa);
}
.wrapper .plant {
height: 100px;
width: 6px;
position: absolute;
left: 0;
right: 0;
bottom: 90px;
margin: auto;
background: #00e600;
z-index: 1;
transform-origin: center bottom;
animation: lean 3s .5s infinite;
}
.wrapper .plant .leaf__one {
height: 30px;
width: 30px;
background: #30862D;
position: relative;
top: 10px;
left: 6px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
transform: rotateZ(-67.5deg);
z-index: -2;
}
.wrapper .plant .leaf__two {
height: 26px;
width: 26px;
background: #30862D;
position: relative;
top: 12px;
right: 26px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-right-radius: 100%;
transform: rotateZ(67.5deg);
}
.wrapper .plant .leaf__three {
height: 24px;
width: 24px;
background: #30862D;
position: relative;
top: 22px;
left: 6px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
transform: rotateZ(-67.5deg);
}
.wrapper .plant .flower {
height: 40px;
width: 40px;
position: absolute;
top: -80px;
left: -40px;
animation: rotate 3s .5s infinite;
}
.wrapper .plant .flower::before {
content: "";
height: 40px;
width: 40px;
position: absolute;
top: -30px;
left: 20px;
background: #C2000A;
border-radius: 100%;
z-index: -1;
box-shadow: -37px 15px #C2000A, -47px 54px #C2000A, -26px 89px #C2000A, 15px 93px #C2000A, 43px 63px #C2000A, 36px 21px #C2000A;
}
.wrapper .plant .flower .head {
height: 80px;
width: 80px;
position: absolute;
border-radius: 100%;
background: #E8AD17;
box-shadow: 0 0 3px #333;
z-index: 10;
}
.wrapper .plant .flower .head .face {
height: 26.6666666667px;
width: 26.6666666667px;
position: absolute;
left: 0;
right: 0;
bottom: 10px;
margin: auto;
border: 4px transparent solid;
border-bottom: 4px black solid;
border-right: 4px black solid;
border-radius: 100%;
transform: rotate(45deg);
z-index: 10;
box-sizing: content-box;
}
.wrapper .plant .flower .head .face::before,
.wrapper .plant .flower .head .face::after {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: -10px;
background: black;
border-radius: 100%;
}
.wrapper .plant .flower .head .face::before {
top: 8px;
left: -16px;
}
.wrapper .plant .flower .head .face::after {
top: -16px;
right: 8px;
}
.wrapper .pot {
height: 80px;
width: 60px;
background: #4D2319;
position: absolute;
left: 0;
right: 0;
bottom: 8px;;
margin: auto;
}
.wrapper .pot .top {
height: 20px;
width: 120px;
position: absolute;
left: -30px;
background: #431f16;
z-index: 2;
}
.wrapper .pot .top::after {
content: "";
height: 14px;
width: 120px;
position: absolute;
top: -8px;
left: 0;
border: 0;
border-top: 14px #220F0B solid;
border-radius: 100%;
}
.wrapper .pot::before,
.wrapper .pot::after {
content: "";
position: absolute;
border-color: #4D2319;
border-top-width: 40px;
border-right-width: 15px;
border-bottom-width: 40px;
border-left-width: 15px;
border-style: solid;
border-bottom-color: transparent;
}
.wrapper .pot::before {
left: -30px;
border-left-color: transparent;
}
.wrapper .pot::after {
right: -30px;
border-right-color: transparent;
}
@keyframes lean {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(-22.5deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(22.5deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(22.5deg);
}
25% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
}
62.5% {
transform: rotate(-22.5deg);
}
75% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}</style>
В коде цветка тоже можно менять цвет и размер каждой детали. Лучше, конечно, уменьшать/увеличивать каждую деталь одновременно.
Второй цветок
<div class="flower-scene">
<div class="flower-head clearfix">
<div class="petal petal-top-left"></div>
<div class="petal petal-top-right"></div>
<div class="petal petal-bottom-left"></div>
<div class="petal petal-bottom-right"></div>
<div class="shoots"></div>
</div>
<div class="flower-body"></div>
<div class="flower-pot"></div>
<div class="flower-pot-shadow"></div>
</div>
<style>
@keyframes head-grows-up {
from {
top: 185px;
transform: scale(0.1);
}
to {
top: 0;
transform: scale(1);
}
}
@keyframes body-grows-up {
from {
top: 215px;
transform: scale(0.5);
}
to {
top: 75px;
transform: scale(1);
}
}
@keyframes sprout-grows-up-left {
from {
transform: scale(0);
right: -2px;
}
to {
transform: scale(1);
right: 9px;
}
}
@keyframes sprout-grows-up-right {
from {
transform: scale(0);
left: -2px;
}
to {
transform: scale(1);
left: 9px;
}
}
@keyframes shadow-rise {
from {
width: 110px;
left: 20px;
}
to {
width: 140px;
left: 5px;
}
}
.clearfix:after {
content: '';
display: table;
clear: both;
}
.flower-scene {
position: relative;
width: 150px;
height: 350px;
margin: 50px auto 0;
overflow: hidden;
}
.flower-head {
position: absolute;
top: 0;
width: 150px;
height: 150px;
z-index: 2;
animation-name: head-grows-up;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.petal {
width: 50%;
height: 50%;
float: left;
background-color: #FF5AB0;
}
.petal-top-left,
.petal-bottom-right {
border-radius: 0 50%;
}
.petal-top-right,
.petal-bottom-left {
border-radius: 50% 0;
}
.petal-top-left {
background-image: linear-gradient(
-45deg,
#941356 0%,
#E63B94 50%,
#FF5AB0 75%,
#FF7DC1 100%
);
}
.petal-top-right {
background-image: linear-gradient(
45deg,
#941356 0%,
#E63B94 50%,
#FF5AB0 75%,
#FF7DC1 100%
);
}
.petal-bottom-right {
background-image: linear-gradient(
135deg,
#941356 0%,
#E63B94 50%,
#FF5AB0 75%,
#FF7DC1 100%
);
}
.petal-bottom-left {
background-image: linear-gradient(
225deg,
#941356 0%,
#E63B94 50%,
#FF5AB0 75%,
#FF7DC1 100%
);
}
.shoots {
position: absolute;
width: 20%;
height: 20%;
border-radius: 50%;
background: #E2A928;
box-shadow: inset 0 0 10px 5px #FFEF42;
left: 40%;
top: 40%;
}
.flower-body {
position: absolute;
top: 75px;
left: 70px;
width: 10px;
height: 200px;
z-index: 1;
background-image: linear-gradient(#158633 30%, #28E259 60%);
animation-name: body-grows-up;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.flower-body:before {
content: '';
position: absolute;
top: 100px;
right: 9px;
width: 20px;
height: 20px;
border-radius: 0 50%;
background: #28E259;
animation-name: sprout-grows-up-left;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.flower-body:after {
content: '';
position: absolute;
top: 130px;
left: 9px;
width: 20px;
height: 20px;
border-radius: 50% 0;
background: #28E259;
animation-name: sprout-grows-up-right;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.flower-pot {
position: absolute;
bottom: 10px;
left: 35px;
width: 80px;
height: 70px;
border-radius: 0 0 20% 20%;
background-image: linear-gradient(#73460F 10%, #A56414);
z-index: 2;
}
.flower-pot:after {
content: '';
position: absolute;
width: 100px;
height: 15px;
border-radius: 0 0 5px 5px;
background: #905813;
left: -10px;
}
.flower-pot-shadow {
position: absolute;
width: 140px;
height: 30px;
border-radius: 50%;
background: #eaeaea;
bottom: 0px;
left: 5px;
z-index: 1;
animation-name: shadow-rise;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
Так же можно менять в коде размер и цвет частей цветка. Добавить текст. Посмотреть можно там же, где и первую картинку. Цветёт вырастает и вновь уменьшается.<div class="flower-head clearfix">
<div class="petal petal-top-left"></div>
<div class="petal petal-top-right"></div>
<div class="petal petal-bottom-left"></div>
<div class="petal petal-bottom-right"></div>
<div class="shoots"></div>
</div>
<div class="flower-body"></div>
<div class="flower-pot"></div>
<div class="flower-pot-shadow"></div>
</div>
<style>
@keyframes head-grows-up {
from {
top: 185px;
transform: scale(0.1);
}
to {
top: 0;
transform: scale(1);
}
}
@keyframes body-grows-up {
from {
top: 215px;
transform: scale(0.5);
}
to {
top: 75px;
transform: scale(1);
}
}
@keyframes sprout-grows-up-left {
from {
transform: scale(0);
right: -2px;
}
to {
transform: scale(1);
right: 9px;
}
}
@keyframes sprout-grows-up-right {
from {
transform: scale(0);
left: -2px;
}
to {
transform: scale(1);
left: 9px;
}
}
@keyframes shadow-rise {
from {
width: 110px;
left: 20px;
}
to {
width: 140px;
left: 5px;
}
}
.clearfix:after {
content: '';
display: table;
clear: both;
}
.flower-scene {
position: relative;
width: 150px;
height: 350px;
margin: 50px auto 0;
overflow: hidden;
}
.flower-head {
position: absolute;
top: 0;
width: 150px;
height: 150px;
z-index: 2;
animation-name: head-grows-up;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.petal {
width: 50%;
height: 50%;
float: left;
background-color: #FF5AB0;
}
.petal-top-left,
.petal-bottom-right {
border-radius: 0 50%;
}
.petal-top-right,
.petal-bottom-left {
border-radius: 50% 0;
}
.petal-top-left {
background-image: linear-gradient(
-45deg,
#941356 0%,
#E63B94 50%,
#FF5AB0 75%,
#FF7DC1 100%
);
}
.petal-top-right {
background-image: linear-gradient(
45deg,
#941356 0%,
#E63B94 50%,
#FF5AB0 75%,
#FF7DC1 100%
);
}
.petal-bottom-right {
background-image: linear-gradient(
135deg,
#941356 0%,
#E63B94 50%,
#FF5AB0 75%,
#FF7DC1 100%
);
}
.petal-bottom-left {
background-image: linear-gradient(
225deg,
#941356 0%,
#E63B94 50%,
#FF5AB0 75%,
#FF7DC1 100%
);
}
.shoots {
position: absolute;
width: 20%;
height: 20%;
border-radius: 50%;
background: #E2A928;
box-shadow: inset 0 0 10px 5px #FFEF42;
left: 40%;
top: 40%;
}
.flower-body {
position: absolute;
top: 75px;
left: 70px;
width: 10px;
height: 200px;
z-index: 1;
background-image: linear-gradient(#158633 30%, #28E259 60%);
animation-name: body-grows-up;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.flower-body:before {
content: '';
position: absolute;
top: 100px;
right: 9px;
width: 20px;
height: 20px;
border-radius: 0 50%;
background: #28E259;
animation-name: sprout-grows-up-left;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.flower-body:after {
content: '';
position: absolute;
top: 130px;
left: 9px;
width: 20px;
height: 20px;
border-radius: 50% 0;
background: #28E259;
animation-name: sprout-grows-up-right;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.flower-pot {
position: absolute;
bottom: 10px;
left: 35px;
width: 80px;
height: 70px;
border-radius: 0 0 20% 20%;
background-image: linear-gradient(#73460F 10%, #A56414);
z-index: 2;
}
.flower-pot:after {
content: '';
position: absolute;
width: 100px;
height: 15px;
border-radius: 0 0 5px 5px;
background: #905813;
left: -10px;
}
.flower-pot-shadow {
position: absolute;
width: 140px;
height: 30px;
border-radius: 50%;
background: #eaeaea;
bottom: 0px;
left: 5px;
z-index: 1;
animation-name: shadow-rise;
animation-duration: 5s;
animation-iteration-count: infinite;
}
</style>
Третий цветок
Фонтан цветов. Текст можно менять на свой, а также и его цвет, и размер. Код нашла на ресурсе https://codepen.io/ Посмотрите гаджет на сайте.
Другой вариант - взять готовые анимированные картинки и вставить их в гаджет. Найти можно в интернете. Например в Яндекс картинках и на сайтах:
<marquee behavior="slide" scrollamount="5" style="color: #7d64e0; font-size: 25px; font-weight: bolder; line-height: 100%; text-shadow: #000000 0px 1px 1px;">С 8 Марта!</marquee>
<svg id="pane" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 450 450" preserveaspectratio="xMidYMid meet" onload="init(60,false)">
<script type="text/javascript">
<![CDATA[
Math.rnd=function(von, bis) {
const min= Math.min(von, bis);
return Math.random() * (Math.max(von, bis) - min) + min;
}
function spline(x, y, minR, maxR) {
var
alpha = Math.rnd (0, 2 * Math.PI)
, mtx= Math.rnd (minR, maxR)
, mty= Math.rnd (minR, maxR / 1.4)
, tx= mtx * Math.sin (alpha)
, ty= mty * Math.cos (alpha)
, sx= (mtx * Math.rnd (0.1, 0.9)) * Math.sin (alpha)
, sy= mty * Math.cos (alpha)
, target = {x: Math.round(tx + x), y: Math.round(ty + (y * 1.1))}
, spline = {x: Math.round(sx + x), y: Math.round(sy + (y * Math.rnd (0.5, 0.9)))}
, path = 'M' + x + ' ' + y + 'Q' + spline.x + ' ' + spline.y + ',' + target.x + ' ' + target.y
, rotate = 'auto' + ((target.x > x) ? '-reverse' : '')
;
return {path: path, rotate: rotate};
}
function init(elements, visibility) {
const
BEGIN= 'begin'
, PATH= 'path'
, ROTATE= 'rotate'
, DUR= 'dur'
, D= 'd'
, STYLE= 'style'
, ID= 'id'
;
var
svg= document.getElementById ('pane')
, c= svg.getElementById ('pfad')
, d= svg.getElementById ('objekt')
;
for (var i= 1; i <= elements; i++) {
var
t= Math.rnd (2, 10)
, s= spline (225, 225, 25, 220)
, cln= c.cloneNode (true)
, dln= d.cloneNode (true)
;
cln.setAttribute (ID, 'pfad' + i);
cln.setAttribute (STYLE, 'visibility:' + (visibility ? 'visible' : 'hidden'));
cln.setAttribute (D, s.path);
svg.appendChild (cln);
dln.setAttribute (ID, 'objekt' + i);
dln.childNodes[1].setAttribute (ID, 'a1_' + i); // motion
dln.childNodes[1].setAttribute (PATH, s.path); // motion
dln.childNodes[1].setAttribute (ROTATE, s.rotate); // motion
dln.childNodes[1].setAttribute (DUR, t); // motion
dln.childNodes[3].setAttribute (DUR, t); // fill
dln.childNodes[5].setAttribute (DUR, t); // opacity
dln.childNodes[7].setAttribute (DUR, t); // scale
svg.appendChild (dln);
}
svg.removeChild (c);
svg.removeChild (d);
document.getElementById ('a1_1').setAttribute (BEGIN, '0s'); // Begin when all is set and done
}
]]>
</script>
<defs>
<g id="flower">
<defs>
<style>
circle {fill:yellow;stroke:lightgreen;sroke-width:0.5}
ellipse {fill:rose;stroke:pink;sroke-width:0.5}
</style>
<g id="blatt">
<ellipse cx="0" cy="0" rx="7" ry="10" transform="translate (0,10)"/>
</ellipse></g>
</defs>
<use xlink:href="#blatt"/>
<use xlink:href="#blatt" transform="rotate(72)"/>
<use xlink:href="#blatt" transform="rotate(144)"/>
<use xlink:href="#blatt" transform="rotate(216)"/>
<use xlink:href="#blatt" transform="rotate(288)"/>
<circle cx="0" cy="0" r="3"/>
</circle></use></use></use></use></use></g>
</defs>
<style>
path {stroke:black;stroke-width:0.1;stroke-linecap:round;fill:none}
use {will-change:opacity}
</style>
<path id="pfad" d=""/>
<use id="objekt" width="150" height="150" xlink:href="#flower">
<animatemotion begin="a1_1.begin" repeatcount="indefinite" fill="remove"/>
<animate attributename="fill" attributetype="CSS" values="blue;lightblue;yellow" repeatcount="indefinite" fill="remove"/>
<animate attributename="opacity" values="0.1;1;0.6;" repeatcount="indefinite" fill="remove"/>
<animatetransform attributename="transform" type="scale" from="3" to="0" repeatcount="indefinite" fill="remove"/>
</animatetransform></animate></animate></animatemotion></use>
</path></svg>
<svg id="pane" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 450 450" preserveaspectratio="xMidYMid meet" onload="init(60,false)">
<script type="text/javascript">
<![CDATA[
Math.rnd=function(von, bis) {
const min= Math.min(von, bis);
return Math.random() * (Math.max(von, bis) - min) + min;
}
function spline(x, y, minR, maxR) {
var
alpha = Math.rnd (0, 2 * Math.PI)
, mtx= Math.rnd (minR, maxR)
, mty= Math.rnd (minR, maxR / 1.4)
, tx= mtx * Math.sin (alpha)
, ty= mty * Math.cos (alpha)
, sx= (mtx * Math.rnd (0.1, 0.9)) * Math.sin (alpha)
, sy= mty * Math.cos (alpha)
, target = {x: Math.round(tx + x), y: Math.round(ty + (y * 1.1))}
, spline = {x: Math.round(sx + x), y: Math.round(sy + (y * Math.rnd (0.5, 0.9)))}
, path = 'M' + x + ' ' + y + 'Q' + spline.x + ' ' + spline.y + ',' + target.x + ' ' + target.y
, rotate = 'auto' + ((target.x > x) ? '-reverse' : '')
;
return {path: path, rotate: rotate};
}
function init(elements, visibility) {
const
BEGIN= 'begin'
, PATH= 'path'
, ROTATE= 'rotate'
, DUR= 'dur'
, D= 'd'
, STYLE= 'style'
, ID= 'id'
;
var
svg= document.getElementById ('pane')
, c= svg.getElementById ('pfad')
, d= svg.getElementById ('objekt')
;
for (var i= 1; i <= elements; i++) {
var
t= Math.rnd (2, 10)
, s= spline (225, 225, 25, 220)
, cln= c.cloneNode (true)
, dln= d.cloneNode (true)
;
cln.setAttribute (ID, 'pfad' + i);
cln.setAttribute (STYLE, 'visibility:' + (visibility ? 'visible' : 'hidden'));
cln.setAttribute (D, s.path);
svg.appendChild (cln);
dln.setAttribute (ID, 'objekt' + i);
dln.childNodes[1].setAttribute (ID, 'a1_' + i); // motion
dln.childNodes[1].setAttribute (PATH, s.path); // motion
dln.childNodes[1].setAttribute (ROTATE, s.rotate); // motion
dln.childNodes[1].setAttribute (DUR, t); // motion
dln.childNodes[3].setAttribute (DUR, t); // fill
dln.childNodes[5].setAttribute (DUR, t); // opacity
dln.childNodes[7].setAttribute (DUR, t); // scale
svg.appendChild (dln);
}
svg.removeChild (c);
svg.removeChild (d);
document.getElementById ('a1_1').setAttribute (BEGIN, '0s'); // Begin when all is set and done
}
]]>
</script>
<defs>
<g id="flower">
<defs>
<style>
circle {fill:yellow;stroke:lightgreen;sroke-width:0.5}
ellipse {fill:rose;stroke:pink;sroke-width:0.5}
</style>
<g id="blatt">
<ellipse cx="0" cy="0" rx="7" ry="10" transform="translate (0,10)"/>
</ellipse></g>
</defs>
<use xlink:href="#blatt"/>
<use xlink:href="#blatt" transform="rotate(72)"/>
<use xlink:href="#blatt" transform="rotate(144)"/>
<use xlink:href="#blatt" transform="rotate(216)"/>
<use xlink:href="#blatt" transform="rotate(288)"/>
<circle cx="0" cy="0" r="3"/>
</circle></use></use></use></use></use></g>
</defs>
<style>
path {stroke:black;stroke-width:0.1;stroke-linecap:round;fill:none}
use {will-change:opacity}
</style>
<path id="pfad" d=""/>
<use id="objekt" width="150" height="150" xlink:href="#flower">
<animatemotion begin="a1_1.begin" repeatcount="indefinite" fill="remove"/>
<animate attributename="fill" attributetype="CSS" values="blue;lightblue;yellow" repeatcount="indefinite" fill="remove"/>
<animate attributename="opacity" values="0.1;1;0.6;" repeatcount="indefinite" fill="remove"/>
<animatetransform attributename="transform" type="scale" from="3" to="0" repeatcount="indefinite" fill="remove"/>
</animatetransform></animate></animate></animatemotion></use>
</path></svg>
https://miranimacii.ru/
https://www.gifki.org/
https://sunveter.ru/
https://acegif.com/ru/
https://avatarko.ru
Комментарии со спамом удаляются.