» » Пасхальные яйца сss 2

Пасхальные яйца сss 2

В прошлой статье я написала несколько кодов с пасхальными яйцами для поздравления читателей блога на этот праздник. Но успела до праздника написать не о всех кодах. Теперь уже немного поздно, но думаю, на следующий год эти коды кому-нибудь пригодятся. Коды устанавливаются либо в статью, либо как гаджет в Дизайн/ Добавить гаджет/HTML/JavaScript. Коды можно подгонять по размеру, менять цвет.

Два яйца и цыплёнок 

Надпись можно поменять. А так же можно подобрать свои цвета.
пасха
Код:
<div class="eggs">
  <h1>С Днём Пасхи!</h1>
  <div class="egg egg-left">
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
    <div class="stripe"></div>
  </div>
  <div class="egg egg-right">
  </div>
</div>
<div class="head">
  <div class="eye"> </div> 
  <div class="beak"></div>
</div>
<style>
.eggs {
  margin: 1em auto;
  text-align: center;
}
.egg {
  width: 140px;
  height: 200px;
  background: #ff9d57;
  margin: 1em auto;
  border-radius: 50%/60% 60% 40% 40%;
  display: inline-block;
  overflow: hidden;
  grid-template-rows: repeat(5, 20%);
}
.stripe {
  height: 20%;
}
.stripe:not(:first-child){
  border-top:2px solid #fff;
}
.stripe:nth-child(1){
  background-color:#FFC0CB
}
.stripe:nth-child(2){
  background-color:#FFB6C1
}
.stripe:nth-child(3){
  background-color:#FF69B4
}
.stripe:nth-child(4){
  background-color:#FF1493
}
.stripe:nth-child(5){
  background-color: #C71585
}
.egg-left{
   transform: rotate(-25deg);
}
.egg-right {
  background-color: #EC407A;
  transform: rotate(25deg);
}
.head{
  position: relative;
  width: 60px;
  height: 60px;
  margin: 1em auto;
  border: 3px solid #FFFF00;
  border-radius: 60%;
  background:#FFFF00;
}
.eye{
  width: 5px;
  height: 5px;
  margin: 1em auto;
  border: 3px solid #000000;
  border-radius: 60%;
  background: #000000;
 }
.beak{
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 30px solid red;
    border-bottom: 10px solid transparent;
    top: 1.3rem;
    right: 3.6rem;
    transform: rotate(-10deg);
}
</style>

Три ярких яичка 

Среднее яйцо качается из стороны в сторону.
Три ярких яичка
Код: 
<div header=""> <h1> Счастливой пасхи! </h1> </div>
<div class="egg1">
  <div class="sprinkel"> </div>
<div class="sprinkel1"> </div>
  <div class="sprinkel2"> </div>
  <div class="sprinkel3"> </div>
  <div class="sprinkel4"> </div>
</div>
<div class="smallEggRight">
</div>
  <div class="smallEggLeft">
</div>
</div>
<style>
.container{
  width: 750px;
  height: 550px;
  border-radius: 10px;
  margin: 0 auto;
  background-color: lavender;
}
.egg1{
  background-color: pink;
  width: 250px;
  height: 350px;
  border-radius: 50%;
  margin: 0 auto;
  z-index: 2;
  -webkit-animation-name: color; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 25s; /* Safari 4.0 - 8.0 */
  -moz-animation-name: color; /* firefox */
  -moz-animation-duration: 25s; /* firefox */
  -o-animation-name: color; /* Opera*/
  -o-animation-duration: 25s; /* Opera*/
  animation-name: color;
  animation-duration: 25s;
  animation-iteration-count: infinite;
  -webkit-animation: color 25s infinite;
                   
  animation: rotate 3s linear alternate infinite,
              color 25s infinite;
}
.sprinkel{
  background-color: DarkRed;
  width: 30px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  top: 150px;
  left: 5px;
    z-index: 2;
}
.sprinkel1{
  background-color: DarkRed;
  width: 30px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  top: 250px;
  left: 80px;
    z-index: 2;
}
.sprinkel2{
  background-color: DarkRed;
  width: 30px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  top: -40px;
  left: 100px;
    z-index: 2;
}
.sprinkel3{
  background-color: DarkRed;
  width: 30px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  top: 100px;
  left: 213px;
    z-index: 2;
}
.sprinkel4{
  background-color: DarkRed;
  width: 30px;
  height: 35px;
  border-radius: 50%;
  position: relative;
  top: 0px;
  left: 139px;
  z-index: 2;
}
.smallEggRight{
  background-image: linear-gradient(45deg , blue, indigo, violet);
  width: 200px;
  height: 300px;
  border-radius: 50%;
  margin: 0 auto;
   position: relative;
  top: -250px;
  left: 200px;
 z-index: 1;
transform: rotate(20deg);
}
.smallEggLeft{
  background-image: linear-gradient(45deg , blue, indigo, violet);
  width: 200px;
  height: 300px;
  border-radius: 50%;
  margin: 0 auto;
   position: relative;
  top: -550px;
  right: 200px;
 z-index: 1;
transform: rotate(-20deg);
}
@keyframes color{
  0%{background-color: pink;}
  25%{background-color: rgb(225, 20, 147);}
  50%{background-color: rgb(220  20  60);}
  100%{background-color: rgb(199, 21, 133);}
  }
}
@-webkit-keyframes rotate{ 
from{-webkit-transform: rotate(-15deg); }
to{-webkit-transform: rotate(15deg); } }
@keyframes rotate{
    from{transform: rotate(-15deg); }
    to{transform: rotate(15deg); } }
</style>
На этом всё, счастливой пасхи!

Отправить комментарий

Комментарии со спамом удаляются.