在线演示本地下载原文:https://www.cnblogs.com/qixidi/p/10079584.html
网上有各种用CSS3画图标,画漫画的代码,实在是有点吊!如果能为自己的网站也绘制一套CSS3图标,那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同,但是大势所趋,写写更健康。首先,我们要做到使用简单,简单到给元素加个类就能使用图标,然后我们还要支持可定制,比如颜色,大小。看下面的代码:<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>...
自定义滚动条实现此部分针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下:滚动条组成部分1. ::-webkit-scrollbar 滚动条整体部分2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或向左向右移动)3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,由于通过点击微调小方块的位置。5. ::-webkit-scrollbar-track-piece 内层...
CSS3的transform:scale()可以实现按比例放大或者缩小功能。CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。效果如下图所示:1、当未鼠标未放到图片上的效果: 2、当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可以自定义):代码如下:<!DOCTYPE html> <html> <head> <meta c...
原文:纯CSS3实现自定义涂鸦风格的边框今天我们要来分享一款基于纯CSS3的自定义边框应用,看上去它像一个Tooltip控件,因为下边框有一个小三角,就像很多地方的引用文本框一样。另外这款CSS3边框是涂鸦风格的,看起来很有个性。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。你也可以在这里查看在线演示下面我们来分享一下实现的方法,主要由HTML代码和CSS代码组成。HTML代码:<div><div><div>CSS3简单实现涂鸦风...
经常能看到别人做前端的时候,实现一些漂亮的复选框或单选框按钮,由于现在项目原因,很多单选框和复选框看起来很不好看,于是,心血来潮打算自己实现了一遍。一、首先上css代码:其中,说明我以注释的形式写到里面;关于z-index我是基于一开始的定位考虑来设置的,此处如果谁要用到,自行思考;/*复选框效果*/
input[type=checkbox] {width:16px;height:16px;z-index:10;
} /* 此处不解释,定义的是复选框宽高*/
input[type=chec...
本文主要为大家详细介绍了javascript+html5+css3自定义弹出窗口效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。效果图:源码:1.demo.jsp<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>自定义弹出窗口</title><script type="text/javascript" src="js/myLayer.js"></script><style type="text/css">button{width: 50px;height: 50px;border: 1px solid bl...
本文实例为大家分享了js自定义弹出窗口效果展示的具体代码,供大家参考,具体内容如下
效果图:源码:
1.demo.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>自定义弹出窗口</title><script type="text/javascript" src="js/myLayer.js"></script><style type="text/css">button{width: 50px;height: 50px;border: 1px solid blue;background-color: blue;color: red;border-radius...
javascript自定义提示窗口效果图:源码:
1.demo.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>自定义提示窗口</title><script type="text/javascript" src="js/myAlert.js"></script><script type="text/javascript">function bodyOnload() {var myInput = document.getElementById("myInput");myInput.style.border = "none";myInput.style.backgroundColor = "rgba(223, 230, 2...
效果图:是不是比默认的好看多了,个人的审美观应该还是可以的。
接下来我们一起来看看实现这款美化版Checkbox的源代码,主要思路是利用隐藏原来的checkbox和radiobox,用一个div来模拟checkbox/radiobox,并使用jQuery来完成选择切换时的动画效果。
先来看看HTML代码:
<div class="wrapper"><ul><li><p>Gender:</p></li><li><input type="radio" name="radio-btn" />Male</li><li><input type="radio" name="radio-btn" />Female...
简介HTML5的标签已经被目前大多数主流浏览器所支持,包括还未正式发布的IE9也声明将支持标签,利用浏览器原生特性嵌入视频有很多好处,所以很多开发者想尽快用上,但是真正使用前还有些问题要考虑,尤其是 Opera/Firefox 和IE/Safari浏览器所支持的视频编码不同的问题,Google几个月前发布的开源视频编码VP8有望能解决这一问题,另外Google还发布了开放网络媒体项目WebM,旨在帮助开发者为开放网络制作出世界级媒体格式,Opera, Fi...
原文:CSS3自定义下拉框 源代码下载地址:http://www.zuidaima.com/share/1550463655152640.htm 源代码截图:
今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点。有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化checkbox组合。另外,之前分享过的jQuery实现美化版的单选框和复选框也是非常不错。 在线预览 源码下载 实现的代码: ...
昨天写了一篇基于 jquery 实现 ie 浏览器兼容 placeholder 效果,具体内容点击传送门。不过还是有点小瑕疵,就是不能设置 placeholder 文本颜色。本文主要介绍利用 css 修改 placeholder 文本颜色。 对于 ie 浏览器我们可以通过自定义的 class 名称,直接修改 span 这个标签的样式。对于其他浏览器诸如谷歌和火狐就需要特殊处理了,不多说直接上代码: css: ::-webkit-input-placeholder{color:#f00;}::-moz-placeholde...
之前我们分享过一些CSS3和HTML5实现的自定义checkbox和Radiobox,比如纯CSS3美化Checkbox和Radiobox按钮,不仅外观唯美,而且Radiobox选中时还有动画效果。今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件,该radiobox选中时也有滑块的动画特效。 在线预览 源码下载 实现的代码。 html代码: html { display: flex; justify-content: center; ali...