首页 / CSS3 / 简易的CSS3点击响应动画案列
简易的CSS3点击响应动画案列
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了简易的CSS3点击响应动画案列,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含15468字,纯文字阅读大概需要23分钟。
内容图文
![简易的CSS3点击响应动画案列](/upload/InfoBanner/zyjiaocheng/295/137c8fe749f04432a99d366b4ab56fc5.jpg)
<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网其它相关文章!
相关阅读:
怎样让浏览器变成编辑器
用来下载图片的javascript脚本
以上就是简易的CSS3点击响应动画案列的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的简易的CSS3点击响应动画案列全部内容,希望文章能够帮你解决简易的CSS3点击响应动画案列所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。