Анимированные картинки для Blogger
Анимашки можно вставить в статью, установить для украшения сайта или применить на странице 404. Одним словом, устанавливайте там, где хотите.
Проверить работу кодов картинок можно в визуальном редакторе. Там же можно сделать нужные изменения в коде.
Робот
Робот парит вверх и вниз.
При желании можно изменить цвет робота, его глаз, цвет надписи и т. д.
Красным в коде выделила цвет облачка с движущимися точками.
Оранжевым — текст на груди робота
Зелёным — цвет текста
Синим — цвет рта
Розовым — цвет глаз
<div class='container'>
<div class='message'>
<div class='circle c1'></div>
<div class='circle c2'></div>
<div class='circle c3'></div>
</div>
<div class='casey'>
<div class='earl ear'></div>
<div class='earr ear'></div>
<div class='head'>
<div class='face'>
<div class='eye eyel'></div>
<div class='eye eyer'></div>
<div class='mouth'></div>
</div>
</div>
<div class="body">
<div class='c'>Робот</div>
</div>
<div class="arrow-down"></div>
</div>
<div class='shadow'></div>
</div>
<style>
.message{
background-color:#f1c40f;
width:50px;
height:30px;
border-radius:10px 10px 10px 0px;
position:absolute;
right:-50px;
top:-50px;
overflow:hidden;
text-align:center;
}
.circle{
background-color:#fff;
width:7px;
height:7px;
border-radius:10px;
display:inline-block;
margin-top:12px;
}
.c1{
animation: dots 2s ease .2s infinite;
}
.c2{
animation: dots 2s ease .1s infinite;
}
.c3{
animation: dots 2s ease infinite;
}
@keyframes dots{
0%{transform:translateX(0px);}
40%{transform:translateX(0px);}
50%{transform:translateX(150px);}
50.1%{transform:translateX(-150px);}
60%{transform:translateX(0px);}
100%{transform:translateX(0px);}
}
.head{
background-color:#e3e3e3;
width:95px;
height:50px;
border-radius:50px;
position:relative;
border-left:2px solid #b5b5b5;
}
.container{
position: absolute;
width:95px;
height:125px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.casey{
display:inline-block;
position:relative;
animation: move 6s ease infinite;
}
@keyframes move{
0%{transform:translateY(-0%)}
25%{transform:translateY(-14%)}
50%{transform:translateY(-0%)}
75%{transform:translateY(-14%)}
100%{transform:translateY(-0%)}
}
.face{
background-color:#2d2d2d;
width:78px;
height:35px;
border-radius:50px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.eye{
border-radius:50%;
background-color:#00008B;
width:14px;
height:14px;
position:absolute;
transform:scaleY(1);
top:6px;
}
.eyer{
right:10px;
animation: blink 3.5s ease infinite;
}
.eyel{
left:10px;
animation: blink 3.5s ease infinite;
}
@keyframes blink{
45%{transform:scaleY(1);}
47%{transform:scaleY(.1);}
49%{transform:scaleY(.1);}
50%{transform:scaleY(1);}
}
.mouth{
width:14px;
height: 8px;
border-radius: 0 0 100% 100%;
background-color: #00008B;
position:absolute;
bottom:5px;
left:32px;
transform:rotate(-10deg);
}
.ear{
width:18px;
height:20px;
background-color:#b5b5b5;
border-radius:2px;
position:absolute;
}
.earl{
top:-6px;
left:5px;
transform:rotate(-35deg);
animation:earL 2s ease infinite;
}
@keyframes earL{
0%{transform:rotate(-35deg);}
35%{transform:rotate(-45deg);}
65%{transform:rotate(-25deg);}
100%{transform:rotate(-35deg);}
}
.earr{
top:-6px;
right:5px;
transform:rotate(35deg);
animation:earR 2s ease infinite;
}
@keyframes earR{
0%{transform:rotate(35deg);}
35%{transform:rotate(45deg);}
65%{transform:rotate(25deg);}
100%{transform:rotate(35deg);}
}
.body{
background-color:#e3e3e3;
width:60px;
height:60px;
margin:0 auto;
margin-top:5px;
border-left:2px solid #b5b5b5;
border-radius: 20% 20% 100% 100%;
position:relative;
}
.body:after{
content:"";
position:absolute;
background-color:#e3e3e3;
border-top:1px solid #b5b5b5;
width:40px;
height:15px;
left:-47px;
top:-6px;
border-radius: 100%;
transform:rotate(-75deg);
z-index:10;
transform-origin:40px 10px;
animation: leftArm 6s ease infinite;
}
@keyframes leftArm{
0%{transform:rotate(-75deg)}
25%{transform:rotate(35deg)}
30%{transform:rotate(30deg)}
35%{transform:rotate(40deg)}
50%{transform:rotate(-75deg)}
75%{transform:rotate(-75deg)}
100%{transform:rotate(-75deg)}
}
.body:before{
content:"";
position:absolute;
background-color:#e3e3e3;
width:40px;
height:15px;
right:-40px;
top:-10px;
border-radius: 100%;
transform:rotate(75deg);
animation: rightArm 6s ease infinite;
transform-origin:0px 15px;
}
@keyframes rightArm{
0%{transform:rotate(75deg)}
25%{transform:rotate(85deg)}
50%{transform:rotate(75deg)}
75%{transform:rotate(85deg)}
100%{transform:rotate(75deg)}
}
.c{
font-weight:bold;
font-family:arial;
color:#00008B;
font-size:12px;
margin-left:5px;
position:absolute;
top:3px;
}
.arrow-down{
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid #000;
margin:0 auto;
transform:translateY(-1px);
position:relative;
z-index:-1;
}
.shadow{
width:40px;
height:4px;
background-color:rgba(0,0,0,.2);
border-radius: 100%;
margin:0 auto;
animation: shadow 6s ease infinite;
}
@keyframes shadow{
0%{transform:scaleX(1)}
25%{transform:scaleX(.3)}
50%{transform:scaleX(1)}
75%{transform:scaleX(.3)}
100%{transform:scaleX(1)}
}
</style>
Смайлики
Смайлики целуют друг друга в щёчки.
В коде можно поменять у смайликов цвет щёчек. Выделила красным цветом.
<div class='container'>
<div id='l-ball' class='ball'>
<div class='face face-l'>
<div class='eye eye-l'></div>
<div class='eye eye-r'></div>
<div class='mouth'></div>
</div>
</div><div id='r-ball' class='ball'>
<div class='face face-r'>
<div class='eye eye-l eye-r-p'></div>
<div class='eye eye-r eye-r-p'></div>
<div class='mouth mouth-r'></div>
<div class='kiss-m'>
<div class='kiss'></div>
<div class='kiss'></div>
</div>
</div>
</div>
</div>
<style>
.container{
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:232px;
}
.face{
width:70px;
height:30px;
position:absolute;
right:0;
top:30px;
border-top-right-radius:15px;
}
#r-ball{
animation: kiss 4s ease infinite;
background-color:white;
}
@keyframes kiss{
40%{transform:translate(0px);}
50%{transform:translate(30px) rotate(20deg);}
60%{transform:translate(-33px);}
67%{transform:translate(-33px);}
77%{transform:translate(0px);}
}
.kiss{
background-colo:red;
width:13px;
height:10px;
background-color:white;
border-radius:50%;
border-left:5px solid;
}
.kiss-m{
position:absolute;
left:20px;
top:22px;
opacity:0;
animation:kiss-m 4s ease infinite;
}
@keyframes kiss-m{
0%{opacity:0;}
55%{opacity:0;}
55.1%{opacity:1;}
66%{opacity:1;}
66.1%{opacity:0;}
}
.mouth-r{
animation:mouth-m 4s ease infinite;
}
@keyframes mouth-m{
0%{opacity:1;}
54.9%{opacity:1;}
55%{opacity:0;}
66%{opacity:0;}
66.1%{opacity:1;}
}
.face:after{
position:absolute;
content:"";
width:18px;
height:8px;
background-color:#c40000;
left:-5px;
top:20px;
border-radius:50%;
}
.face:before{
position:absolute;
content:"";
width:18px;
height:8px;
background-color:#c40000;
right:-8px;
top:20px;
border-radius:50%;
z-index:-1;
}
.face-r{
left:0;
top:37px;
}
.face-r:after{
width:10px;
height:10px;
left:5px;
}
.face-r:before{
width:10px;
height:10px;
right:-4px;
}
.eye{
width:15px;
height:14px;
border-radius:50%;
border-bottom:5px solid;
position:absolute;
}
.eye-r-p{
border-top:5px solid;
border-bottom:0px solid;
}
.eye-l{
left:10px;
}
.eye-r{
right:5px;
}
.mouth{
width:30px;
height:14px;
border-radius:50%;
border-bottom:5px solid;
position:absolute;
bottom:-5px;
transform:translate(3px);
left:0;
right:0;
margin: auto;
}
.ball{
border: 8px solid;
width:100px;
height:100px;
border-radius:50%;
display:inline-block;
vertical-align:top;
position:relative;
}
#r-ball{
position:relative;
z-index:40;
}
#l-ball{
animation: close 4s ease infinite;
position:relative;
z-index:50;
background-color:#fff;
}
.face-l{
animation: face 4s ease infinite;
}
@keyframes close{
0%{transform:translate(0)}
20%{transform:translate(20px)}
35%{transform:translate(20px)}
55%{transform:translate(0px)}
100%{transform:translate(0px)}
}
@keyframes face{
0%{transform:translate(0) rotate(0);}
10%{transform:translate(0) rotate(0);}
20%{transform:translate(5px) rotate(-2deg);}
28%{transform:translate(0) rotate(0);}
35%{transform:translate(5px) rotate(-2deg);}
50%{transform:translate(0) rotate(0);}
100%{transform:translate(0) rotate(0);}
}
</style>
Комментарии со спамом удаляются.