CSS3特效猫挂在线球上左右摇摆动画
CSS3特效猫挂在线球上左右摇摆动画
CSS3特效猫挂在线球上左右摇摆动画是一款用CSS3做出的动画摇摆效果
<head>
<meta charset="utf-8">
<title>css3猫挂在线球上左右摇摆动画特效</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;
}
Alle Ressourcen auf dieser Website werden von Internetnutzern bereitgestellt oder von großen Download-Sites nachgedruckt. Bitte überprüfen Sie selbst die Integrität der Software! Alle Ressourcen auf dieser Website dienen nur als Referenz zum Lernen. Bitte nutzen Sie diese nicht für kommerzielle Zwecke. Andernfalls sind Sie für alle Folgen verantwortlich! Wenn ein Verstoß vorliegt, kontaktieren Sie uns bitte, um ihn zu löschen. Kontaktinformationen: admin@php.cn
Verwandter Artikel
Implementierung von visuellen CSS3-Effekten
22 Mar 2018
Dieses Mal werde ich Ihnen die Implementierung visueller CSS3-Spezialeffekte vorstellen. Was sind die Vorsichtsmaßnahmen für die Realisierung visueller CSS3-Spezialeffekte? Das Folgende ist ein praktischer Fall.
14 Mar 2018
Dieses Mal zeige ich Ihnen, wie Sie mit CSS3 dreidimensionale 3D-Spezialeffekte erzielen. Was sind die Vorsichtsmaßnahmen für die Verwendung von CSS3, um dreidimensionale 3D-Spezialeffekte zu erzielen? Das Folgende ist ein praktischer Fall.
Wie Sie CSS3-Spezialeffekte geschickt einsetzen, um das Benutzererlebnis von Webseiten zu verbessern
09 Sep 2023
Wie man CSS3-Spezialeffekte geschickt einsetzt, um das Benutzererlebnis von Webseiten zu verbessern. Mit der Entwicklung des Internets sind Webdesign und Benutzererfahrung zu wichtigen Verknüpfungen bei der Website-Entwicklung geworden. Die Anwendung von CSS3-Spezialeffekten kann Webseiten Dynamik und visuelle Effekte verleihen und das Benutzererlebnis verbessern. In diesem Artikel werden mehrere gängige CSS3-Spezialeffekte und ihre Codebeispiele vorgestellt, um Entwicklern dabei zu helfen, die Verwendung von CSS3-Spezialeffekten besser zu beherrschen und die Benutzererfahrung von Webseiten zu verbessern. Übergangseffekt (Übergang) Der Übergangseffekt ist einer der grundlegendsten Spezialeffekte in CSS3 durch Ändern eines bestimmten Attributs
09 Oct 2016
Verschiedene Spezialeffekte des Filters in CSS3
CSS3 lässt sich nicht öffnen
29 May 2023
Mit der rasanten Entwicklung der Internettechnologie beginnen immer mehr Websites, CSS3 zum Erstellen von Webseitenstilen zu verwenden. Im Vergleich dazu bietet CSS3 mehr Flexibilität und Kreativität beim Entwerfen von Webseiten und kann die Bedürfnisse der Benutzer besser erfüllen. Bei der Verwendung von CSS3 für Webdesign stoßen wir jedoch häufig auf ein Problem: CSS3-Spezialeffekte dehnen die Webseite aus. Dieses Problem tritt hauptsächlich auf, wenn die Webseite mehrere Elemente enthält. Einige Spezialeffekte können dazu führen, dass der Seiteninhalt die ursprünglichen Grenzen überschreitet, wodurch das Seitenlayout gestört wird. Als nächstes besprechen wir, wie das geht
![Zehn coole Weihnachtscodeeffekte für Programmierer [Kostenloser Download]](https://img.php.cn/upload/article/000/000/020/5fe29c923b2df538.png)
Zehn coole Weihnachtscodeeffekte für Programmierer [Kostenloser Download]
23 Dec 2020
Dang Dang Dang~ Die neuesten coolen und wunderschönen Spezialeffekte für Weihnachtsanimationen sind da! Einschließlich in HTML5, CSS3, JQuery und anderen Sprachen implementierter Spezialeffekte, die einfach und schön sind. Sie können auf den Link im Text klicken, um eine Vorschau der Animationen anzuzeigen
Erfahren Sie mehr über die Fortschrittsbalkenkomponente in Bootstrap
23 Feb 2021
Auf Webseiten sind die Auswirkungen von Fortschrittsbalken keine Seltenheit, wie zum Beispiel: Halbierungssystem, Ladestatus usw. Die Fortschrittsbalkenkomponente verwendet die Übergangs- und Animationsattribute von CSS3, um einige Spezialeffekte zu vervollständigen. Diese Spezialeffekte sind in IE9 verfügbar unten stehende Versionen und ältere Versionen von Firefox.
Wie verwende ich CSS, um das Bild zu drehen und verschiedene Effekte anzuzeigen, wenn die Maus über das Bild fährt?
09 Aug 2018
Dies ist definitiv untrennbar mit der leistungsstarken CSS3-Funktion verbunden. Es können nicht nur CSS3-Bilder gedreht werden, sondern auch Spezialeffekte wie CSS-Rotationsverstärkung, CSS-Rotation um 90 Grad und CSS-Bildrotation um 45 Grad erzielt werden.
Wie erreicht man den konkaven und konvexen Effekt von Schriftarten in CSS3? (mit Code)
29 Sep 2018
In diesem Artikel wird hauptsächlich die Verwendung von CSS3 vorgestellt, um den konkaven oder konvexen Effekt von Schriftarten zu erzielen. Wenn wir Webseiten entwerfen, müssen wir oft die Benutzererfahrung berücksichtigen, damit eine Webseite, die schön genug ist, Benutzer anziehen kann. Um den Inhalt der Webseite reicher und schöner zu machen, können wir PS verwenden, um viele Spezialeffekte zu erstellen. Tatsächlich können zusätzlich zu PS auch CSS3-Attribute verwendet werden, um verschiedene schöne Spezialeffekte zu erstellen. Im Folgenden stellen wir Ihnen eine CSS3-Spezialeffektmethode zum Erzielen konkaver und konvexer Schriftarten vor, die den Schriftarten einen dreidimensionalen Effekt verleihen soll.
Hot Tools
CSS文字组合成心形动画特效
CSS文字组合成心形动画特效
CSS3 SVG表白鲜花动画特效
SS3 SVG表白鲜花动画特效是一款情人节动画特效。
CSS的商城网站常用左侧分类下拉导航菜单代码
CSS的商城网站常用左侧分类下拉导航菜单代码
jQuery+CSS3情人节爱心特效
jQuery+CSS3情人节爱心特效是一款情人节悬挂摆动爱心动画特效。
CSS3-Löffel schöpft klebrige Reisbällchen mit Spezialeffekten
Eine Schüssel mit süßem Klebreisbällchen-Ausdruck, ein Löffel, der eine Klebreisbällchen-Animation mit Spezialeffekten aufnimmt