Heim > Artikel > Web-Frontend > Einfaches Beispiel für eine auf Klicks reagierende CSS3-Animation
Einfaches Beispiel für eine auf Klicks reagierende CSS3-Animation
- php中世界最好的语言Original
- 2018-03-08 14:18:131538Durchsuche
Dieses Mal zeige ich Ihnen einen einfachen CSS3-Klick-Antwort-Animationsfall. Was sind die Vorsichtsmaßnahmen für die Verwendung von CSS3 zum Erstellen einer Klick-Antwort-Animation?
<html>
<head>
<style>
label{ margin: 0 auto}
/*1*/
#che1 {
position: relative;
border: 2px #666 solid;
cursor: pointer;
border-radius: 50%;
display: block;
width: 24px;
height: 24px;
}
#che1 input[type="checkbox"] +div {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
/* Firefox 4 */
-o-transition: all 0.2s;
/* Opera */
transform: rotate(135deg);
-ms-transform: rotate(135deg);
/* IE 9 */
-webkit-transform: rotate(135deg);
/* Safari and Chrome */
-o-transform: rotate(135deg);
/* Opera */
-moz-transform: rotate(135deg);
}
#che1 input[type="checkbox"] +div>div {
position: absolute;
width: 18px;
height: 4px;
background: #333;
top: 42%;
left: 14%;
}
#che1 input[type="checkbox"] +div>div:nth-child(1) {
transform: rotate(45deg);
}
#che1 input[type="checkbox"] +div>div:nth-child(2) {
transform: rotate(-45deg);
}
#che1 input[type="checkbox"] {
display: none;
}
#che1 input[type="checkbox"]:checked+div {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Safari and Chrome */
-o-transform: rotate(0deg);
/* Opera */
-moz-transform: rotate(0deg);
}
/*2*/
#che2 {
text-align: center;
border: 1px #666 solid;
cursor: pointer;
border-radius: 50%;
display: block;
width: 20px;
height: 20px;
}
#che2 input[type="checkbox"] {
display: none;
}
#che2 input[type="checkbox"]+ div {
color: #fff;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.8);
-webkit-transition-duration: 0.4s;
-webkit-transition-property: background-color, transform;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
#che2 input[type="checkbox"]:checked + div {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
background-color: rgb(204, 204, 204);
color: #555;
}
/*3*/
#che3 {
cursor: pointer;
display: block;
width: 26px;
height: 26px;
}
#che3 input[type="checkbox"] {
display: none;
}#che3 input[type="checkbox"]+ div {
display: block;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 25px solid #666;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
/* Firefox 4 */
-o-transition: all 0.2s;
/* Opera */
}
#che3 input[type="checkbox"]:checked + div {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
/*4*/
#che4 {
cursor: pointer;
display: block;
width: 20px;
height: 26px;
position: relative;
}
#che4 input[type="checkbox"] {
display: none;
}
#che4 > div {
cursor: pointer;
position: absolute;
width: 20px;
height: 3px;
background: #333;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che4 input[type="checkbox"]+ div {
top: 3px;
left: 2px;
transform: rotate(-45deg) ;
-ms-transform: rotate(-45deg) ;
/* IE 9 */
-webkit-transform: rotate(-45deg) ;
/* Safari and Chrome */
-o-transform: rotate(-45deg) ;
/* Opera */
-moz-transform: rotate(-45deg) ;
/* Firefox */
}
#che4 input[type="checkbox"]+ div+ div{
top: 16px;
left: 2px;
transform: rotate(45deg) ;
-ms-transform: rotate(45deg) ;
/* IE 9 */
-webkit-transform: rotate(45deg) ;
/* Safari and Chrome */
-o-transform: rotate(45deg) ;
/* Opera */
-moz-transform: rotate(45deg) ;
/* Firefox */
}
#che4 input[type="checkbox"]:checked+ div {
transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
-ms-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* IE 9 */
-webkit-transform: rotate(45deg) ;
/* Safari and Chrome */
-o-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* Opera */
-moz-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* Firefox */
}
#che4 input[type="checkbox"]:checked+ div+ div {
transform: rotate(-45deg) ;
-ms-transform: rotate(-45deg) ;
/* IE 9 */
-webkit-transform: rotate(-45deg) ;
/* Safari and Chrome */
-o-transform: rotate(-45deg) ;
/* Opera */
-moz-transform: rotate(-45deg) ;
/* Firefox */
}
/*5*/
#che5 {
cursor: pointer;
display: block;
width: 24px;
height: 24px;
position: relative;
}
#che5 input[type="checkbox"] {
display: none;
}
#che5 input[type="checkbox"]+ div {
width: 100%;
height: 100%;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che5 input[type="checkbox"]+ div>div {
cursor: pointer;
position: absolute;
width: 20px;
height: 3px;
background: #333;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che5 input[type="checkbox"]+ div>div:nth-child(1) {
top: 3px;
left: 2px;
}
#che5 input[type="checkbox"]+ div> div:nth-child(2) {
top: 10px;
left: 2px;
}
#che5 input[type="checkbox"]+ div> div:nth-child(3) {
top: 17px;
left: 2px;
}
#che5 input[type="checkbox"]:checked+ div {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Safari and Chrome */
-o-transform: rotate(360deg);
/* Opera */
-moz-transform: rotate(360deg);
}
#che5 input[type="checkbox"]:checked+ div>div:nth-child(1) {
top: 10px;
left: 2px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
-o-transform: rotate(45deg);
/* Opera */
-moz-transform: rotate(45deg);
/* Firefox */
}
#che5 input[type="checkbox"]:checked+ div>div:nth-child(2) {
transform: scale( 0, 1);
-ms-transform: scale( 0, 1);
/* IE 9 */
-webkit-transform: scale( 0, 1);
/* Safari and Chrome */
-o-transform: scale( 0, 1);
/* Opera */
-moz-transform: scale( 0, 1);
/* Firefox */
}
#che5 input[type="checkbox"]:checked+ div>div:nth-child(3) {
top: 10px;
left: 2px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
/* IE 9 */
-webkit-transform: rotate(-45deg);
/* Safari and Chrome */
-o-transform: rotate(-45deg);
/* Opera */
-moz-transform: rotate(-45deg)
/* Firefox */
}
/*6*/
#che6 {
cursor: pointer;
display: block;
width: 24px;
height: 24px;
position: relative;
}
#che6 input[type="checkbox"] {
display: none;
}
#che6 > div {
cursor: pointer;
position: absolute;
width: 20px;
height: 3px;
background: #333;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che6 input[type="checkbox"]+ div {
top: 3px;
left: 2px;
}
#che6 input[type="checkbox"]+ div+ div {
top: 10px;
left: 2px;
}
#che6 input[type="checkbox"]+ div+ div+ div {
top: 17px;
left: 2px;
}
#che6 input[type="checkbox"]:checked+ div {
top: 10px;
left: 2px;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
-o-transform: rotate(45deg);
/* Opera */
-moz-transform: rotate(45deg);
/* Firefox */
}
#che6 input[type="checkbox"]:checked+ div+div {
transform: scale( 0, 1);
-ms-transform: scale( 0, 1);
/* IE 9 */
-webkit-transform: scale( 0, 1);
/* Safari and Chrome */
-o-transform: scale( 0, 1);
/* Opera */
-moz-transform: scale( 0, 1);
/* Firefox */
}
#che6 input[type="checkbox"]:checked+ div+ div+ div {
top: 10px;
left: 2px;
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
/* IE 9 */
-webkit-transform: rotate(-45deg);
/* Safari and Chrome */
-o-transform: rotate(-45deg);
/* Opera */
-moz-transform: rotate(-45deg)
/* Firefox */
}
/*7*/
#che7 {
cursor: pointer;
display: block;
width: 24px;
height: 24px;
position: relative;
}
#che7 input[type="checkbox"] {
display: none;
}
#che7 > div {
cursor: pointer;
position: absolute;
width: 20px;
height: 3px;
background: #333;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che7 input[type="checkbox"]+ div {
top: 3px;
left: 2px;
}
#che7 input[type="checkbox"]+ div+ div {
top: 10px;
left: 2px;
}
#che7 input[type="checkbox"]+ div+ div+ div {
top: 17px;
left: 2px;
}
#che7 input[type="checkbox"]:checked+ div {
transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
-ms-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* IE 9 */
-webkit-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* Safari and Chrome */
-o-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* Opera */
-moz-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* Firefox */
}
#che7 input[type="checkbox"]:checked+ div+ div+ div {
transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
-ms-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
/* IE 9 */
-webkit-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
/* Safari and Chrome */
-o-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
/* Opera */
-moz-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
/* Firefox */
}
/*8*/
#che8 {
cursor: pointer;
display: block;
width: 24px;
height: 24px;
position: relative;
}
#che8 input[type="checkbox"] {
display: none;
}
#che8 input[type="checkbox"]+ div {
position: absolute;
width: 100%;
height: 100%;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che8 input[type="checkbox"]+ div> div {
position: absolute;
width: 20px;
height: 3px;
background: #333;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che8 input[type="checkbox"]+ div>div:nth-child(1) {
top: 3px;
left: 2px;
}
#che8 input[type="checkbox"]+ div> div:nth-child(2) {
top: 10px;
left: 2px;
}
#che8 input[type="checkbox"]+ div> div:nth-child(3) {
top: 17px;
left: 2px;
}
#che8 input[type="checkbox"]:checked+div {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Safari and Chrome */
-o-transform: rotate(180deg);
/* Opera */
-moz-transform: rotate(180deg);
}
#che8 input[type="checkbox"]:checked+ div> div:nth-child(1) {
transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
-ms-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* IE 9 */
-webkit-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* Safari and Chrome */
-o-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* Opera */
-moz-transform: rotate(45deg) scale(0.7, 1) translate(9px, -3px);
/* Firefox */
}
#che8 input[type="checkbox"]:checked+ div> div:nth-child(3) {
transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
-ms-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
/* IE 9 */
-webkit-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
/* Safari and Chrome */
-o-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
/* Opera */
-moz-transform: rotate(-45deg) scale(0.7, 1) translate(9px, 3px);
/* Firefox */
}
/*9*/
#che9 {
cursor: pointer;
display: block;
width: 20px;
height: 20px;
position: relative;
}
#che9 input[type="checkbox"] {
display: none;
}
#che9 input[type="checkbox"]+ div {
width: 100%;
height: 100%;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che9 input[type="checkbox"]+ div>div {
top: 10px;
left: 2px;
cursor: pointer;
position: absolute;
width: 20px;
height: 3px;
background: #333;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che9 input[type="checkbox"]+ div>div:nth-child(1) {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
-o-transform: rotate(45deg);
/* Opera */
-moz-transform: rotate(45deg);
/* Firefox */
}
#che9 input[type="checkbox"]+ div> div:nth-child(2) {
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
/* IE 9 */
-webkit-transform: rotate(-45deg);
/* Safari and Chrome */
-o-transform: rotate(-45deg);
/* Opera */
-moz-transform: rotate(-45deg)
/* Firefox */
}
#che9 input[type="checkbox"]:checked+ div {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Safari and Chrome */
-o-transform: rotate(360deg);
/* Opera */
-moz-transform: rotate(360deg);
}
#che9 input[type="checkbox"]:checked+ div>div:nth-child(1) {
top: 13px;
left: 3px;
width: 10px;
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Safari and Chrome */
-o-transform: rotate(30deg);
/* Opera */
-moz-transform: rotate(30deg);
/* Firefox */
}
#che9 input[type="checkbox"]:checked+ div>div:nth-child(2) {
top: 10px;
left:8px;
width: 18px;
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
/* IE 9 */
-webkit-transform: rotate(-60deg);
/* Safari and Chrome */
-o-transform: rotate(-60deg);
/* Opera */
-moz-transform: rotate(-60deg);
}
/*10*/
#che10 {
cursor: pointer;
display: block;
width: 20px;
height: 20px;
position: relative;
}
#che10 input[type="checkbox"] {
display: none;
}
#che10 input[type="checkbox"]+ div {
width: 100%;
height: 100%;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che10 input[type="checkbox"]+ div>div {
top: 10px;
left: 2px;
cursor: pointer;
position: absolute;
width: 20px;
height: 3px;
background: #333;
transition: all 0.26s;
-moz-transition: all 0.26s;
/* Firefox 4 */
-webkit-transition: all 0.26s;
/* Safari 和 Chrome */
-o-transition: all 0.26s;
}
#che10 input[type="checkbox"]+ div>div:nth-child(1) {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
-o-transform: rotate(45deg);
/* Opera */
-moz-transform: rotate(45deg);
/* Firefox */
}
#che10 input[type="checkbox"]+ div> div:nth-child(2) {
transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
/* IE 9 */
-webkit-transform: rotate(-45deg);
/* Safari and Chrome */
-o-transform: rotate(-45deg);
/* Opera */
-moz-transform: rotate(-45deg)
/* Firefox */
}
#che10 input[type="checkbox"]:checked+ div {
/*transform: rotate(360deg);
-ms-transform: rotate(360deg);
IE 9 */
/*-webkit-transform: rotate(360deg);
Safari and Chrome */
/*-o-transform: rotate(360deg);
Opera
-moz-transform: rotate(360deg);*/
}
#che10 input[type="checkbox"]:checked+ div>div:nth-child(1) {
top: 13px;
left: 3px;
width: 10px;
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Safari and Chrome */
-o-transform: rotate(30deg);
/* Opera */
-moz-transform: rotate(30deg);
/* Firefox */
}
#che10 input[type="checkbox"]:checked+ div>div:nth-child(2) {
top: 10px;
left:8px;
width: 18px;
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
/* IE 9 */
-webkit-transform: rotate(-60deg);
/* Safari and Chrome */
-o-transform: rotate(-60deg);
/* Opera */
-moz-transform: rotate(-60deg);
}
</style>
</head>
<body>
<label id="che1">
<input type="checkbox" />
<div>
<div></div>
<div></div>
</div>
</label>
<br />
<label id="che2">
<input type="checkbox" />
<div>></div>
</label>
<br />
<label id="che3">
<input type="checkbox" />
<div></div>
</label>
<br />
<label id="che4">
<input type="checkbox" />
<div></div>
<div></div>
</label>
<br />
<label id="che5">
<input type="checkbox" />
<div>
<div></div>
<div></div>
<div></div>
</div>
</label>
<br />
<label id="che6">
<input type="checkbox" />
<div></div>
<div></div>
<div></div>
</label>
<br />
<label id="che7">
<input type="checkbox" />
<div></div>
<div></div>
<div></div>
</label>
<br />
<label id="che8">
<input type="checkbox" />
<div>
<div></div>
<div></div>
<div></div>
</div>
</label>
<br />
<label id="che9">
<input type="checkbox" />
<div>
<div></div>
<div></div>
</div>
</label>
<br />
<label id="che10">
<input type="checkbox" />
<div>
<div></div>
<div></div>
</div>
</label>
</body>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.
Verwandte Lektüre:
So verwandeln Sie den Browser in einen Editor
Javascript-Skript zum Herunterladen von Bildern
Das obige ist der detaillierte Inhalt vonEinfaches Beispiel für eine auf Klicks reagierende CSS3-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Die umfassendste Lösung für domänenübergreifendes AjaxNächster Artikel：Die umfassendste Lösung für domänenübergreifendes Ajax