CSS3實(shí)現(xiàn)復(fù)選框動(dòng)畫特效示例代碼
發(fā)布時(shí)間:2016-09-27 15:15:50 作者:佚名
我要評(píng)論

這篇文章給大家分享了一個(gè)利用CSS3實(shí)現(xiàn)復(fù)選框的動(dòng)畫特效,實(shí)現(xiàn)后的效果非常不錯(cuò),有興趣的下面來一起看看吧。
先看我們的第一個(gè)特效圖
實(shí)例代碼
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CheckBox</title>
<style>
.checkbox {
width: 900px;
padding: 3% 0%;
margin: 50px auto;
background-color: cornsilk;
text-align: center;
}</p> <p> .checkbox label {
display: inline-block;
width: 64px;
height: 32px;
margin-right: 10px;
background-color: #ffffff;
border: 1px solid #eeeeee;
border-radius: 17px;
cursor: pointer;
position: relative;
transition: background-color .2s ease-in;
}</p> <p> .checkbox label:after {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #eeeeee;
position: absolute;
left: 1px;
top: 1px;
transform: translateX(0px);
transition: transform .2s ease-in;
}</p> <p> .checkbox [type="checkbox"]:checked + label {
background-color: khaki;
transition: background-color .2s ease-in;
}</p> <p> .checkbox [type="checkbox"]:checked +label:after{
transform: translateX(30px);
transition: transform .2s ease-in;
}</p> <p> .checkbox [type="checkbox"]{
display: none;
}
</style>
</head>
<body>
<div class="checkbox">
<input type="checkbox" id="checkbox-1">
<label for="checkbox-1"></label></p> <p> <input type="checkbox" id="checkbox-2">
<label for="checkbox-2"></label></p> <p> <input type="checkbox" id="checkbox-3">
<label for="checkbox-3"></label>
</div></p> <p></body>
</html>
再來看我們的第二個(gè)特效圖
實(shí)例代碼
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.checkbox {
width: 900px;
padding: 3% 0px;
margin: 50px auto;
background-color: cornsilk;
text-align: center;
}</p> <p> .checkbox label {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
overflow: hidden;
border: 1px solid #eeeeee;
background-color: #ffffff;
cursor: pointer;
}</p> <p> .checkbox label:after {
content: "√";
position: absolute;
width: 28px;
height: 28px;
line-height: 26px;
background-color: khaki;
color: #ffffff;
left: 1px;
top: 1px;
text-align: center;
transform: translateY(-30px);
transition: transform .2s ease-out;
border-radius: 4px;
}</p> <p> .checkbox [type="checkbox"]:checked + label:after {
transform: translateY(0px);
transition: transform .2s ease-in;
}
.checkbox [type="checkbox"]{
display: none;
}
</style>
</head>
<body>
<div class="checkbox">
<input type="checkbox" id="checkbox-1" checked="checked">
<label for="checkbox-1"></label></p> <p> <input type="checkbox" id="checkbox-2">
<label for="checkbox-2"></label></p> <p> <input type="checkbox" id="checkbox-3">
<label for="checkbox-3"></label>
</div></p> <p></body>
</html>
總結(jié)
以上代碼理解起來并不難,但是實(shí)現(xiàn)的效果卻非常的不錯(cuò),希望對(duì)大家學(xué)習(xí)或者使用CSS3能有所幫助,如果有疑問大家可以留言交流。
相關(guān)文章
HTML+CSS實(shí)現(xiàn)單選框、復(fù)選框美觀的樣式
這篇文章主要介紹了HTML+CSS實(shí)現(xiàn)單選框、復(fù)選框美觀的樣式,需要的朋友可以參考下2017-06-26利用CSS3實(shí)現(xiàn)單選框動(dòng)畫特效示例代碼
這篇文章給大家分享了一個(gè)利用CSS3實(shí)現(xiàn)單選框動(dòng)畫特效,效果非常的好,有興趣的下面來一起看看吧。2016-09-26純css3實(shí)現(xiàn)效果超級(jí)炫的checkbox復(fù)選框和radio單選框
天要為大家分享的是純css3實(shí)現(xiàn)的checkbox復(fù)選框和radio單選框,效果超級(jí)炫,這個(gè)實(shí)例完全由css3實(shí)現(xiàn)的沒有任何js代碼2014-09-01CSS3實(shí)例分享--超炫checkbox復(fù)選框和radio單選框
這篇文章主要介紹了CSS3實(shí)例分享--超炫checkbox復(fù)選框和radio單選框,需要的朋友可以參考下2014-09-01CSS3實(shí)現(xiàn)的表單單選框、復(fù)選框特效
純CSS3實(shí)現(xiàn)的表單特效,可以對(duì)單選框、復(fù)選框設(shè)置顯示特效、可用效果等等2012-10-29- 這篇文章主要為大家分享一款CSS自定義綠色復(fù)選框按鈕樣式,2016-03-04
使用CSS實(shí)現(xiàn)頁面復(fù)選框的方法
這篇文章主要介紹了使用CSS實(shí)現(xiàn)頁面復(fù)選框的方法,純CSS實(shí)現(xiàn),絕不添加任何JS :P 需要的朋友可以參考下2015-07-21純CSS實(shí)現(xiàn)自定義單選框和復(fù)選框功能
這篇文章主要介紹了純CSS實(shí)現(xiàn)自定義單選框和復(fù)選框功能,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-16