Главная » Украшение » Цветы на Blogger на праздники

Цветы на Blogger на праздники

И снова об украшении блога. Нашла в сети несколько цветов, которые можно использовать для поздравления своих читателей с праздниками, например, день влюблённых, 8 марта и так далее. К цветкам можно сделать любую надпись по своему усмотрению.

Устанавливаются цветы в статью в редакторе в режиме html. Если по размеру подходит цветок, то можно установить в боковую панель или в подвал.

Первый цветок

Цветок вращается по часовой стрелке. И при наведении курсора на лепесток, появляется тень. Код найден на codepen.io. Посмотреть цветок в живую можно на странице визуального редактора. Добавьте код в первое окно и нажмите кнопку Показать результат.

<div id="main">
	<div id="topleft" class="flower1"></div>
	<div id="topcenter" class="flower2"></div>
	<div id="topright" class="flower1"></div>
	<div id="leftcenter" class="flower2"></div>
	<div id="rightcenter" class="flower2"></div>
	<div id="bottomright" class="flower1"></div>
	<div id="bottomcenter" class="flower2"></div>
	<div id="bottomleft" class="flower1"></div>
	<div id="middle"></div>
	</div>
<style>
.flower1{
	background-image: radial-gradient(firebrick,darkviolet);
	background-color: blueviolet;
	width: 20vw;
	height: 20vw;
	border-radius: 500px 0px 500px 0px;
	box-shadow: 0 0 4vw 0vw rgba(0,0,0,0.3);
	transition: 0.3s;
	z-index: 2;
}
.flower1:hover,.flower2:hover {
	box-shadow: 0 0 5vw 1vw rgba(0,0,0,0.6);
}
.flower2 {
	background-image: radial-gradient(hotpink, crimson);
	background-color: tomato;
	width: 22vw;
	height: 22vw;
	border-radius: 500px 0px 500px 0px;
	box-shadow: 0 0 4vw 0vw rgba(0,0,0,0.3);
	transition: 0.3s;
	z-index: 1;
}
#main {
	width: 40vw;
	height: 40vw;
	margin: auto;
	margin-top: 8vw;
	background-color: transparent;
	position: relative;
	animation-name: rotate;
    animation-duration: 80s;
    animation-iteration-count: infinite;
	animation-timing-function: linear;
}
#topleft {
	position: absolute;
	left: 0vw;
	top: 0vw;
	transform: rotate(90deg);
}
#topright{
	position: absolute;
	right: 0vw;
	top: 0vw;
}
#bottomright {
	position: absolute;
	bottom: 0vw;
	right: 0vw;
	transform: rotate(-90deg);
}
#bottomleft {
	position: absolute;
	bottom: 0vw;
	left: 0vw;
}
#middle {
	width: 14vw;
	height: 14vw;
	position: absolute;
	background-image: radial-gradient(mistyrose,springgreen);
	background-color: springgreen;
	top: 20vw;
	left: 20vw;
	transform: translate(-7vw, -7vw);
	border-radius: 500vw;
	box-shadow: 0 0 4vw 0vw rgba(0,0,0,0.7);
	transition: 0.3s;
	z-index: 3;
}
#middle:hover {
	box-shadow: 0 0 5vw 1vw rgba(0,0,0,0.8);
}
#topcenter {
	position: absolute;
	top: 0vw;
	left: 9vw;
	transform: rotate(-45deg);
}
#leftcenter {
	position: absolute;
	left: 0vw;
	top: 9vw;
	transform: rotate(45deg);
}
#rightcenter {
	position: absolute;
	right: 0vw;
	top: 9vw;
	transform: rotate(45deg);
}
#bottomcenter {
	position: absolute;
	bottom: 0vw;
	left: 9vw;
	transform: rotate(-45deg);
}
@keyframes rotate {
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
</style>

Поменять в коде можно цвет лепестков и центр цветка. Они оформлены радиальным градиентом. Первые лепестки выделила в коде красным цветом. Вторые - синим. Центр цветка - зелёным.

По желанию можно поменять цвет теней лепестков при наведении курсора - выделила в коде оранжевым.

Цвет тени центра цветка при наведении курсора - выделила голубым.

Второй цветок

Цветок так же вращается, но при этом то исчезает, то появляется. Код подсмотрен на codepen.io

<div class="container">
<div class="droplet" id="no1"></div>
<div class="droplet" id="no2"></div>
<div class="droplet" id="no3"></div>
<div class="droplet" id="no4"></div>
<div class="droplet" id="no5"></div>
<div class="droplet" id="no6"></div>
<div class="droplet" id="no7"></div>
<div class="droplet" id="no8"></div>
<div class="droplet" id="no9"></div>
<div class="droplet" id="no10"></div>
</div>
<style>
.container {
  height: 100px;
  width: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.droplet {
  border-radius: 5px 90%;
  border-style: solid;
  border-width: 5px;
  border-color: firebrick;
  height: 100px;
  margin: auto;
  width: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  /* top: 50%;
    right: 50%;*/
  transform-origin: left top;
  opacity: 0;
}
#no1 {
  background: darkviolet;
  animation: spin 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
#no2 {
  background: violet;
  animation: spin2 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.05s;
}
#no3 {
  background: darkviolet;
  animation: spin3 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
}
#no4 {
  background: violet;
  animation: spin4 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.15s;
}

