作者：zhanhailiang 日期：2014-10-24 不做前端很久了，今天从重构师那里了解到CSS3已经可以实现很多以往必须通过JS才能实现的效果，如渐变，阴影，自动截断文本展示省略号等等强大效果，而且这些功能日渐成熟，已经大量用于生产环境。H5真的日渐成熟了，得恶补下了。 以下分享实现指定文本超出部分以省略号展示的Demo： .text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:el...
作为最重要的导航展示形式之一，面包屑导航能够让用户更清楚的知道他们所在页面的层次结构，让他们可以方便的导航到上一层页面。在本教程中，您将学习如何使用 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...
前面讲过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...
在线演示：莲花盛开 在线演示：忙碌光标效果 在线演示：发光效果
css3 record1 尝试用css写了个箭头效果思路就是通过span和span子元素i分别通过设置他们的伪元素构造两个箭头,但是i构造的箭头两条线height都是0,hover的时候渐近的动画效果就是i箭头的高度变化而来的,还有rotate相同的角度 css3知识： transition transform 伪元素::before ::after jsfiddle demo transition Formal syntax: [ none | <single-transition-property> ] || || <timing-function> || transtion-p...
-webkit-gradient(linear,0% 0%, 0% 100%, from(#4998FF), to(#3B90FF), color-stop(0.5,#0A0FA6)) webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop(偏移量小数,停靠颜色值),...] ); -webkit-gradient是background的一个属性值； webkit内核的Linear Gradients (线性渐变) 第一组参数type（类型）...
阴影效果通常用来表现光线投射在物体上的感觉，如果想制作一个如图5.19所示的文字光影效果，就可以使用背景的线性渐变进行构建。 图5.19可以看到有类似光束照射文字的效果，很好地突出了文字。这实现起来很简单，只需要对文字居中，对背景元素设置从中心发散的放射渐变即可，代码如下： // HTML代码赞 // CSS代码：.box{ width: 200px; height: 200px; font-size: 80px; line-height: 200px; ...
阴影效果通常用来表现光线投射在物体上的感觉，如果想制作一个如图5.19所示的文字光影效果，就可以使用背景的线性渐变进行构建。 图5.19可以看到有类似光束照射文字的效果，很好地突出了文字。这实现起来很简单，只需要对文字居中，对背景元素设置从中心发散的放射渐变即可，代码如下： // HTML代码赞 // CSS代码：.box{ width: 200px; height: 200px; font-size: 80px; line-height: 200px; ...
纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况，效果如下： 主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一点平面几何知识（计算间距、角度啥的），详细过程如下： 首先设计一下要显示的布局（俯视图），途中垂直的线为辅助线，计算偏移量时需要用的： 红色框框为旋转面（即走马灯效果的结构最终以...
以下是css3定义圆角： #main{ margin:20px; border:1px solid #E1E1E1; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; padding:20px; } 以下是html中对样式的引用： 以下是css3定义边框阴影： 实例 向 div 元素添加方框阴影： div { box-shadow: 10px 10px 5px #888888; } 以下是css3中设置为图片边框： 使用图片创建围绕 div 元素的边框： div { bo...
New Document p a{font-size:20px;display:block;font-weight:bold;background:#00aaFF;color:#FFF;width:200px;padding:10px;text-shadow:0px 1px #ccc;border-radius:5px;box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);transition-property:all;transition-duration:2s;transition-timing-function:ease;transition-timing-function:cubic-bezier;transition-delay:0s;}a:hover{background:#11ccaa;}