③ Эффекты для тени при наведении и анимация

Продолжим изучение темы CSS3 - тень блока. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Синтаксис свойства box-shadow
• ② Примеры тени для блока

Эффекты для тени при наведении

HTML

<p class="span-shadow"><span>ЭФФЕКТ 1</span><span>ЭФФЕКТ 2</span><span>ЭФФЕКТ 3</span><span>ЭФФЕКТ 4</span></p>

CSS

body {
  margin: 0;
  background:url(https://html5book.ru/wp-content/uploads/2015/10/background54.png);
}
.span-shadow {text-align:center}
.span-shadow span {
  display: inline-block;
  margin: 15px;
  padding: 20px 30px;
  cursor: pointer;
  border-radius: 10px;
  color: white;
  transition: .2s linear;
}
.span-shadow span:nth-child(1) {background:#3A2F28}
.span-shadow span:nth-child(1):hover {
  box-shadow: 0 0 0 2px white, 0 0 0 4px #3A2F28;
}
.span-shadow span:nth-child(2) {background:#C1F1E4}
.span-shadow span:nth-child(2):hover { 
  box-shadow: 200px 0 0 0 rgba(0,0,0,.3) inset;
}
.span-shadow span:nth-child(3) {background:#D2973D}
.span-shadow span:nth-child(3):hover {
  box-shadow: 0 0 0 2px #D2973D inset, 0 0 0 4px white inset;
}
.span-shadow span:nth-child(4) {
  background: #C76637;
  position: relative;
  top: 0;
  left: 0;
}
.span-shadow span:nth-child(4):hover {
  box-shadow: 2px 2px white, 4px 4px #C76637;
  top: -4px;
  left: -4px;
}

Анимация тени

HTML

<div class="rotate-shadows"></div>

CSS

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.rotate-shadows {
  width: 220px;
  height: 220px;
  position: relative;
}
.rotate-shadows:after,
.rotate-shadows:before {
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}
.rotate-shadows:before {
  box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
  animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
  box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
  animation: rotate-after 2s -0.5s linear infinite;
}
@keyframes rotate-after {
  0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
  50% {transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);}
  100% {transform: rotateZ(360deg) scaleX(1) scaleY(1);}
}
@keyframes rotate-before {
  0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
  50% {transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);}
  100% {transform: rotateZ(-360deg) scaleX(1) scaleY(1);}
}

Источник ↗