纯CSS3美化单选按钮radio

这种纯CSS3美化单选按钮radio的方法适用于以下情况: 1.可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉 2.只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出来,但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库 3.不需要JS支持切换效果下图是最终效果图: HTML代码: <label for="man" class="radio"> <span class="radio-bg…

纯CSS3美化radio和checkbox

如题,主要通过CSS3来实现将radio和checkbox美化的效果.可是兼容性并非非常好,PC端仅仅支持chrome浏览器(IE和Firefox測试不行,其它没有很多其它測试).然后微信端和QQ端訪问也是正常.因为LZ所做的功能正好仅仅须要在微信端展示,所以并未深入研究. </span> 当然,尽管说不能兼容,可是对于为什么不能兼容还是须要解释一下的,其关键在于这么个选择器的问题:input[type=radio]:before.:beofre这个伪类选择器在主流浏览器中能够在P,span,…

纯CSS美化的checkbox 和 radio

html <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化复选框和单选框</title> <link rel="stylesheet" type="text/css" href="style2.css" /> </head> <body> <div id="holder">…

纯css3实现的超炫checkbox复选框和radio单选框

之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览源码下载这个实例完全由css3实现的没有任何js代码.下面我们一起看下实现代码吧 html代码: <div style="width:200px; float:left"> <label> <input type="checkbox" class="option-…

用纯CSS美化radio和checkbox

Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:magic-check 在CSS出现之前,我们美化radio和checkbox需要借助JavaScript,最具代表性的就是icheck,它功能强大复杂并且主题很多.icheck这种美化方案很好很强大,但是也有很多缺点: 太重,需要引入JS.CSS,还有图片或者字体图标,而且还依赖jQuery 扩展性差,…

纯CSS3实现轮播切换效果

使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio" name="slider2" id="slider1" checked="checked" > <input type="radio" name="slider2" id="…

CSS3美化表单移动端可用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>仿微信可换肤的CSS3美化表单,</title> <link rel="stylesheet" href=&qu…

纯CSS3实现的图片滑块程序效果非常酷

原文:纯CSS3实现的图片滑块程序效果非常酷之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性,没有使用JS,个人觉得还是挺不错的,先来看看效果图: 看上去挺不错的吧,简洁.清新.大气. 当然我们也可以在这里查看DEMO演示. 接下来我们一起来分析一下源码,首先是HTML代码,非常简单: <div id="gal"> <nav class="galnav…

纯CSS3完成选项卡，不要js完成的选项卡

我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天就来敲一敲,选项卡,注意哦,不是一般利用js完成的选项卡,今天是纯用HTML和CSS来完成的,这怎么可能?那你不用js的点击事件,怎么处理?注意CSS3的新属性就可以完成啦,利用单选框的选择状态来查找兄弟元素,来改变下面元素的属性,就可以达到目的了.html的结构就不赘述了.先看看效果: 效果有点丑,功能有就行了,懒得去修饰了,还有更重要的事等着我,好吧,代码给出: <!DOCTYPE html> <html lang=&quo…

一款纯css3实现的图片3D翻转幻灯片

之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片.这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错.一起看下效果图: 在线预览源码下载实现的代码. html代码: <div style="width: 850px; margin: auto;"> <h1> pure CSS slice cube slideshow</h1> <style> @import 'http://codepen.i…

一款纯css3实现的tab选项卡

今天给大家带来一款纯css3实现的tab选项卡.单击左侧的选项的时候,右侧内容以动画的形式展示.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="night-tabs night-tabs-color-default night-tabs-animation-slide-right night-tabs-position-vleft">  <input type="radio&qu…

纯CSS3实现的一些酷炫效果

之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看下页面结构: <body> <div class="container">  <div class="face">  <div class="hair&…

纯css3圆形从中心向四周扩散动画效果

查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to {top:130px;}} 效果:http://hovertree.com/texiao/css3/37/1.htm 可以通过 @keyframes 规则,创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式.在动画过程中,您能够多次改变这套 CSS 样式.以百分比来规定改变发生的时…

纯css3 3D图片立方体旋转动画特效

纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体效果展示手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8gc.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /><meta name="viewport" content="width=…

纯CSS3实现多层云彩变换飞行动画

查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <…

纯css3艺术文字样式效果代码

效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text_effect.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>…

纯css3手机页面图标样式代码

全部图标:http://hovertree.com/texiao/css/19/ 先看效果: 或者点这里:http://hovertree.com/texiao/css/19/hoverkico.htm 简洁代码如下: <link rel="stylesheet" href="http://hovertree.com/texiao/css/19/hoverkicon.css"> <div><i class="icono-mai…

纯CSS3实现动态火车行驶特效

上次开完飞机,这次开火车查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /> <t…

[原创]纯CSS3打造的3D翻页翻转特效

刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是瞎模拟的) <!doctype html> <head> <meta charset="utf-8"> <title>CSS3 Animation</title> <meta name="description&q…

css3美化复选框checkbox

两种美化效果如下图: 代码(html) <div id="main"> <h2 class="top_title">使用CSS3美化复选框checkbox</h2> <div class="demo"> <div class="wrap"> <p>1. 勾选</p> <input type="checkbox" id…

纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti…

基于纯 CSS3 技术实现美观的标签云效果

标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CSS 变换特性. 效果演示源码下载您可能感兴趣的相关文章 Web 开发中很实用的10个效果[源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12个让人惊叹的的创意的 404 错误页面设计让网站动起来!12款优秀的 jQuery 动画插件十分惊艳的8个 HTML5 &…

纯CSS3写的10个不同的酷炫图片遮罩层效果

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下在线预览下载地址实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g…

纯css3实现旋转的太极图

效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <title>css3实现旋转的太极图</title> <style> body;} #container{ position: relative; width: 500px;height: 250px; background: #fff…

纯css3圆角下拉菜单都没敢用js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

纯CSS3实现3D特效的iPhone 6动画

iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示源码下载 HTML结构代码如下: <div id="wrapper"> <div id="iphone"> <div id="side"></div> <div id="line…

纯css3 加载loading动画特效

最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading的动画效果,最终在我们前端工程师的帮助之下完成.所以记录在这里,如果感兴趣的朋友也可以看看,大家互相焦炉学习. 1.demo.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&…

纯css3样式属性制作各种图形图标

纯CSS3实现3D动画导航，html5 webRTC技术实现免费网页电话拨打

花了一周的时间完成了说吧 (免费网页电话) 的前端开发工作,先将技术点总结如下: 免费电话采用最新的html5 webRTC 技术实现互联网和电信MIS网互通实现网页电话,目前只有 google chrome 支持,如果你想实现免费电话拨打,测试地址: https://www.10086china.com/index.html?id=OTkxMzA3MjUwODM3MzE5OQ== (长链接,顺便赚点积分,目前只支持chrome浏览器哦,哈哈) 1. 导航(主要采用纯CSS3 实现)…