Праздник Хэллоуин на Blogger
- Ведьмы
- Черные кошки
- Свечи
- Призраки и черепа
- Пауки и паутина
- Летучие мыши
- Чучело
- Совы
В гаджете или в статье можно поставить тематическую картинку, статичную или движущуюся (гифку), страшную или смешную, с символами праздника, что бы поздравить читателей.
Цвета Хэллоуина - оранжевый, фиолетовый и черный. Сайт можно на время украсить этими цветами (заголовки, фон и т.д.)
Ниже несколько кодов для оформления сайт атрибутами Хэллоуина.
Привидение
Приведение летает. К картинке можно добавить текст
<div id="container">
<div id="spooky">
<div id="body">
<div id="eyes"></div>
<div id="mouth"></div>
<div id="feet">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
<div id="shadow"></div>
</div>
<style>
#container{
margin: 15% auto;
width: 400px;
height: 400px;
padding: 0;
box-sizing: border-box;
background-image:linear-gradient( #424f84, skyblue);
}
*:after,
*:before{
box-sizing: inherit;
}
#spooky{
margin: 10% auto;
width: 80%;
height: 80%;
animation: floaty 2s infinite;
}
#spooky #body {
position: relative;
margin: 50px auto 0;
width: 180px;
height: 220px;
background: #f2fbf1;
border-top-left-radius: 90px;
border-top-right-radius: 90px;
}
#spooky #body:before,
#spooky #body:after{
content: " ";
position: absolute;
top: 130px;
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
background: #f2fbf1;
animation: floaty .2s infinite;
}
#spooky #body:before{
left: -18px;
}
#spooky #body:after{
right: -18px;
}
#spooky #body #eyes{
display: flex;
justify-content: space-between;
margin: 0 auto;
padding: 90px 0 0;
width: 90px;
height: 20px;
}
#spooky #body #eyes:before,
#spooky #body #eyes:after{
content: " ";
display: block;
width: 30px;
height: 30px;
background: #252c49;
border-radius: 50%;
}
#spooky #body #mouth{
background: #252c49;
margin: 25px auto 0;
width: 60px;
height: 30px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
}
#spooky #body #mouth:before{
content: " ";
display: block;
background: #fff;
margin-left: 20px;
width: 10px;
height: 10px;
}
#spooky #body #feet{
position: absolute;
display: flex;
bottom: -18px;
width: 180px;
height: 36px;
}
#spooky #body #feet > *,
#spooky #body #feet::before,
#spooky #body #feet::after{
content: " ";
width: 36px;
height: 36px;
background: #f2fbf1;
border-radius: 50%;
}
#shadow{
margin: -90px auto 0;
background: #252c49;
width: 180px;
height: 40px;
border-radius: 50%;
animation: zoomy 2s infinite;
}
@keyframes floaty{
0%, 100%{
transform: translateY(0);
}
50%{
transform: translateY(-20px);
}
}
@keyframes zoomy{
0%, 100%{
transform: scale(1);
}
50%{
transform: scale(0.8);
}
}
</style>
Изменить можно фон - выделила в коде красным.Цвет тени приведения - оранжевым.
Тело приведения - синим цветом.
Голубым цветом - рот и глазки
Кот и пауки
Кот наклоняет голову, а пауки бегают вверх и вниз. Картинка довольно большая. Если ставить в боковую панель, то виджет желательно уменьшить.
<div class="contenedor">
<div class="calabaza">
<span class="calabazita"></span><span class="calojos"></span><span class="calojitos"></span></div>
<div class="cat">
<div class="leg"></div>
<div class="cola"></div>
<div class="body1"></div>
<div class="body3"></div>
<div class="leg3"></div>
<div class="orejas"><div class="orejitas"></div></div>
<div class="head">
<span class="head3"></span>
<span class="head5"></span>
<span class="head7"></span>
<span class="ojos"></span>
<span class="ojos3"></span>
<span class="nariz"></span>
<div class="hut"></div>
</div>
</div>
<div class="tela"><span class="telas"></span><span class="telas3"></span>
<div class="tela3"><span class="telas"></span><span class="telas3"></span>
</div>
<div class="ara">
<span class="legs5"></span>
<span class="legs7"></span>
<span class="bodys"></span>
<span class="oaras"></span></div>
<div class="ara3">
<span class="legs5"></span>
<span class="legs7"></span>
<span class="bodys"></span>
<span class="oaras"></span></div>
</div>
<style>
.contenedor{
position:relative;
width:600px;
height:600px;
border-radius:100%;
background:#121212;
margin:231px auto;
}
.cat{
position:absolute;
margin:0 25px
}
.body1{
position:absolute;
width: 90px;
height: 150px;
border-top: 30px solid black;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
-moz-border-radius: 100px / 100px;
-webkit-border-radius: 100px / 100px;
border-radius: 100px / 100px;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
margin:192px 145px
}
.body1::before{
content:"";
display:block;
border-top: 21px solid black;
border-left: 5px solid transparent;
border-right:5px solid transparent;
height: 0;
width: 21px;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
margin: -12px -30px
}
.body1::after{
content:"";
display:block;
width: 80px;
height: 150px;
border-top: 30px solid black;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
-moz-border-radius: 100px / 100px;
-webkit-border-radius: 100px / 100px;
border-radius: 100px / 100px;
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
margin:-30px -87px
}
.leg{
position:absolute;
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 90px solid #060606;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
transform:rotate(-12deg);
-moz-transform:rotate(-12deg);
-webkit-transform:rotate(-12deg);
margin:251px 283px
}
.body3{
position:absolute;
width:95px;
height:87px;
border-radius:100%;
background:black;
margin:261px 210px;
transform:rotate(-55deg);
-moz-transform:rotate(-55deg);
-webkit-transform:rotate(-55deg);
}
.cola {
position:absolute;
width:90px;
height:25px;
border-radius:100%;
background:#060606;
margin:321px 145px;
animation:lado5 3s alternate infinite;
-moz-animation:lado5 3s alternate infinite;
-webkit-animation:lado5 3s alternate infinite;
}
.leg3{
position:absolute;
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 60px solid #060606;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
margin:291px 275px;
transform:rotate(-12deg);
-moz-transform:rotate(-12deg);
-webkit-transform:rotate(-12deg);}
.leg3::before{
content:"";
display:block;
width:50px;
height:55px;
border-radius:100%;
border-top:5px solid #060606;
margin:0 -60px
}
.head{
position:absolute;
width:90px;
height:85px;
border-radius:100%;
background:black;
margin:159px 241px;
animation:lado 3s alternate infinite;
-moz-animation:lado 3s alternate infinite;
-webkit-animation:lado 3s alternate infinite;
}
.orejas {
position:absolute;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 30px solid black;
transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);
margin:152px 231px;
animation:lado3 3s alternate infinite;
-moz-animation:lado3 3s alternate infinite;
-webkit-animation:lado3 3s alternate infinite;
}
.orejas::before {
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-bottom: 30px solid black;
transform:rotate(-140deg);
-moz-transform:rotate(-140deg);
-webkit-transform:rotate(-140deg);
margin:-55px 0px;
}
.orejitas {
position:absolute;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #333;
margin:12px -9px;
}
.orejitas::before {
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid #333;
margin:-62px 11px;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
.head3{
position:absolute;
width:30px;
height:12px;
border-radius:0 0 30px 30px;
background:black;
margin:65px -5px
}
.head3::before{
content:"";
position:absolute;
width:30px;
height:14px;
border-radius:0 0 30px 30px;
background:black;
margin:-14px -7px
}
.head3::after{
content:"";
position:absolute;
width:30px;
height:14px;
border-radius:0 0 30px 30px;
background:black;
margin:-25px -7px
}
.head5{
position:absolute;
width:30px;
height:12px;
border-radius:0 0 30px 30px;
background:black;
margin:65px 63px;
}
.head5::before{
content:"";
position:absolute;
width:30px;
height:14px;
border-radius:0 0 30px 30px;
background:black;
margin:-14px 9px
}
.head5::after{
content:"";
position:absolute;
width:30px;
height:14px;
border-radius:0 0 30px 30px;
background:black;
margin:-25px 9px
}
.head7{
position:absolute;
width:25px;
height:12px;
border-radius:12px 12px 0 0;
background:black;
margin:-3px 7px;
transform:rotate(-33deg);
-moz-transform:rotate(-33deg);
-webkit-transform:rotate(-33deg);
}
.head7::before{
content:"";
position:absolute;
width:21px;
height:14px;
border-radius: 30px 30px 0 0;
background:black;
margin:3px 21px
}
.head7::after{
content:"";
position:absolute;
width:30px;
height:16px;
border-radius:30px 30px 0 0;
background:black;
margin:14px 30px
}
.ojos{
position:absolute;
width:17px;
height:19px;
border-radius:100%;
background:#377773;
margin:39px 16px;
transform:rotate(-21deg);
-moz-transform:rotate(-21deg);
-webkit-transform:rotate(-21deg);
}
.ojos::before{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background:#004430;
margin:7px 3px;
}
.ojos::after{
content:"";
display:block;
width:5px;
height:5px;
border-radius:100%;
background:white;
margin:-19px 5px
}
.ojos3{
position:absolute;
width:17px;
height:19px;
border-radius:100%;
background:#377773;
margin:39px 57px;
transform:rotate(21deg);
-moz-transform:rotate(21deg);
-webkit-transform:rotate(21deg);
}
.ojos3::before{
content:"";
display:block;
width:12px;
height:12px;
border-radius:100%;
background:#004430;
margin:7px 3px;
}
.ojos3::after{
content:"";
display:block;
width:5px;
height:5px;
border-radius:100%;
background:white;
margin:-19px 6px
}
.nariz{
position:absolute;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 7px solid #333;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
margin:55px 37px;
}
.nariz::before{
content:"";
display:block;
width:14px;
height:14px;
border-radius:100%;
background:#121212;
margin:-3px -12px;
}
.nariz::after{
content:"";
display:block;
width:14px;
height:14px;
border-radius:100%;
background:#121212;
margin:-14px 0px;}
.hut{
position:absolute;
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 100px solid black;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
margin:-85px -40px;
transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
}
.hut::before{
content:"";
display:block;
width:90px;
height:9px;
border-radius:100%;
background:#333;
margin:90px -43px
}
.hut::after{
content:"";
display:block;
width:21px;
height:21px;
border-radius:100%;
background:#D84400;
margin:-192px -12px;
}
.calabaza{
position:absolute;
width:201px;
height:152px;
border-radius:100%;
background:#D84400;
margin:321px 192px;
animation:on 3s alternate infinite;
-moz-animation:on 3s alternate infinite;
-webkit-animation:on 3s alternate infinite;
}
.calabaza::before{
content:"";
display:block;
width:152px;
height:152px;
border-radius:100%;
background:#D6774F;
margin:0 25px
}
.calabaza::after{
content:"";
display:block;
width:112px;
height:152px;
border-radius:100%;
background:#D84400;
margin:-152px 45px
}
.calabazita{
position:absolute;
width:70px;
height:152px;
border-radius:100%;
background:#D6774F;
margin:-152px 65px;
}
.calabazita::before{
content:"";
position:absolute;
width:30px;
height:152px;
border-radius:100%;
background:#D84400;
margin:0px 21px;
}
.calojos{
position:absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 50px solid #C63500;
margin:-112px 30px
}
.calojos::before{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 50px solid #C63500;
margin:0px 50px
}
.calojos::after{
content:"";
display:block;
width:90px;
height:60px;
border-radius:100%;
border-bottom:30px solid #C63500;
margin:3px -3px;
}
.calojitos{
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#D6774F;
margin:-93px 50px;
}
.calojitos::before{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:#D6774F;
margin:0px 80px;
}
.calojitos::after{
content:"";
display:block;
width:12px;
height:12px;
background:#D6774F;
margin:45px 45px;
}
.tela{
position:absolute;
width: 100px;
height: 100px;
background: black;
margin:132px 70px
}
.tela:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid black;
border-left: 29px solid #121212;
border-right: 29px solid #121212;
width: 42px;
height: 0;
}
.tela:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid black;
border-left: 29px solid #121212;
border-right: 29px solid #121212;
width: 42px;
height: 0;
}
.telas{
position:absolute;
width:3px;
height:100px;
background:#121212;
z-index:333;
margin:0px 50px;
}
.telas::before{
content:"";
position:absolute;
width:100px;
height:3px;
background:#121212;
z-index:333;
margin:50px -50px;
}
.telas::after{
content:"";
position:absolute;
width:100px;
height:3px;
background:#121212;
z-index:333;
margin:50px -47px;
transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
.telas3{
position:absolute;
width:100px;
height:3px;
background:#121212;
z-index:333;
margin:50px 0px;
transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
.tela3{
position:absolute;
width: 100px;
height: 100px;
background: black;
margin:60px 370px
}
.tela3:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid black;
border-left: 29px solid #121212;
border-right: 29px solid #121212;
width: 42px;
height: 0;
}
.tela3:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid black;
border-left: 29px solid #121212;
border-right: 29px solid #121212;
width: 42px;
height: 0;
}
.bodys{
position:absolute;
width:35px;
height:30px;
border-radius:100%;
background:#333;
margin:112px -16px
}
.oaras{
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:black;
border:3px solid white;
margin:121px -12px;
}
.oaras::before{
content:"";
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:black;
border:3px solid white;
margin:-3px 9px;
}
.legs5{
position:absolute;
width:70px;
height:30px;
border-radius:100%;
border-top:6px solid black;
margin:116px -33px
}
.legs5::before{
content:"";
position:absolute;
width:70px;
height:30px;
border-radius:100%;
border-top:6px solid black;
margin:0px 0px
}
.legs5::after{
content:"";
position:absolute;
width:70px;
height:30px;
border-radius:100%;
border-top:6px solid black;
margin:6px 0px
}
.legs7{
position:absolute;
width:70px;
height:30px;
border-radius:100%;
border-top:6px solid black;
margin:134px -33px
}
.ara{
position:absolute;
width:3px;
height:112px;
background:black;
margin:102px 50px;
animation:sube 3s alternate infinite;
-moz-animation:sube 3s alternate infinite;
-webkit-animation:sube 3s alternate infinite;
}
.ara3{
position:absolute;
margin:132px 421px;
width:3px;
height:112px;
background:black;
animation:sube3 3s alternate infinite;
-moz-animation:sube3 3s alternate infinite;
-webkit-animation:sube3 3s alternate infinite;
}
@keyframes sube{
0%{margin: 0px 50px;}
100%{margin: 102px 50px;}
}
@-moz-keyframes sube{
0%{margin: 0px 50px;}
100%{margin: 102px 50px;}
}
@-webkit-keyframes sube{
0%{margin: 0px 50px;}
100%{margin: 102px 50px;}
}
@keyframes sube3 {
0%{margin: 63px 421px;}
100%{margin: 132px 421px;}
}
@-moz-keyframes sube3 {
0%{margin: 63px 421px;}
100%{margin: 132px 421px;}
}
@-webkit-keyframes sube3 {
0%{margin: 63px 421px;}
100%{margin: 132px 421px;}
}
@keyframes lado {
0%{transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);}
100%{transform:rotate(3deg);
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);}
}
@-moz-keyframes lado {
0%{transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);}
100%{transform:rotate(3deg);
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);}
}
@-webkit-keyframes lado {
0%{transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);}
100%{transform:rotate(3deg);
-moz-transform:rotate(3deg);
-webkit-transform:rotate(3deg);}
}
@keyframes lado3 {
0%{transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);}
100%{transform:rotate(63deg);
-moz-transform:rotate(63deg);
-webkit-transform:rotate(63deg);}
}
@-moz-keyframes lado3 {
0%{transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);}
100%{transform:rotate(63deg);
-moz-transform:rotate(63deg);
-webkit-transform:rotate(63deg);}
}
@-webkit-keyframes lado3 {
0%{transform:rotate(70deg);
-moz-transform:rotate(70deg);
-webkit-transform:rotate(70deg);}
100%{transform:rotate(63deg);
-moz-transform:rotate(63deg);
-webkit-transform:rotate(63deg);}
}
@keyframes lado5 {
0%{transform:rotate(-9deg);
-moz-transform:rotate(-9deg);
-webkit-transform:rotate(-9deg);}
100%{transform:rotate(9deg);
-moz-transform:rotate(9deg);
-webkit-transform:rotate(9deg);}
}
@-moz-keyframes lado5 {
0%{transform:rotate(-9deg);
-moz-transform:rotate(-9deg);
-webkit-transform:rotate(-9deg);}
100%{transform:rotate(9deg);
-moz-transform:rotate(9deg);
-webkit-transform:rotate(9deg);}
}
@-webkit-keyframes lado5 {
0%{transform:rotate(-9deg);
-moz-transform:rotate(-9deg);
-webkit-transform:rotate(-9deg);}
100%{transform:rotate(9deg);
-moz-transform:rotate(9deg);
-webkit-transform:rotate(9deg);}
}
@keyframes on {
0%,25%{opacity:0.7;}
35%,45%{opacity:0.9;}
55%,65%{opacity:0.7;}
75%,100%{opacity:1;}
}
@-moz-keyframes on {
0%,25%{opacity:0.7;}
35%,45%{opacity:0.9;}
55%,65%{opacity:0.7;}
75%,100%{opacity:1;}
}
@-webkit-keyframes on {
0%,25%{opacity:0.7;}
35%,45%{opacity:0.9;}
55%,65%{opacity:0.7;}
75%,100%{opacity:1;}
}
</style>
Автор Judith NeumannЧереп
Череп показывает язык, при наведении курсора.
<div class="skull">
<div class="eyeshadow"></div>
<div class="eyeshadow"></div>
<div class="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div class="nose"></div>
<div class="mouth">
<ul class="teeth">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="tongue"></div>
</div>
</div>
<style>
.skull{
position:relative;
margin:0 auto;
border-radius:50%;
height:280px;
width:300px;
background-color:#f2f2f2;
-webkit-filter: drop-shadow(0 10px 8px black);
filter: drop-shadow(0 10px 8px black);
}
.mouth{
width:65%;
margin:auto;
left:0;
right:0;
position:absolute;
background-color:blue;
height:80%;
border-radius:15px;
top:30%;/*67%*/
background-color:#f2f2f2;
}
.teeth{
list-style:none;
margin:0;
padding:0;
width:100%;
height:40px;
position:absolute;
bottom:0;
overflow:hidden;
}
.teeth li{
float:left;
height:100%;
width:25%;
box-shadow:0 2px 1px grey;
}
.eye, .eyeshadow{
border-radius:50%;
position:absolute;
top:40%;
z-index:2;
left:25px;
}
.eyeshadow{
width:150px;
height:120px;
background-color:transparent;
margin-top: -20px;
box-shadow: 0 -8px 7px -9px grey;
left:10px;
}
.eye{
width:120px;
height:120px;
background-color:#ddd;
overflow:hidden;
box-shadow:inset 0 3px 14px black;
background-image:radial-gradient(at bottom left, #ddd,grey);
transition:0.3s;
}
.eyeshadow + .eyeshadow{
right:10px;
}
.eyes div + div, .eyeshadow + .eyeshadow{
left:inherit;
}
.eyes div + div{
right:25px;
background-image:radial-gradient(at bottom right, #ddd,grey);
}
.nose{
position:absolute;
margin:auto;
left:0;
right:0;
top:82%;
width:20px;
height:30px;
background-color:#aaa;
z-index:3;
border-radius: 40%/7px;
border-top-left-radius:59%;
border-top-right-radius:59%;
box-shadow: inset 0 6px 14px rgba(1,1,1,0.4);
}
.skull:hover .eye{
background-image: radial-gradient(circle at 50% 60%, black 15%, red 26%, #ee4545 34%, white 40%, white, white);
background-image: -webkit-radial-gradient(50% 60%, circle, black 15%, red 26%, #ee4545 34%, white 40%, white, white);
box-shadow:none;
-webkit-animation:look 0.5s 2s;
animation:look 0.5s ;
}
.skull:hover .nose{
box-shadow:none;
}
.tongue{
background-color:#dd6565;
height:200px;
width:90px;
margin: auto;
left:0;
right:0;
bottom:0;
position:absolute;
z-index:-1;
border-radius: 60%/60%;
display:none;
}
.skull:hover .tongue{
display:block;
-webkit-animation: 1s tongue forwards;
animation: 1s tongue forwards;
}
@-webkit-keyframes look{
100%{
background-image: radial-gradient(circle at 50% 50%, black 15%, red 26%, #ee4545 34%, white 40%, white, white);
background-image: -webkit-radial-gradient(50% 50%, circle, black 15%, red 26%, #ee4545 34%, white 40%, white, white);
}
}
@keyframes look{
100%{
background-image: radial-gradient(circle at 50% 50%, black 15%, red 26%, #ee4545 34%, white 40%, white, white);
background-image: -webkit-radial-gradient(50% 50%, circle, black 15%, red 26%, #ee4545 34%, white 40%, white, white);
}
}
@-webkit-keyframes tongue{
100%{
bottom: -60%;
}
}
@keyframes tongue{
100%{
bottom: -60%;
}
}
@media screen and (max-height:400px){
.skull{
transform: scale(0.7,0.7);
}
}
</style>
Автор JJ Garza
Комментарии со спамом удаляются.