基于CSS3自定义发光radiobox单选框_html/css

Heim

Web-Frontend

HTML-Tutorial

基于CSS3自定义发光radiobox单选框_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:46 AM

之前我们分享过一些CSS3和HTML5实现的自定义checkbox和Radiobox，比如纯CSS3美化Checkbox和Radiobox按钮，不仅外观唯美，而且Radiobox选中时还有动画效果。今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件，该radiobox选中时也有滑块的动画特效。

在线预览源码下载

实现的代码。

html代码：

 <style>        html        {            display: flex;            justify-content: center;            align-items: center;            height: 100%;        }        body        {            padding: 50px;            background-color: hsl(0,0%,20%);        }        input        {            -webkit-appearance: none; /* remove default */            display: block;            margin: 10px;            width: 24px;            height: 24px;            border-radius: 12px;            cursor: pointer;            vertical-align: middle;            box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;            background-color: hsla(0,0%,0%,.2);            background-image: -webkit-radial-gradient( hsla(200,100%,90%,1) 0%, hsla(200,100%,70%,1) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% );            background-repeat: no-repeat;            -webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1), -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);        }        input:checked        {            -webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1), -webkit-transform .25s cubic-bezier(0, 0, .2, 1);        }        input:active        {            -webkit-transform: scale(1.5);            -webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);        }        /* The up/down direction logic */input, input:active        {            background-position: 0 24px;        }        input:checked        {            background-position: 0 0;        }        input:checked ~ input, input:checked ~ input:active        {            background-position: 0 -24px;        }    </style>    <script src="js/prefixfree.min.js"></script></head><body>    <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>    <div style="margin: 30px auto; width: 80px;">        <input type="radio" name="name" checked />        <input type="radio" name="name" />        <input type="radio" name="name" />        <input type="radio" name="name" />        <input type="radio" name="name" />    </div>    <script src="js/index.js"></script></body>

via：http://www.w2bc.com/Article/32018/

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

Verwandter Artikel

Was ist der Unterschied zwischen einem HTML -Tag und einem HTML -Attribut?May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

Die Zukunft von HTML: Evolution und TrendsMay 13, 2025 am 12:01 AM

Die Zukunft von HTML wird sich in einer semantischen, funktionaleren und modularen Richtung entwickeln. 1) Die Semantisierung macht den Tag den Inhalt klarer und verbessert die SEO und den barrierefreien Zugang. 2) Die Funktionalisierung führt neue Elemente und Attribute ein, um die Benutzerbedürfnisse zu erfüllen. 3) Modularität unterstützt die Komponentenentwicklung und verbessert die Wiederverwendbarkeit der Code.

Warum sind HTML -Attribute für die Webentwicklung wichtig?May 12, 2025 am 12:01 AM

HtmlattributesarecrucialinwebdevelopmentforcontrollingBehavior, Aussehen und Funktionalität

Was ist der Zweck des ALT -Attributs? Warum ist es wichtig?May 11, 2025 am 12:01 AM

Das ALT -Attribut ist ein wichtiger Bestandteil des Tags in HTML und wird verwendet, um alternative Text für Bilder bereitzustellen. 1. Wenn das Bild nicht geladen werden kann, wird der Text im ALT -Attribut angezeigt, um die Benutzererfahrung zu verbessern. 2. Bildschirmleser verwenden das ALT -Attribut, um sehbehinderte Benutzer zu helfen, den Inhalt des Bildes zu verstehen. 3. Search Engines Index Text im ALT -Attribut zur Verbesserung des SEO -Rankings von Webseiten.

HTML, CSS und JavaScript: Beispiele und praktische AnwendungenMay 09, 2025 am 12:01 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML wird zum Erstellen von Webseitenstruktur verwendet. 2. CSS wird verwendet, um das Erscheinungsbild von Webseiten zu verschönern. 3.. JavaScript wird verwendet, um eine dynamische Interaktion zu erreichen. Durch Tags, Stile und Skripte erstellen diese drei zusammen die Kernfunktionen moderner Webseiten.

Wie setzen Sie das Lang -Attribut auf dem -Tag ein? Warum ist das wichtig?May 08, 2025 am 12:03 AM

Das Einstellen der Lang -Attribute eines Tags ist ein wichtiger Schritt zur Optimierung der Web -Barrierefreiheit und der SEO. 1) Stellen Sie das Lang -Attribut im Tag ein, z. B.. 2) Setzen Sie in mehrsprachigen Inhalten Lang -Attribute für verschiedene Sprachteile, wie z. 3) Verwenden Sie Sprachcodes, die den ISO639-1-Standards entsprechen, wie z. B. "EN", "FR", "ZH" usw. Das korrekte Einstellen des Lang-Attributs kann die Zugänglichkeit von Webseiten und Suchmaschinenrankings verbessern.

Was ist der Zweck von HTML -Attributen?May 07, 2025 am 12:01 AM

HtmlattributesareessentialforenHancingWebelements'Functionality und Interaktion

Wie erstellt man eine Liste in HTML?May 06, 2025 am 12:01 AM

Tocreatealistinhtml, usefornorderedListsandfororderedLists: 1) ForunorderedLists, WrapitemsinanduseforeachItem, RenderingasabulletedList.2) ForderedLists, UseinDFornumnedLists, anpassbar mit

See all articles