- AdminCP
- #1
- Kayıtlı
- 1 Yıl 4 Ay 16 Gün
6 Şub 2024
35
306
0
1
25
Germany
Kod:
<div class="christmas-tree-container">
<div class="glow"></div>
<div class="shadow"></div>
<div class="christmas-tree">
<div class="branches">
<div class="branch" style="height: 119px; width: 10px; transform: translateZ(2px) rotate(34.681215187631096deg)"></div>
<div class="branch" style="height: 118px; width: 10px; transform: translateZ(4px) rotate(348.7174250152794deg)"></div>
<div class="branch" style="height: 117px; width: 10px; transform: translateZ(6px) rotate(31.210740887713726deg)"></div>
<div class="branch" style="height: 116px; width: 10px; transform: translateZ(8px) rotate(233.45339071143718deg)"></div>
<div class="branch" style="height: 115px; width: 10px; transform: translateZ(10px) rotate(331.45290001306245deg)"></div>
<div class="branch" style="height: 114px; width: 10px; transform: translateZ(12px) rotate(84.20009689171471deg)"></div>
<div class="branch" style="height: 113px; width: 10px; transform: translateZ(14px) rotate(38.21923806262963deg)"></div>
<div class="branch" style="height: 112px; width: 10px; transform: translateZ(16px) rotate(205.55504459754792deg)"></div>
<div class="branch" style="height: 111px; width: 10px; transform: translateZ(18px) rotate(347.57645814744023deg)"></div>
<div class="branch" style="height: 110px; width: 10px; transform: translateZ(20px) rotate(265.04610369676556deg)"></div>
<div class="branch" style="height: 109px; width: 10px; transform: translateZ(22px) rotate(260.0773266087016deg)"></div>
<div class="branch" style="height: 108px; width: 10px; transform: translateZ(24px) rotate(22.63256894780925deg)"></div>
<div class="branch" style="height: 107px; width: 10px; transform: translateZ(26px) rotate(34.87278076494749deg)"></div>
<div class="branch" style="height: 106px; width: 10px; transform: translateZ(28px) rotate(10.43628479794477deg)"></div>
<div class="branch" style="height: 105px; width: 10px; transform: translateZ(30px) rotate(354.6608972585621deg)"></div>
<div class="branch" style="height: 104px; width: 10px; transform: translateZ(32px) rotate(128.36479963423508deg)"></div>
<div class="branch" style="height: 103px; width: 10px; transform: translateZ(34px) rotate(149.8344528202859deg)"></div>
<div class="branch" style="height: 102px; width: 10px; transform: translateZ(36px) rotate(318.4094020894314deg)"></div>
<div class="branch" style="height: 101px; width: 10px; transform: translateZ(38px) rotate(72.15844916553834deg)"></div>
<div class="branch" style="height: 100px; width: 10px; transform: translateZ(40px) rotate(119.16365954216234deg)"></div>
<div class="branch" style="height: 99px; width: 10px; transform: translateZ(42px) rotate(54.22899867226643deg)"></div>
<div class="branch" style="height: 98px; width: 10px; transform: translateZ(44px) rotate(229.41362070853663deg)"></div>
<div class="branch" style="height: 97px; width: 10px; transform: translateZ(46px) rotate(299.04816556636405deg)"></div>
<div class="branch" style="height: 96px; width: 10px; transform: translateZ(48px) rotate(296.0448351036062deg)"></div>
<div class="branch" style="height: 95px; width: 10px; transform: translateZ(50px) rotate(123.2980721729182deg)"></div>
<div class="branch" style="height: 94px; width: 10px; transform: translateZ(52px) rotate(144.51003557597116deg)"></div>
<div class="branch" style="height: 93px; width: 10px; transform: translateZ(54px) rotate(19.985343108261073deg)"></div>
<div class="branch" style="height: 92px; width: 10px; transform: translateZ(56px) rotate(197.668585918101deg)"></div>
<div class="branch" style="height: 91px; width: 10px; transform: translateZ(58px) rotate(191.2599581461715deg)"></div>
<div class="branch" style="height: 90px; width: 10px; transform: translateZ(60px) rotate(125.56361818161955deg)"></div>
<div class="branch" style="height: 89px; width: 10px; transform: translateZ(62px) rotate(33.74042027428858deg)"></div>
<div class="branch" style="height: 88px; width: 10px; transform: translateZ(64px) rotate(17.005473817700405deg)"></div>
<div class="branch" style="height: 87px; width: 10px; transform: translateZ(66px) rotate(66.8467514104387deg)"></div>
<div class="branch" style="height: 86px; width: 10px; transform: translateZ(68px) rotate(333.24133058271065deg)"></div>
<div class="branch" style="height: 85px; width: 10px; transform: translateZ(70px) rotate(329.93252980384943deg)"></div>
<div class="branch" style="height: 84px; width: 10px; transform: translateZ(72px) rotate(206.70066463629587deg)"></div>
<div class="branch" style="height: 83px; width: 10px; transform: translateZ(74px) rotate(220.35084745714005deg)"></div>
<div class="branch" style="height: 82px; width: 10px; transform: translateZ(76px) rotate(46.77966429898205deg)"></div>
<div class="branch" style="height: 81px; width: 10px; transform: translateZ(78px) rotate(352.70929575380853deg)"></div>
<div class="branch" style="height: 80px; width: 10px; transform: translateZ(80px) rotate(275.1466267201981deg)"></div>
<div class="branch" style="height: 79px; width: 10px; transform: translateZ(82px) rotate(231.9151904092238deg)"></div>
<div class="branch" style="height: 78px; width: 10px; transform: translateZ(84px) rotate(257.7250447917982deg)"></div>
<div class="branch" style="height: 77px; width: 10px; transform: translateZ(86px) rotate(12.30761034246422deg)"></div>
<div class="branch" style="height: 76px; width: 10px; transform: translateZ(88px) rotate(329.4999504854072deg)"></div>
<div class="branch" style="height: 75px; width: 10px; transform: translateZ(90px) rotate(320.1744749065184deg)"></div>
<div class="branch" style="height: 74px; width: 10px; transform: translateZ(92px) rotate(164.39819047594975deg)"></div>
<div class="branch" style="height: 73px; width: 10px; transform: translateZ(94px) rotate(333.6280694254632deg)"></div>
<div class="branch" style="height: 72px; width: 10px; transform: translateZ(96px) rotate(160.9316362610131deg)"></div>
<div class="branch" style="height: 71px; width: 10px; transform: translateZ(98px) rotate(309.45809667483707deg)"></div>
<div class="branch" style="height: 70px; width: 10px; transform: translateZ(100px) rotate(141.34010845287776deg)"></div>
<div class="branch" style="height: 69px; width: 10px; transform: translateZ(102px) rotate(16.473428254937037deg)"></div>
<div class="branch" style="height: 68px; width: 10px; transform: translateZ(104px) rotate(246.46057971113436deg)"></div>
<div class="branch" style="height: 67px; width: 10px; transform: translateZ(106px) rotate(0.3462686232005918deg)"></div>
<div class="branch" style="height: 66px; width: 10px; transform: translateZ(108px) rotate(16.028522343581237deg)"></div>
<div class="branch" style="height: 65px; width: 10px; transform: translateZ(110px) rotate(193.00083915752734deg)"></div>
<div class="branch" style="height: 64px; width: 10px; transform: translateZ(112px) rotate(267.2147184493369deg)"></div>
<div class="branch" style="height: 63px; width: 10px; transform: translateZ(114px) rotate(6.991433237506586deg)"></div>
<div class="branch" style="height: 62px; width: 10px; transform: translateZ(116px) rotate(275.6062233640779deg)"></div>
<div class="branch" style="height: 61px; width: 10px; transform: translateZ(118px) rotate(149.308433950684deg)"></div>
<div class="branch" style="height: 60px; width: 10px; transform: translateZ(120px) rotate(356.7124413004471deg)"></div>
<div class="branch" style="height: 59px; width: 10px; transform: translateZ(122px) rotate(343.92311326623deg)"></div>
<div class="branch" style="height: 58px; width: 10px; transform: translateZ(124px) rotate(242.43567377952544deg)"></div>
<div class="branch" style="height: 57px; width: 10px; transform: translateZ(126px) rotate(183.5903343245723deg)"></div>
<div class="branch" style="height: 56px; width: 10px; transform: translateZ(128px) rotate(340.8368337594074deg)"></div>
<div class="branch" style="height: 55px; width: 10px; transform: translateZ(130px) rotate(121.53299981179161deg)"></div>
<div class="branch" style="height: 54px; width: 10px; transform: translateZ(132px) rotate(306.83263030059976deg)"></div>
<div class="branch" style="height: 53px; width: 10px; transform: translateZ(134px) rotate(249.14285259602119deg)"></div>
<div class="branch" style="height: 52px; width: 10px; transform: translateZ(136px) rotate(270.41244517735834deg)"></div>
<div class="branch" style="height: 51px; width: 10px; transform: translateZ(138px) rotate(60.49605931235415deg)"></div>
<div class="branch" style="height: 50px; width: 10px; transform: translateZ(140px) rotate(44.48668771116065deg)"></div>
<div class="branch" style="height: 49px; width: 10px; transform: translateZ(142px) rotate(11.727529251114941deg)"></div>
<div class="branch" style="height: 48px; width: 10px; transform: translateZ(144px) rotate(242.5533084576943deg)"></div>
<div class="branch" style="height: 47px; width: 10px; transform: translateZ(146px) rotate(310.8140147181802deg)"></div>
<div class="branch" style="height: 46px; width: 10px; transform: translateZ(148px) rotate(131.38503336684886deg)"></div>
<div class="branch" style="height: 45px; width: 10px; transform: translateZ(150px) rotate(15.508169660678943deg)"></div>
<div class="branch" style="height: 44px; width: 10px; transform: translateZ(152px) rotate(347.3587115978441deg)"></div>
<div class="branch" style="height: 43px; width: 10px; transform: translateZ(154px) rotate(147.55881421798767deg)"></div>
<div class="branch" style="height: 42px; width: 10px; transform: translateZ(156px) rotate(268.14400276804116deg)"></div>
<div class="branch" style="height: 41px; width: 10px; transform: translateZ(158px) rotate(84.60249062077742deg)"></div>
<div class="branch" style="height: 40px; width: 10px; transform: translateZ(160px) rotate(27.39662233506798deg)"></div>
<div class="branch" style="height: 39px; width: 10px; transform: translateZ(162px) rotate(196.32390877401707deg)"></div>
<div class="branch" style="height: 38px; width: 10px; transform: translateZ(164px) rotate(265.71340688825444deg)"></div>
<div class="branch" style="height: 37px; width: 10px; transform: translateZ(166px) rotate(179.0913655194681deg)"></div>
<div class="branch" style="height: 36px; width: 10px; transform: translateZ(168px) rotate(171.01252816211496deg)"></div>
<div class="branch" style="height: 35px; width: 10px; transform: translateZ(170px) rotate(69.85159849463015deg)"></div>
<div class="branch" style="height: 34px; width: 10px; transform: translateZ(172px) rotate(234.40021699974844deg)"></div>
<div class="branch" style="height: 33px; width: 10px; transform: translateZ(174px) rotate(331.99338115370387deg)"></div>
<div class="branch" style="height: 32px; width: 10px; transform: translateZ(176px) rotate(22.769351879462853deg)"></div>
<div class="branch" style="height: 31px; width: 10px; transform: translateZ(178px) rotate(357.7900318163747deg)"></div>
<div class="branch" style="height: 30px; width: 10px; transform: translateZ(180px) rotate(143.1187911403578deg)"></div>
<div class="branch" style="height: 29px; width: 10px; transform: translateZ(182px) rotate(332.7906617432312deg)"></div>
<div class="branch" style="height: 28px; width: 10px; transform: translateZ(184px) rotate(19.17266686996647deg)"></div>
<div class="branch" style="height: 27px; width: 10px; transform: translateZ(186px) rotate(294.23121307490163deg)"></div>
<div class="branch" style="height: 26px; width: 10px; transform: translateZ(188px) rotate(104.16427751826403deg)"></div>
<div class="branch" style="height: 25px; width: 10px; transform: translateZ(190px) rotate(161.2966738351053deg)"></div>
<div class="branch" style="height: 24px; width: 10px; transform: translateZ(192px) rotate(51.142520997357444deg)"></div>
<div class="branch" style="height: 23px; width: 10px; transform: translateZ(194px) rotate(43.56269137604954deg)"></div>
<div class="branch" style="height: 22px; width: 10px; transform: translateZ(196px) rotate(180.3196218529231deg)"></div>
<div class="branch" style="height: 21px; width: 10px; transform: translateZ(198px) rotate(310.81087294851307deg)"></div>
<div class="branch" style="height: 20px; width: 10px; transform: translateZ(200px) rotate(232.27088795485994deg)"></div>
<div class="branch" style="height: 19px; width: 10px; transform: translateZ(202px) rotate(122.1432573836863deg)"></div>
<div class="branch" style="height: 18px; width: 10px; transform: translateZ(204px) rotate(2.618777818555209deg)"></div>
<div class="branch" style="height: 17px; width: 10px; transform: translateZ(206px) rotate(323.2374157337921deg)"></div>
<div class="branch" style="height: 16px; width: 10px; transform: translateZ(208px) rotate(209.99732963621372deg)"></div>
<div class="branch" style="height: 15px; width: 10px; transform: translateZ(210px) rotate(69.17027621955594deg)"></div>
<div class="branch" style="height: 14px; width: 10px; transform: translateZ(212px) rotate(325.07546122683254deg)"></div>
<div class="branch" style="height: 13px; width: 10px; transform: translateZ(214px) rotate(125.68932554381246deg)"></div>
<div class="branch" style="height: 12px; width: 10px; transform: translateZ(216px) rotate(113.74891944063533deg)"></div>
<div class="branch" style="height: 11px; width: 10px; transform: translateZ(218px) rotate(277.1892985994867deg)"></div>
</div>
<div class="ornaments">
<div class="ornament" style="transform:
rotateZ(74.18195006159374deg) translateX(24.47629393268575px) translateZ(142.094824269257px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(149.36612310876347deg) translateX(40.025340978034976px) translateZ(79.8986360878601px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(212.09325782663709deg) translateX(40.54162899826523px) translateZ(77.83348400693907px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(296.69352031915037deg) translateX(16.41139147241298px) translateZ(174.35443411034808px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(331.10899889806603deg) translateX(44.10691033013445px) translateZ(63.57235867946221px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(27.912579162273783deg) translateX(27.97397544401533px) translateZ(128.10409822393868px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(112.079357446376deg) translateX(43.452265765751775px) translateZ(66.19093693699291px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(165.0176098764839deg) translateX(51.46208291685598px) translateZ(34.1516683325761px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(232.90465693101066deg) translateX(54.62766198535617px) translateZ(21.489352058575335px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(293.7367141588189deg) translateX(46.718916775172005px) translateZ(53.12433289931197px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(316.30564085618266deg) translateX(34.84116762734435px) translateZ(100.63532949062262px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(11.379557741375423deg) translateX(53.384327184310926px) translateZ(26.462691262756284px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(71.25828125568222deg) translateX(18.935082197931855px) translateZ(164.25967120827258px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(146.28985019085576deg) translateX(45.5506002530458px) translateZ(57.7975989878168px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(212.47422524281248deg) translateX(45.07783566985365px) translateZ(59.68865732058541px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(259.63583272453315deg) translateX(21.706549198174656px) translateZ(153.17380320730138px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(359.5169780615048deg) translateX(52.65215574798813px) translateZ(29.39137700804747px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(7.648816881655303deg) translateX(20.02449219827666px) translateZ(159.90203120689335px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(110.70506342489166deg) translateX(39.98352032865296px) translateZ(80.06591868538817px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(152.70774451515308deg) translateX(41.466325633178386px) translateZ(74.13469746728646px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(185.70668377357828deg) translateX(24.771915188187606px) translateZ(140.91233924724958px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(268.4510405682885deg) translateX(25.59590236236034px) translateZ(137.61639055055863px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(350.1218965989999deg) translateX(25.58100326583964px) translateZ(137.67598693664144px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(13.807122032828687deg) translateX(32.90304986569141px) translateZ(108.38780053723437px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(111.11952167502264deg) translateX(20.3980203725593px) translateZ(158.4079185097628px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(144.99978203747173deg) translateX(35.91632722651053px) translateZ(96.33469109395786px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(230.0859077979078deg) translateX(18.857486748929304px) translateZ(164.57005300428278px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(263.7777322748411deg) translateX(38.881059660249434px) translateZ(84.47576135900225px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(302.8663802891916deg) translateX(36.0349458497481px) translateZ(95.86021660100762px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(42.38708214024698deg) translateX(48.68829941906199px) translateZ(45.246802323752036px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(113.75827463722669deg) translateX(16.504178204922404px) translateZ(173.98328718031038px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(165.56220370002217deg) translateX(15.439778072617806px) translateZ(178.24088770952878px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(184.32114536699336deg) translateX(44.99813320117171px) translateZ(60.00746719531314px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(243.02774704617585deg) translateX(31.691422987343298px) translateZ(113.23430805062681px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(334.1160945528591deg) translateX(48.137228399650624px) translateZ(47.4510864013975px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(12.861505424642207deg) translateX(35.55233323622724px) translateZ(97.79066705509103px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(70.04807957648991deg) translateX(42.98604191066475px) translateZ(68.055832357341px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(158.58911930089084deg) translateX(37.36516214559826px) translateZ(90.53935141760694px) rotateY(75deg)"></div>
<div class="ornament" style="transform:
rotateZ(209.45727099424053deg) translateX(48.45925147680734px) translateZ(46.16299409277063px) rotateY(75deg)"></div>
</div>
<div class="tree-top">
<div class="star" style="transform: translateZ(225px) translateY(-4.25px) rotateX(-90deg)"></div>
<div class="star" style="transform: translateZ(225px) translateY(-4.5px) rotateX(-90deg)"></div>
<div class="star" style="transform: translateZ(225px) translateY(-4.75px) rotateX(-90deg)"></div>
<div class="star" style="transform: translateZ(225px) translateY(-5px) rotateX(-90deg)"></div>
<div class="star" style="transform: translateZ(225px) translateY(-5.25px) rotateX(-90deg)"></div>
<div class="star" style="transform: translateZ(225px) translateY(-5.5px) rotateX(-90deg)"></div>
<div class="star" style="transform: translateZ(225px) translateY(-5.75px) rotateX(-90deg)"></div>
<div class="star" style="transform: translateZ(225px) translateY(-6px) rotateX(-90deg)"></div>
<div class="star" style="transform: translateZ(225px) translateY(-6.25px) rotateX(-90deg)"></div>
</div>
</div>
</div>
<style>
:root {
--christmas-tree-green-1: #047a07;
--christmas-tree-green-2: #0b6e4f;
--christmas-tree-green-3: #08a045;
--christmas-tree-green-4: #073b3a;
--christmas-tree-ornament-1: #ffba08;
--christmas-tree-ornament-2: #4cc9f0;
--christmas-tree-ornament-3: #ffffff;
--christmas-tree-ornament-4: #f72585;
}
.christmas-tree-container {
perspective: 400px;
position: relative;
height: 60px;
display: table;
margin: 0 auto;
margin-bottom: 55px;
}
.christmas-tree-container .glow {
position: absolute;
top: -40px;
width: 100px;
height: 100px;
background: radial-gradient(circle at center, white, transparent 50px);
animation: christmas-tree-glow 5s infinite linear;
}
.christmas-tree-container .shadow {
position: absolute;
top: 225px;
left: -20px;
width: 140px;
height: 70px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.2);
}
.christmas-tree {
position: relative;
margin-top: 240px;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
transform-style: preserve-3d;
animation: christmas-tree-rotate 10s infinite linear;
}
.christmas-tree .branches,
.christmas-tree .ornaments,
.christmas-tree .tree-top {
transform-style: preserve-3d;
display: flex;
align-items: center;
justify-content: center;
}
.christmas-tree .branch {
position: absolute;
border-radius: 5px;
background-color: var(--christmas-tree-green-1);
transform-origin: center center;
}
.christmas-tree .branch:nth-child(3n + 2) { background-color: var(--christmas-tree-green-2); }
.christmas-tree .branch:nth-child(3n + 1) { background-color: var(--christmas-tree-green-3); }
.christmas-tree .branch:nth-child(4n + 2) { background-color: var(--christmas-tree-green-4); }
.christmas-tree .ornament {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--christmas-tree-ornament-1);
transform-origin: center center;
transform-style: preserve-3d;
}
.christmas-tree .ornament:nth-child(4n + 0) { background-color: var(--christmas-tree-ornament-2); }
.christmas-tree .ornament:nth-child(4n + 1) { background-color: var(--christmas-tree-ornament-3); }
.christmas-tree .ornament:nth-child(4n + 2) { background-color: var(--christmas-tree-ornament-4); }
.christmas-tree .star {
transform-style: preserve-3d;
transform: translateZ(225px) translateY(-4px) rotateX(-90deg);
}
.christmas-tree .star,
.christmas-tree .star:before,
.christmas-tree .star:after {
position: absolute;
content: '';
height: 0;
width: 0;
border-top: solid 10px yellow;
border-left: solid 15px transparent;
border-right: solid 15px transparent;
position: absolute;
top: 0;
left: calc(50% - 15px);
}
.christmas-tree .star:before {
transform: rotate(72deg);
top: -11px;
left: -15px;
}
.christmas-tree .star:after {
transform: rotate(287deg);
top: -11px;
left: -15px;
}
@keyframes christmas-tree-rotate {
0% { transform: rotateX(60deg) rotateZ(0); }
99.99999% { transform: rotateX(60deg) rotateZ(360deg); }
}
@keyframes christmas-tree-glow {
0% { transform: scale(1.1); opacity: 0.15; }
50% { transform: scale(0.7); opacity: 0.25; }
100% { transform: scale(1.1); opacity: 0.15; }
}
</style>