#no5 {
  background: darkviolet;
  animation: spin5 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}

#no6 {
  background: violet;
  animation: spin6 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.25s;
}

#no7 {
  background: darkviolet;
  animation: spin7 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.30s;
}

#no8 {
  background: violet;
  animation: spin8 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.35s;
}

#no9 {
  background: darkviolet;
  animation: spin9 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.40s;
}

#no10 {
  background: violet;
  animation: spin10 5s ease-out infinite;
  animation-fill-mode: forwards;
  animation-delay: 0.45s;
}

@keyframes spin {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(324deg) scale(1);
    transform: rotate(324deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(324deg) scale(1);
    transform: rotate(324deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}
@keyframes spin2 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(288deg) scale(1);
    transform: rotate(288deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(288deg) scale(1);
    transform: rotate(288deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}

@keyframes spin3 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(252deg) scale(1);
    transform: rotate(252deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(252deg) scale(1);
    transform: rotate(252deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}
@keyframes spin4 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(2160deg) scale(1);
    transform: rotate(216deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(216deg) scale(1);
    transform: rotate(216deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}
@keyframes spin5 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(180deg) scale(1);
    transform: rotate(180deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(180deg) scale(1);
    transform: rotate(180deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}
@keyframes spin6 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(144deg) scale(1);
    transform: rotate(144deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(144deg) scale(1);
    transform: rotate(144deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}
@keyframes spin7 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(108deg) scale(1);
    transform: rotate(108deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(108deg) scale(1);
    transform: rotate(108deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}
@keyframes spin8 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(72deg) scale(1);
    transform: rotate(72deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(72deg) scale(1);
    transform: rotate(72deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    ;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}
@keyframes spin9 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(36deg) scale(1);
    transform: rotate(36deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(36deg) scale(1);
    transform: rotate(36deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    ;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}
@keyframes spin10 {
  0% {
    opacity: 0;
    -webkit-transform: rotate(0deg) scale(0.01);
    transform: rotate(0deg) scale(0.01);
  }
  20% {
    opacity: 100;
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  60% {
    opacity: 100;
    -webkit-transform: rotate(0deg) scale(1);
    transform: rotate(0deg) scale(1);
  }
  80% {
    opacity: 0;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
  100% {
    ;
    -webkit-transform: rotate(720deg) scale(0.01);
    transform: rotate(720deg) scale(0.01);
  }
}
</style>

В коде можно поменять цвет лепестков. Их можно сделать однотонными или разноцветными. Цвет каждого лепестка в коде выделила синим цветом. Так же можно поменять цвет окантовки лепестков, в коде цвет выделила оранжевым.

Ваши комментарии:

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