html5中如何让一个动画框左右上下浮动,HTML5 SVG如何实现炫酷checkbox复选框动画特效...
簡要教程
這是一款HTML5 SVG炫酷checkbox復(fù)選框動畫特效。該checkbox動畫特效使用svg來構(gòu)建復(fù)選框效果，然后通過CSS3動畫來控制復(fù)選框的選中和取消選中狀態(tài)，效果非常炫酷。
使用方法
在頁面中引入fency-checkbox.css文件。
HTML結(jié)構(gòu)
一個SVG checkbox復(fù)選框的基本HTML結(jié)構(gòu)如下：
width="50px"?height="50px"?viewBox="0?0?50?50"?enable-background="new?0?0?50?50"?xml:space="preserve">
S1.591,37.998,1.591,25S12.127,1.466,25.125,1.466c9.291,0,17.325,5.384,21.151,13.203L19,36l-9-14"/>
CheckBox
其中，theme1是該checkbox的顏色主題。fency-checkbox.css中內(nèi)置了7種顏色主題，你也可以自己編寫自己的顏色主題效果。
CSS樣式
通用的SVG checkbox復(fù)選框的樣式如下：
.checkboxWrapper{
display:block;?/*?you?can?replace?with?'display:inline-block'?if?you?want?parent?element?inline?*/
}
.checkboxWrapper?input[type="checkbox"]?{
display:?none;
}
.checkboxWrapper?input[type="checkbox"]?+?label?{
cursor:?pointer;
display:block;
}
.checkboxWrapper?input[type="checkbox"]?+?label?i?{
display:?inline-block;
vertical-align:?middle;
}
.checkboxWrapper?input[type="checkbox"]?+?label?path?{
stroke-dashoffset:?-189;
stroke:?inherit;
stroke-dasharray:?189;
transition:?all?ease-in-out?0.5s;
-webkit-transition:?all?ease-in-out?0.5s;
-moz-transition:?all?ease-in-out?0.5s;
-ms-transition:?all?ease-in-out?0.5s;
-o-transition:?all?ease-in-out?0.5s;
}
.checkboxWrapper?input[type="checkbox"]:checked?+?label?path?{
stroke-dashoffset:?0;
}
定義一種顏色主題就是為SVG的stroke屬性設(shè)置一種顏色，例如theme1的描邊顏色為：
.theme1{
stroke:#1ABC9C;
}
控制SVG?checkbox復(fù)選框尺寸的CSS樣式如下：
.extraSmallCheckboxSize.checkboxWrapper?input[type="checkbox"]?+?label?i?svg{
width:20px;
height:20px;
}
.smallCheckboxSize.checkboxWrapper?input[type="checkbox"]?+?label?i?svg{
width:30px;
height:30px;
}
.mediumCheckboxSize.checkboxWrapper?input[type="checkbox"]?+?label?i?svg{
width:40px;
height:40px;
}
.largeCheckboxSize.checkboxWrapper?input[type="checkbox"]?+?label?i?svg{
width:50px;
height:50px;
}
.extraLargeCheckboxSize.checkboxWrapper?input[type="checkbox"]?+?label?i?svg{
width:60px;
height:60px;
}
要控制尺寸，你需要做的事情就是在帶有checkboxWrapperclass的父div容器上添加適當?shù)腸lass類。
本文由職坐標整理并發(fā)布，了解更多內(nèi)容，請關(guān)注職坐標WEB前端HTML5/CSS3頻道！
總結(jié)
以上是生活随笔為你收集整理的html5中如何让一个动画框左右上下浮动,HTML5 SVG如何实现炫酷checkbox复选框动画特效...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ddos攻击案例分析（ddos案例以及分
- 下一篇： 两个数组对象合并操作，键值对合并