JS special effects
CSS3 special effects
CSS3 special effects cat hanging on the string swinging left and right animation
CSS3 special effects cat hanging on the string swinging left and right animation
CSS3 special effects cat hanging on the string swinging left and right animation
CSS3 special effect cat hanging on the string swinging left and right animation is an animated swinging effect made with CSS3
<head>
<meta charset="utf-8">
<title>css3貓掛在線(xiàn)球上左右搖擺動(dòng)畫(huà)特效</title>
<style>
.all-wrap {
? -webkit-animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
? ? ? ? ? animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}
.all {
? top: 10rem;
? left: calc(50% - 2.5rem);
? position: absolute;
? width: 5rem;
? height: 5rem;
? -webkit-transform-origin: center -20rem;
? ? ? ? ? transform-origin: center -20rem;
? -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
? ? ? ? ? animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
}
.all:before {
? height: 20rem;
? width: 2px;
? background-color: #DB242A;
? left: calc(50% - 1px);
? bottom: 20rem;
}
.yarn {
? position: absolute;
? top: 0;
? left: 0;
? width: 80px;
? height: 80px;
? border-radius: 50%;
? background-image: -webkit-radial-gradient(top left, circle, #e97c7f, #db242a 50%, #af1d22);
? background-image: radial-gradient(circle at top left, #e97c7f, #db242a 50%, #af1d22);
? z-index: 1;
}
.yarn:before, .yarn:after {
? position: absolute;
? width: 20px;
? height: 20px;
? border-radius: 50%;
? background-color: white;
? top: -1px;
}
.yarn:before {
? left: calc(50% 7px);
? background-color: #b1bce6;
}
.yarn:after {
? right: calc(50% 7px);
? background-color: #D5E8F8;
}
.cat-wrap {
? position: absolute;
? top: 0;
? left: calc(50% - 45px);
? width: 90px;
? height: 130px;
? -webkit-animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
? ? ? ? ? animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
? -webkit-transform-origin: top center;
? ? ? ? ? transform-origin: top center;
}
.cat {
? position: absolute;
? top: 0;
? left: 0;
? width: 100%;
? height: 100%;
? -webkit-animation: swing 7s 0.2s infinite both;
? ? ? ? ? animation: swing 7s 0.2s infinite both;
? -webkit-transform-origin: top center;
? ? ? ? ? transform-origin: top center;
}
.cat-upper {
? position: absolute;
? top: 0;
? left: 0;
? width: 100%;
? height: 100%;
? -webkit-transform-origin: top center;
? ? ? ? ? transform-origin: top center;
? z-index: 1;
}
.cat-upper .cat-leg {
? position: absolute;
? width: 20px;
? height: 100%;
? background-color: white;
? z-index: -1;
? background-image: -webkit-linear-gradient(left, #D5E8F8, #D5E8F8 20%, #8B9BD9);
? background-image: linear-gradient(to right, #D5E8F8, #D5E8F8 20%, #8B9BD9);
}
.cat-upper .cat-leg:nth-child(1) {
? border-top-left-radius: 100px;
? left: 10px;
}
.cat-upper .cat-leg:nth-child(1):after {
? left: 50%;
}
.cat-upper .cat-leg:nth-child(2) {
? border-top-left-radius: 0;
? border-top-right-radius: 100px;
? right: 10px;
}
.cat-upper .cat-leg:nth-child(2):after {
? right: 50%;
}
.cat-lower-wrap {
? height: 90%;
? width: 100%;
? position: absolute;
? top: 100%;
? width: 75px;
? left: calc(50% - 37.5px);
? -webkit-animation: reverse-swing 7s 0.2s infinite both;
? ? ? ? ? animation: reverse-swing 7s 0.2s infinite both;
? -webkit-transform-origin: top center;
? ? ? ? ? transform-origin: top center;
}
.cat-lower {
? position: absolute;
? top: 0;
? left: 0;
? width: 100%;
? height: 100%;
? -webkit-animation: swing 7s 0.5s infinite both;
? ? ? ? ? animation: swing 7s 0.5s infinite both;
? -webkit-transform-origin: top center;
? ? ? ? ? transform-origin: top center;
}
.cat-lower:after {
? position: absolute;
? top: 0;
? left: 0;
? width: 100%;
? height: 100%;
? border-radius: 100px;
? background-image: -webkit-radial-gradient(10px 50px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
? background-image: radial-gradient(circle at 10px 50px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
? z-index: 1;
}
.cat-lower .cat-leg, .cat-lower .cat-paw {
? z-index: -1;
? position: absolute;
? height: 20px;
? width: 20px;
? -webkit-animation: swing-leg 7s 0.3s infinite both;
? ? ? ? ? animation: swing-leg 7s 0.3s infinite both;
? z-index: 1;
? -webkit-transform-origin: top center;
? ? ? ? ? transform-origin: top center;
? border-top-left-radius: 20px;
? border-top-right-radius: 20px;
? background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9);
? background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9);
}
.cat-lower > .cat-leg {
? bottom: 20px;
}
.cat-lower > .cat-leg .cat-leg {
? top: 25%;
}
.cat-lower > .cat-leg .cat-leg {
? right: 0;
}
.cat-lower .cat-paw {
? top: 50%;
? border-radius: 50%;
? background-color: #fff;
}
.cat-lower .cat-tail {
? position: absolute;
? height: 15px;
? width: 10px;
? -webkit-animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
? ? ? ? ? animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
? -webkit-transform-origin: top center;
? ? ? ? ? transform-origin: top center;
? z-index: 0;
? background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9);
? background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9);
? border-bottom-left-radius: 10px;
? border-bottom-right-radius: 10px;
}
.cat-lower .cat-tail > .cat-tail {
? top: 50%;
}
.cat-lower > .cat-tail {
? left: calc(50% - 5px);
? top: 95%;
}
.cat-head {
? width: 90px;
? height: 90px;
? background-image: -webkit-radial-gradient(10px 10px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
? background-image: radial-gradient(circle at 10px 10px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9);
? border-radius: 50%;
? top: calc(100% - 45px);
}
.cat-face {
? position: absolute;
? top: 0;
? left: 0;
? height: 100%;
? width: 100%;
? -webkit-animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
? ? ? ? ? animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both;
? -webkit-transform-style: preserve-3d;
? ? ? ? ? transform-style: preserve-3d;
? -webkit-perspective: 100px;
? ? ? ? ? perspective: 100px;
}
.cat-ears {
? position: absolute;
? top: 0;
? left: 0;
? height: 50%;
? width: 100%;
? z-index: -1;
}
.cat-ear {
? width: 20px;
? height: 100%;
? position: absolute;
? border-radius: 5px;
? top: -10px;
}
.cat-ear:first-child {
? left: 0;
? -webkit-transform-origin: top left;
? ? ? ? ? transform-origin: top left;
? -webkit-transform: skewY(40deg);
? ? ? ? ? transform: skewY(40deg);
? background-color: white;
}
.cat-ear:first-child:before {
? left: 0;
? border-top-right-radius: 50%;
? border-bottom-right-radius: 50%;
? background-color: #D7EBFB;
}
.cat-ear:last-child {
? right: 0;
? -webkit-transform-origin: top right;
? ? ? ? ? transform-origin: top right;
? -webkit-transform: skewY(-40deg);
? ? ? ? ? transform: skewY(-40deg);
? background-color: #d1e6f7;
}
.cat-ear:last-child:before {
? right: 0;
? border-top-left-radius: 50%;
? border-bottom-left-radius: 50%;
? background-color: #e0f0fc;
}
.cat-ear:before {
? width: 60%;
? height: 100%;
? top: 10px;
? position: absolute;
? background-color: #fff;
}
.cat-eyes {
? position: absolute;
? top: 50%;
? width: 100%;
? height: 6px;
? -webkit-animation: blink 7s step-end infinite both;
? ? ? ? ? animation: blink 7s step-end infinite both;
}
.cat-eyes:before, .cat-eyes:after {
? position: absolute;
? height: 6px;
? width: 6px;
? border-radius: 50%;
? background-color: #4B4D75;
}
.cat-eyes:before {
? left: 20px;
}
.cat-eyes:after {
? right: 20px;
}
.cat-mouth {
? position: absolute;
? width: 12px;
? height: 8px;
? background-color: #4B4D75;
? top: 60%;
? left: calc(50% - 6px);
? border-top-left-radius: 50% 30%;
? border-top-right-radius: 50% 30%;
? border-bottom-left-radius: 50% 70%;
? border-bottom-right-radius: 50% 70%;
? -webkit-transform: translateZ(10px);
? ? ? ? ? transform: translateZ(10px);
}
.cat-mouth:before, .cat-mouth:after {
? position: absolute;
? width: 90%;
? height: 100%;
? border: 2px solid #9FA2CB;
? top: 80%;
? border-radius: 100px;
? border-top-color: transparent;
? z-index: -1;
}
.cat-mouth:before {
? border-left-color: transparent;
? right: calc(50% - 1px);
? -webkit-transform-origin: top right;
? ? ? ? ? transform-origin: top right;
? -webkit-transform: rotate(10deg);
? ? ? ? ? transform: rotate(10deg);
}
.cat-mouth:after {
? border-right-color: transparent;
? left: calc(50% - 1px);
? -webkit-transform-origin: top left;
? ? ? ? ? transform-origin: top left;
? -webkit-transform: rotate(-10deg);
? ? ? ? ? transform: rotate(-10deg);
}
.cat-whiskers {
? width: 50%;
? height: 8px;
? position: absolute;
? bottom: 25%;
? left: 25%;
? -webkit-transform-style: preserve-3d;
? ? ? ? ? transform-style: preserve-3d;
? -webkit-perspective: 60px;
? ? ? ? ? perspective: 60px;
}
.cat-whiskers:before, .cat-whiskers:after {
? position: absolute;
? height: 100%;
? width: 30%;
? border: 2px solid #9FA2CB;
? border-left: none;
? border-right: none;
}
.cat-whiskers:before {
? right: 100%;
? -webkit-transform-origin: right center;
? ? ? ? ? transform-origin: right center;
? -webkit-transform: rotateY(70deg) rotateZ(-10deg);
? ? ? ? ? transform: rotateY(70deg) rotateZ(-10deg);
}
.cat-whiskers:after {
? left: 100%;
? -webkit-transform-origin: left center;
? ? ? ? ? transform-origin: left center;
? -webkit-transform: rotateY(-70deg) rotateZ(10deg);
? ? ? ? ? transform: rotateY(-70deg) rotateZ(10deg);
}
@-webkit-keyframes bob {
? 0% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 6.25% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 12.5% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 18.75% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 25% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 31.25% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 37.5% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 43.75% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 50% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 56.25% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 62.5% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 68.75% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 75% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 81.25% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 87.5% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 93.75% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 100% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
}
@keyframes bob {
? 0% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 6.25% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 12.5% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 18.75% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 25% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 31.25% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 37.5% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 43.75% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 50% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 56.25% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 62.5% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 68.75% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 75% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 81.25% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 87.5% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
? 93.75% {
? ? -webkit-transform: translateY(-0.4rem);
? ? ? ? ? ? transform: translateY(-0.4rem);
? }
? 100% {
? ? -webkit-transform: translateY(0.4rem);
? ? ? ? ? ? transform: translateY(0.4rem);
? }
}
@-webkit-keyframes swing {
? 0% {
? ? -webkit-transform: rotate(5deg);
? ? ? ? ? ? transform: rotate(5deg);
? }
? 12.5% {
? ? -webkit-transform: rotate(-10deg);
? ? ? ? ? ? transform: rotate(-10deg);
? }
? 25% {
? ? -webkit-transform: rotate(10deg);
? ? ? ? ? ? transform: rotate(10deg);
? }
? 37.5% {
? ? -webkit-transform: rotate(-15deg);
? ? ? ? ? ? transform: rotate(-15deg);
? }
? 50% {
? ? -webkit-transform: rotate(23deg);
? ? ? ? ? ? transform: rotate(23deg);
? }
? 62.5% {
? ? -webkit-transform: rotate(-23deg);
? ? ? ? ? ? transform: rotate(-23deg);
? }
? 75% {
? ? -webkit-transform: rotate(15deg);
? ? ? ? ? ? transform: rotate(15deg);
? }
? 87.5% {
? ? -webkit-transform: rotate(-10deg);
? ? ? ? ? ? transform: rotate(-10deg);
? }
? 100% {
? ? -webkit-transform: rotate(5deg);
? ? ? ? ? ? transform: rotate(5deg);
? }
}
@keyframes swing {
? 0% {
? ? -webkit-transform: rotate(5deg);
? ? ? ? ? ? transform: rotate(5deg);
? }
? 12.5% {
? ? -webkit-transform: rotate(-10deg);
? ? ? ? ? ? transform: rotate(-10deg);
? }
? 25% {
? ? -webkit-transform: rotate(10deg);
? ? ? ? ? ? transform: rotate(10deg);
? }
? 37.5% {
? ? -webkit-transform: rotate(-15deg);
? ? ? ? ? ? transform: rotate(-15deg);
? }
? 50% {
? ? -webkit-transform: rotate(23deg);
? ? ? ? ? ? transform: rotate(23deg);
? }
? 62.5% {
? ? -webkit-transform: rotate(-23deg);
? ? ? ? ? ? transform: rotate(-23deg);
? }
? 75% {
? ? -webkit-transform: rotate(15deg);
? ? ? ? ? ? transform: rotate(15deg);
? }
? 87.5% {
? ? -webkit-transform: rotate(-10deg);
? ? ? ? ? ? transform: rotate(-10deg);
? }
? 100% {
? ? -webkit-transform: rotate(5deg);
? ? ? ? ? ? transform: rotate(5deg);
? }
}
@-webkit-keyframes swing-leg {
? 0% {
? ? -webkit-transform: rotate(0.5deg);
? ? ? ? ? ? transform: rotate(0.5deg);
? }
? 12.5% {
? ? -webkit-transform: rotate(-1deg);
? ? ? ? ? ? transform: rotate(-1deg);
? }
? 25% {
? ? -webkit-transform: rotate(1deg);
? ? ? ? ? ? transform: rotate(1deg);
? }
? 37.5% {
? ? -webkit-transform: rotate(-1.5deg);
? ? ? ? ? ? transform: rotate(-1.5deg);
? }
? 50% {
? ? -webkit-transform: rotate(2.3deg);
? ? ? ? ? ? transform: rotate(2.3deg);
? }
? 62.5% {
? ? -webkit-transform: rotate(-2.3deg);
? ? ? ? ? ? transform: rotate(-2.3deg);
? }
? 75% {
? ? -webkit-transform: rotate(1.5deg);
? ? ? ? ? ? transform: rotate(1.5deg);
? }
? 87.5% {
? ? -webkit-transform: rotate(-1deg);
? ? ? ? ? ? transform: rotate(-1deg);
? }
? 100% {
? ? -webkit-transform: rotate(0.5deg);
? ? ? ? ? ? transform: rotate(0.5deg);
? }
}
@keyframes swing-leg {
? 0% {
? ? -webkit-transform: rotate(0.5deg);
? ? ? ? ? ? transform: rotate(0.5deg);
? }
? 12.5% {
? ? -webkit-transform: rotate(-1deg);
? ? ? ? ? ? transform: rotate(-1deg);
? }
? 25% {
? ? -webkit-transform: rotate(1deg);
? ? ? ? ? ? transform: rotate(1deg);
? }
? 37.5% {
? ? -webkit-transform: rotate(-1.5deg);
? ? ? ? ? ? transform: rotate(-1.5deg);
? }
? 50% {
? ? -webkit-transform: rotate(2.3deg);
? ? ? ? ? ? transform: rotate(2.3deg);
? }
? 62.5% {
? ? -webkit-transform: rotate(-2.3deg);
? ? ? ? ? ? transform: rotate(-2.3deg);
? }
? 75% {
? ? -webkit-transform: rotate(1.5deg);
? ? ? ? ? ? transform: rotate(1.5deg);
? }
? 87.5% {
? ? -webkit-transform: rotate(-1deg);
? ? ? ? ? ? transform: rotate(-1deg);
? }
? 100% {
? ? -webkit-transform: rotate(0.5deg);
? ? ? ? ? ? transform: rotate(0.5deg);
? }
}
@-webkit-keyframes swing-tail {
? 0% {
? ? -webkit-transform: rotate(-2deg);
? ? ? ? ? ? transform: rotate(-2deg);
? }
? 12.5% {
? ? -webkit-transform: rotate(4deg);
? ? ? ? ? ? transform: rotate(4deg);
? }
? 25% {
? ? -webkit-transform: rotate(-4deg);
? ? ? ? ? ? transform: rotate(-4deg);
? }
? 37.5% {
? ? -webkit-transform: rotate(6deg);
? ? ? ? ? ? transform: rotate(6deg);
? }
? 50% {
? ? -webkit-transform: rotate(-9.2deg);
? ? ? ? ? ? transform: rotate(-9.2deg);
? }
? 62.5% {
? ? -webkit-transform: rotate(9.2deg);
? ? ? ? ? ? transform: rotate(9.2deg);
? }
? 75% {
? ? -webkit-transform: rotate(-6deg);
? ? ? ? ? ? transform: rotate(-6deg);
? }
? 87.5% {
? ? -webkit-transform: rotate(4deg);
? ? ? ? ? ? transform: rotate(4deg);
? }
? 100% {
? ? -webkit-transform: rotate(-2deg);
? ? ? ? ? ? transform: rotate(-2deg);
? }
}
@keyframes swing-tail {
? 0% {
? ? -webkit-transform: rotate(-2deg);
? ? ? ? ? ? transform: rotate(-2deg);
? }
? 12.5% {
? ? -webkit-transform: rotate(4deg);
? ? ? ? ? ? transform: rotate(4deg);
? }
? 25% {
? ? -webkit-transform: rotate(-4deg);
? ? ? ? ? ? transform: rotate(-4deg);
? }
? 37.5% {
? ? -webkit-transform: rotate(6deg);
? ? ? ? ? ? transform: rotate(6deg);
? }
? 50% {
? ? -webkit-transform: rotate(-9.2deg);
? ? ? ? ? ? transform: rotate(-9.2deg);
? }
? 62.5% {
? ? -webkit-transform: rotate(9.2deg);
? ? ? ? ? ? transform: rotate(9.2deg);
? }
? 75% {
? ? -webkit-transform: rotate(-6deg);
? ? ? ? ? ? transform: rotate(-6deg);
? }
? 87.5% {
? ? -webkit-transform: rotate(4deg);
? ? ? ? ? ? transform: rotate(4deg);
? }
? 100% {
? ? -webkit-transform: rotate(-2deg);
? ? ? ? ? ? transform: rotate(-2deg);
? }
}
@-webkit-keyframes reverse-swing {
? 0% {
? ? -webkit-transform: rotate(-5deg);
? ? ? ? ? ? transform: rotate(-5deg);
? }
? 12.5% {
? ? -webkit-transform: rotate(10deg);
? ? ? ? ? ? transform: rotate(10deg);
? }
? 25% {
? ? -webkit-transform: rotate(-10deg);
? ? ? ? ? ? transform: rotate(-10deg);
? }
? 37.5% {
? ? -webkit-transform: rotate(15deg);
? ? ? ? ? ? transform: rotate(15deg);
? }
? 50% {
? ? -webkit-transform: rotate(-23deg);
? ? ? ? ? ? transform: rotate(-23deg);
? }
? 62.5% {
? ? -webkit-transform: rotate(23deg);
? ? ? ? ? ? transform: rotate(23deg);
? }
? 75% {
? ? -webkit-transform: rotate(-15deg);
? ? ? ? ? ? transform: rotate(-15deg);
? }
? 87.5% {
? ? -webkit-transform: rotate(10deg);
? ? ? ? ? ? transform: rotate(10deg);
? }
? 100% {
? ? -webkit-transform: rotate(-5deg);
? ? ? ? ? ? transform: rotate(-5deg);
? }
}
@keyframes reverse-swing {
? 0% {
? ? -webkit-transform: rotate(-5deg);
? ? ? ? ? ? transform: rotate(-5deg);
? }
? 12.5% {
? ? -webkit-transform: rotate(10deg);
? ? ? ? ? ? transform: rotate(10deg);
? }
? 25% {
? ? -webkit-transform: rotate(-10deg);
? ? ? ? ? ? transform: rotate(-10deg);
? }
? 37.5% {
? ? -webkit-transform: rotate(15deg);
? ? ? ? ? ? transform: rotate(15deg);
? }
? 50% {
? ? -webkit-transform: rotate(-23deg);
? ? ? ? ? ? transform: rotate(-23deg);
? }
? 62.5% {
? ? -webkit-transform: rotate(23deg);
? ? ? ? ? ? transform: rotate(23deg);
? }
? 75% {
? ? -webkit-transform: rotate(-15deg);
? ? ? ? ? ? transform: rotate(-15deg);
? }
? 87.5% {
? ? -webkit-transform: rotate(10deg);
? ? ? ? ? ? transform: rotate(10deg);
? }
? 100% {
? ? -webkit-transform: rotate(-5deg);
? ? ? ? ? ? transform: rotate(-5deg);
? }
}
@-webkit-keyframes face {
? 0% {
? ? -webkit-transform: translateX(-2.5px);
? ? ? ? ? ? transform: translateX(-2.5px);
? }
? 12.5% {
? ? -webkit-transform: translateX(5px);
? ? ? ? ? ? transform: translateX(5px);
? }
? 25% {
? ? -webkit-transform: translateX(-5px);
? ? ? ? ? ? transform: translateX(-5px);
? }
? 37.5% {
? ? -webkit-transform: translateX(7.5px);
? ? ? ? ? ? transform: translateX(7.5px);
? }
? 50% {
? ? -webkit-transform: translateX(-11.5px);
? ? ? ? ? ? transform: translateX(-11.5px);
? }
? 62.5% {
? ? -webkit-transform: translateX(11.5px);
? ? ? ? ? ? transform: translateX(11.5px);
? }
? 75% {
? ? -webkit-transform: translateX(-7.5px);
? ? ? ? ? ? transform: translateX(-7.5px);
? }
? 87.5% {
? ? -webkit-transform: translateX(5px);
? ? ? ? ? ? transform: translateX(5px);
? }
? 100% {
? ? -webkit-transform: translateX(-2.5px);
? ? ? ? ? ? transform: translateX(-2.5px);
? }
}
@keyframes face {
? 0% {
? ? -webkit-transform: translateX(-2.5px);
? ? ? ? ? ? transform: translateX(-2.5px);
? }
? 12.5% {
? ? -webkit-transform: translateX(5px);
? ? ? ? ? ? transform: translateX(5px);
? }
? 25% {
? ? -webkit-transform: translateX(-5px);
? ? ? ? ? ? transform: translateX(-5px);
? }
? 37.5% {
? ? -webkit-transform: translateX(7.5px);
? ? ? ? ? ? transform: translateX(7.5px);
? }
? 50% {
? ? -webkit-transform: translateX(-11.5px);
? ? ? ? ? ? transform: translateX(-11.5px);
? }
? 62.5% {
? ? -webkit-transform: translateX(11.5px);
? ? ? ? ? ? transform: translateX(11.5px);
? }
? 75% {
? ? -webkit-transform: translateX(-7.5px);
? ? ? ? ? ? transform: translateX(-7.5px);
? }
? 87.5% {
? ? -webkit-transform: translateX(5px);
? ? ? ? ? ? transform: translateX(5px);
? }
? 100% {
? ? -webkit-transform: translateX(-2.5px);
? ? ? ? ? ? transform: translateX(-2.5px);
? }
}
@-webkit-keyframes fade-in {
? from {
? ? opacity: 0;
? }
? to {
? ? opacity: 1;
? }
}
@keyframes fade-in {
? from {
? ? opacity: 0;
? }
? to {
? ? opacity: 1;
? }
}
@-webkit-keyframes blink {
? from, to, 10%, 25%, 80% {
? ? -webkit-transform: scaleY(1);
? ? ? ? ? ? transform: scaleY(1);
? }
? 8%, 23%, 78% {
? ? -webkit-transform: scaleY(0.1);
? ? ? ? ? ? transform: scaleY(0.1);
? }
}
@keyframes blink {
? from, to, 10%, 25%, 80% {
? ? -webkit-transform: scaleY(1);
? ? ? ? ? ? transform: scaleY(1);
? }
? 8%, 23%, 78% {
? ? -webkit-transform: scaleY(0.1);
? ? ? ? ? ? transform: scaleY(0.1);
? }
}
body, html {
? height: 100%;
? width: 100%;
? margin: 0;
? padding: 0;
? background-color: #1F1F3C;
? overflow: hidden;
}
*, *:before, *:after {
? box-sizing: border-box;
? position: relative;
? -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
? ? ? ? ? animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
? -webkit-animation-fill-mode: both;
? ? ? ? ? animation-fill-mode: both;
}
*:before, *:after {
? content: '';
? display: block;
}
All resources on this site are contributed by netizens or reprinted by major download sites. Please check the integrity of the software yourself! All resources on this site are for learning reference only. Please do not use them for commercial purposes. Otherwise, you will be responsible for all consequences! If there is any infringement, please contact us to delete it. Contact information: admin@php.cn
Related Article
How can I create a fade-out effect using CSS3 transitions?
28 Oct 2024
CSS3 Transitions: Achieving Fade-Out EffectsIn CSS3, transitions offer a powerful tool for creating dynamic visual effects. Among these effects is...
How Can You Mimic CSS3 Effects in Old IE Browsers?
28 Oct 2024
Emulating the Wonders of CSS3 Effects in Older IE BrowsersWhile CSS3 brings a plethora of stylish effects to web design, legacy browsers like...
How Can I Detect the Start and End of CSS3 Transitions?
31 Dec 2024
Detecting CSS3 Transition EventsTransitions in CSS3 add dynamic effects to web elements, enhancing their responsiveness. However, it's often...
How to Create a Left-to-Right Background Color Fill with CSS Hover Effects?
29 Oct 2024
Creating Left-to-Right Background Color Fill with CSSIn CSS3, hover effects can be enhanced using transitions to create dynamic visual effects....
How to Achieve Defined Edges with CSS3 Blur Filter?
16 Nov 2024
Achieving Defined Edges with CSS3 Filter BlurIncorporating CSS3 filters to blur images enhances visual effects. However, the default blur filter...
How Can I Create CSS3 Effects in Internet Explorer 7/8?
28 Oct 2024
Emulating CSS3 Effects in Internet Explorer 7/8Many websites utilize CSS3's capabilities to enhance the appearance of elements using rounded...
Does 'transition: all' Slow Down CSS3 Transitions?
03 Dec 2024
Does "Transition: All" Hinder CSS3 Transition Speed?Using CSS3 transitions offers animated effects to web elements. A common practice is to employ...
Why is my slide-up animation using CSS3 @keyframes not working?
28 Oct 2024
CSS3 Transition - Fade Out EffectUsing CSS3, you can easily implement fade-out effects to enhance the user experience. However, if you encounter...
Csgo special effects blockbuster movies HD viewing entrance to watch Csgo high-definition special effects blockbuster movies directly
04 Jun 2025
CSGO (Counter-Strike: Global Offensive) is a first-person shooter that is loved by players around the world. Its exciting competitions and high-quality special effects videos have always been topics to talk about by players. Whether it is the thrilling professional leagues or the friendly match between ordinary players, it can show amazing special effects and strategies in the game. This article will introduce you in detail how to find and watch CSGO special effects blockbusters in detail to ensure that you can experience the best visual enjoyment.
Hot Tools
CSS text is combined into a heart-shaped animation special effect
CSS text is combined into a heart-shaped animation special effect
CSS3 SVG expression flower animation special effects
SS3 SVG confession flower animation special effect is a Valentine's Day animation special effect.
CSS shopping mall websites commonly use left category drop-down navigation menu code
CSS shopping mall websites commonly use left category drop-down navigation menu code
jQuery+CSS3 Valentine's Day love special effects
jQuery+CSS3 Valentine's Day Love Special Effect is a Valentine's Day hanging swinging heart animation special effect.
css3 spoon scooping up glutinous rice balls animation special effects
A bowl of cute glutinous rice balls expression, a spoon scooping up a glutinous rice balls animation special effects