Home >Web Front-end >HTML Tutorial >Custom illuminated radiobox based on CSS3_html/css_WEB-ITnose
Custom illuminated radiobox based on CSS3_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:46:271133browse
We have previously shared some custom checkboxes and Radioboxes implemented in CSS3 and HTML5. For example, pure CSS3 beautifies the Checkbox and Radiobox buttons, which not only look beautiful, but also have animation effects when the Radiobox is selected. Today we are going to share a custom glowing radiobox plug-in implemented in CSS3. The radiobox also has a slider animation effect when selected.
Online preview Source code download
The implemented code.
html code:
<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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn