html 点击旋转,CSS3 按钮触摸（点击）脉冲+环形旋转动效

CSS

语言：

CSSSCSS

确定

body {

background-color: #444;

color: #bbb;

}

button {

font-size: 300%;

outline: none;

}

fieldset {

text-align: center;

}

.custom-button {

position: relative;

margin: 0.25em 0.25em;

padding: 0;

border: none;

border-radius: 50%;

background: none;

transition: color 0.7s;

text-align: center;

overflow: visible;

width: 1.75em;

height: 1.75em;

}

.custom-button .custom-button__icon {

width: auto;

}

.custom-button__icon {

display: block;

}

.custom-button__text {

position: absolute;

opacity: 0;

pointer-events: none;

}

.custom-button::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: inherit;

height: inherit;

margin: 0;

border-radius: inherit;

opacity: 0;

pointer-events: none;

background-color: blue;

}

.custom-button--effect-yaya .custom-button__icon {

text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.2);

transition: text-shadow 0.3s;

}

.custom-button--effect-yaya:focus .custom-button__icon {

text-shadow: -2px -2px 0 rgba(0, 0, 0, 0.2);

}

.custom-button--effect-yaya {

color: #286aab;

}

.custom-button--effect-yaya:hover {

color: #3c8ddc;

}

.custom-button--effect-yaya:hover:focus {

transition: none;

color: #3c8ddc;

animation: effect-yaya__anim-push 1s linear;

}

@keyframes effect-yaya__anim-push {

from {

color: #286aab;

}

}

.custom-button--effect-yaya:focus {

color: #286aab;

animation: effect-yaya__anim-colorVariations 5s 1s ease-in-out infinite;

}

@keyframes effect-yaya__anim-colorVariations {

50% {

color: #3c8ddc;

}

}

.custom-button--effect-yaya::before {

background: rgba(111, 148, 182, 0.1);

}

.custom-button--effect-yaya:focus::before {

animation: effect-yaya__anim-drip 0.3s forwards;

}

@keyframes effect-yaya__anim-drip {

0% {

transform: scale3d(1, 1, 1);

}

25%,

50% {

opacity: 1;

}

50% {

transform: scale3d(2, 2, 1);

}

100% {

opacity: 0.5;

transform: scale3d(1, 1, 1);

}

}

.custom-button--effect-yaya {

width: 1.35em;

height: 1.35em;

}

.custom-button--effect-yaya::before {

top: -0.2em;

left: -0.2em;

width: calc(100% + .4em);

height: calc(100% + .4em);

}

.custom-button--effect-yaya {

box-shadow: 0 0 0 transparent, 0 0 0 0.2em transparent;

}

.custom-button--effect-yaya:focus {

box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 0.2em rgba(0, 0, 0, 0.2);

}

.custom-button--effect-yaya::before {

box-shadow: inset 0 0 0 transparent;

transition: box-shadow 0.3s 0.3s, backgound-color 0.3s 0.15s, border 0.3s 0.3s;

}

.custom-button--effect-yaya:focus::before {

box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.2);

}

.custom-button--effect-yaya::after {

content: "";

position: absolute;

color: inherit;

width: 0.2em;

height: 0.2em;

margin-left: -0.1em;

bottom: -0.2em;

opacity: 0;

transition: opacity 0.7s;

transform-origin: 0.1em -0.675em;

background-color: #286aab;

transform: rotateZ(0deg);

animation-name: effect-yaya__anim-spin;

animation-duration: 1s;

animation-iteration-count: infinite;

animation-timing-function: linear;

animation-play-state: paused;

}

@keyframes effect-yaya__anim-spin {

25% {

background-color: #3c8ddc;

}

50% {

background-color: #286aab;

transform: rotateZ(180deg);

}

75% {

background-color: #3c8ddc;

}

100% {

background-color: #286aab;

transform: rotateZ(360deg);

}

}

.custom-button--effect-yaya:focus::after {

opacity: 1;

animation-play-state: running;

}

.custom-button--effect-yaya.button-backward::after,

.custom-button--effect-yaya.button-forward::after {

animation-duration: 0.5s;

}

.custom-button--effect-yaya.button-backward::after {

animation-direction: reverse;

}