CSS3自定义滚动条样式 -webkit-scrollbar

CSS3自定义滚动条样式 -webkit-scrollbar
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。 首先我们要了解滚动条。滚动条从外观来看是由两部分组成: 1,可以滑动的部分,我们叫它滑块 2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式主要有三部分组成: 1、::-webkit-scrollbar   定义了滚动条整体的样式; 2、::-webkit-scr...
守财鹿邀请码

jquery-scrolla是一款页面滚动触发动画插件

jquery-scrolla是一款页面滚动触发动画插件
jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时,进入视口的元素会触发指定的CSS3动画。 简要教程 jquery-scrolla是一款页面滚动触发动画插件。jquery-scrolla插件可以在页面向下或向上滚动时,进入视口的元素会触发指定的CSS3动画。它和animate.css完美结合,可以执行animate.css中的任何CSS3动画效果。 在页面中引入jquery和scrolla.jquery.min.js以及animat...

自定义复选框checkbox样式

自定义复选框checkbox样式
复选框作为网页中比较常见的一个组件,有的时候我们需要对它进行美化,但是我们无法直接为其定义样式,所以我们需要一些其它的办法。 表单元素中有label 元素和 for属性,当我们点击label 标签时,对应的表单元素就会有所反应。我们就是依据这个特性来实现的。 HTML: <body> <input type="checkbox" id="myCheck"> <label for="myCheck"></label> </body> 既然...

我在工作中总结的一些前端常用小细节

我在工作中总结的一些前端常用小细节
不废话,直接上一些我们工作中常用的前端效果。希望对一些人有用。 1、点击聚焦 onfocus="if (value =='请输入您的电话号码'){value =''}" onblur="if (value ==''){value='请输入您的电话号码'}" 相信很多人在写form表单的时候能用到。顺带提一下,当我们点击input框时会有出现蓝色边框,我们可以这样来处理input{outline:none;}。 2、ie的透明度兼容 background:#000;filter:Alpha(opacity=60); backgr...

一整套WordPress模板制作的教程

一整套WordPress模板制作的教程
WordPress基本模板文件 一套完整的WordPress模板应至少具有如下文件: style.css: CSS(样式表)文件 index.php : 主页模板 archive.php : Archive/Category模板 404.php : Not Found 错误页模板 comments.php : 留言/回复模板 footer.php : Footer模板 header.php : Header模板 sidebar.php : 侧栏模板 page.php : 内容页(Page)模板 single.php : 内容页(Post)模板 searchform.php : 搜索表单模板 search....

css3 条纹背景滚动效果

css3 条纹背景滚动效果
今天在一个网站上看到这样一个效果,我一开始以为一个背景gif图片,为了验证我的想法,我打开firebug 一查看,原来不是gif。是用css3完成的。于是我就在查看css3的api帮助下尝试着 写一写,代码如下 html代码很简单 就一个div就ok,只不过在样式里面 加了一个 :after。 下面直接上css代码: .test{margin: 100px auto; width: 250px;height: 60px; background-color: #666;position: relative;} .test:...

你所不知的 CSS ::before 和 ::after 伪元素用法

你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。接下来要介绍的这两个伪元素了。 一 基本语法 在了解进阶的应用之前,先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时,只需使用伪类使用的单冒号写法,以保证浏览器的兼容性: p:before  {} 这两个伪类下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上...

CSS 专业技巧收集

CSS 专业技巧收集
一些CSS技巧的收集,能够帮助你提升专业水平。 1. 使用:not()为导航添加/取消边框 很多人会这样给导航添加边框,然后给最后一个取消掉: /* add border */ .nav li { border-right: 1px solid #666; } /* remove border */ .nav li:last-child { border-right: none; } 其实,用CSS的:not()可以简化为下面的代码: .nav li:not(:last-child) { border-right: 1px solid #666; } 2. ...

css3 时钟

css3 时钟
css3时钟是用css3和js 配合完成的(请问ie9及以上浏览器或者 谷歌 火狐浏览器)……完美: .clock-box{width:220px; height:220px; border:2px solid #444;margin-top:50px; position: relative; left:35%;border-radius:360px;box-shadow:1px 1px 13px #000 ;background:-webkit-gradient(linear, 0 0, 0 100%, from(#667e88), to(#1c1411)); border:1px dashed #0d91b3;} .clock{width:200px; height:200...

使用Move.js创建CSS3动画

使用Move.js创建CSS3动画
在网站上,CSS3 的过渡和动画是当前创建轻量级动画的首选方法。不幸的是,很多开发者发现他们自己的语法和复杂和混乱的。如果这听起来像你自己,对你来说,或许Move.js是完美的方案。Move.js是使用简单函数创建 CSS3 动画的一个简单的JavaScript库。 Move.js 提供了创建 CSS3 动画的最简单的 JavaScript API。让我们假设有一个带类 box 的 div 元数,当鼠标 移动到 div 上面的时候我们想从左侧移动元素100...
Copyright © WEB小工匠 保留所有权利.   渝ICP备15008469号

渝公网安备 50023602000173号

用户登录

分享到: