在做web前端的时候，有些时候会涉及到模态层，在此提供一种实现思路，希望对大家有用。先贴效果吧： 模态层效果 下面说说在写模态层的时候的思路：通过可配置的参数width，height，title以及content用来设定弹出的信息框显示的内容，并通过可配置参数container用来设定模态层显示的区域。思路很简单，主要是一些css样式和js处理，详见源码： modal.css html,body{ font-size: 12px; font-family: "微软雅黑";}.moda...
在CSS+div里面，我先做了1个div背景，然后想在这个里面放两个,意思就像是把1个网页平分两半，但是问题出现了，就是：我先在左边那个设置了高度和宽度，并且放好了东西，接着在做右边那个的时候他不是和第一个并列显示的，而是排在了下面，右边就这样空着（里面两个的宽度没超出背景）。求助，谁告诉我怎么使里面的两个并列显示，最好说的详细点。谢谢！ 我在第一个div里面加了 样式：float:left; 没效果，第2个里面也加上floa...
在看《CSS那些事儿》遇到一个问题，在两列定宽结构中，高度为0的块级元素（即#container）的下外边距没有起作用，请问是怎么回事？ 效果图和代码如下： * { margin:0; padding:0;} /* 设置页面中所有元素的内外补丁为0，便于更便捷的页面布局 */#header, #footer { width:960px; height:30px; background-color:#E8E8E8;} /* 设置头部信息以及底部信息的宽度为960px，高度为30px，并添加浅灰色背景色 */#container { ...
在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。 2 SVG的特点 与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降...
作者：zhanhailiang 日期：2014-10-24 不做前端很久了，今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果，如渐变，阴影，自动截断文本展示省略号等等强大效果，而且这些功能日渐成熟，已经大量用于生产环境。H5真的日渐成熟了，得恶补下了。 以下分享实现指定文本超出部分以省略号展示的Demo： .text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:el...
今天给大家分享一款纯css实现的垂直时间线效果。垂直时间线适合放在类似任务时间安排的网页上。该实现采用了蓝色作为主题色，界面效果还不错。一起看下效果图： 在线预览 源码下载 实现的代码。 html代码： Blueprint Vertical Timeline Previous Blueprint Next Blueprint back to th...
如题，我想实现淡入淡出效果，该如何实现？谢谢! 回复讨论(解决方案) 调透明度？ 淡入：$(audio).animate({opacity:0},5000) 淡出：$(audio).animate({opacity:1},5000) 不是画面的淡入淡出，是声音的淡入淡出 调透明度？ 淡入：$(audio).animate({opacity:0},5000) 淡出：$(audio).animate({opacity:1},5000) 可以用定时器，定时修改音量，做出淡入淡出的效果 可以用定时器，定时修改音量...
HTML: demo1 demo2 CSS: .demo { width: 100px; height: 100px; text-align: center; line-height: 100px; border: 10px solid #ccc; border-radius: 60px; font-size: 20px; -webkit-backface-visibility: hidden}#demo1 {transition: border-color .3s ease}#demo1:hover {border-color: #a3d7ff}#demo2 {transition: all 1s ease}#demo2:hover {background-color: #a3d7ff;transf...
作为最重要的导航展示形式之一，面包屑导航能够让用户更清楚的知道他们所在页面的层次结构，让他们可以方便的导航到上一层页面。在本教程中，您将学习如何使用 CSS3 技术创建自己的面包屑导航效果。 效果演示 插件下载 详细教程 HTML示例代码： Lorem ipsum Vivamus nisi eros Nulla sed lorem risus Nam iaculis commodo Current crumb CSS示例代码： #breadcrumbs-...
效果图： 实现原理： 这个效果的主要css样式有： 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>visibility: hidden; 也是隐藏，与display:none;相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置 我们要用到3层div进行旋转来得到这个效果（ps:3层div的大小是一样的）。 最外层div(boxF)旋转120度。第二层(boxS)旋转-60度，第三层(boxT)再旋转-60度，此时刚好回正...
通过 CSS3 的新特性，我们创作出好的交互和效果的可能性大大增加。这篇文章中，我想与大家分享一些 CSS3 动画按钮效果。我们的想法是创建一个具有不同风格的一些动画链接元素，鼠标悬停时有动画效果和活动状态。 效果演示 插件下载 HTML 示例代码： $29 Available on the Apple App Store CSS 示例代码： .a-btn{ background: linear-gradient(top, #a9db80 0%,#96c56...
rt，哪位大虾帮忙解决下，谢谢~~ 回复讨论(解决方案) 页面高度大于背景图片时，向下拉动滚动条，高出部分显示白色，这是谷歌浏览器的效果。 火狐的显示效果是背景图片不动，内容滚动，实现了内容没有超出背景图片的效果。 所有浏览器都支持 background-attachment 属性，要想实现你说的效果，直接设置background-attachment:fixedl;即可 所有浏览器都支持 background-attachment 属性，要想实现你说的效果，直接...
前面讲过css3可以替代很多js实现的效果，其实很多时候纯css3甚至可以替代图片，直接用css3就可以画出一些简单的图片。虽然css3画出来的图片效果可能不如直接用图片的好，实现起来也比较复杂，最麻烦的是兼容性问题，不如图片来得直接实用。但是换一种思路去思考问题的解决办法往往能激发我们的灵感，也有助于我们学习css3。 下面给出的demo里会有用图片和纯css3实现的风车效果的对比。 先看看静态的效果图： 纯css3实...
CSS 是网页设计非常重要的一部分，随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择。如今，用纯 CSS 就可以实现各种各样很酷的效果，甚至是动画。 本文收集了15个惊人的 CSS3 动画演示，它们将证明 CSS3 Transform 和 Transition 属性的强大能力。 1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column ...
最近给大家分享 CSS3 效果比较多，都是充分运用了 CSS3 来实现的。通过 CSS3 的新特性，我们创作出好的交互和效果的可能性大大增加。这篇文章中，我想与大家分享使用 CSS3 过渡特性实现的信封效果的联系表单。 效果演示 插件下载 CSS3 代码： #form_wrap { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s eas...