简易的CSS3点击响应动画案列

来源：懂视网责编：小采时间：2020-11-27 20:01:39
简易的CSS3点击响应动画案列

简易的CSS3点击响应动画案列:这次给大家带来简易的CSS3点击响应动画案列，使用CSS3制作点击响应动画的注意事项有哪些，下面就是实战案例，一起来看一下。 <html> <head> <style> label{ margin: 0 auto} /*1*/ #che1 { position: rel
推荐度：
点击下载本文 文档为doc格式
导读简易的CSS3点击响应动画案列:这次给大家带来简易的CSS3点击响应动画案列，使用CSS3制作点击响应动画的注意事项有哪些，下面就是实战案例，一起来看一下。 <html> <head> <style> label{ margin: 0 auto} /*1*/ #che1 { position: rel
这次给大家带来简易的CSS3点击响应动画案列，使用CSS3制作点击响应动画的注意事项有哪些，下面就是实战案例，一起来看一下。
 <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>
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
简易的CSS3点击响应动画案列

推荐度：
点击下载本文 文档为doc格式
标签：动画简单的案例
热门焦点
简易的CSS3点击响应动画案列

简易的CSS3点击响应动画案列

简易的CSS3点击响应动画案列

最新推荐

猜你喜欢

热门推荐
