CSS-搜索列表,幸凡学习网

文章搜索列表

文章搜索 >> CSS

发布时间：2016/3/9 21:14:30 阅读(6871)条评论(0)条

css3我在5年之前就有用了，包括公司项目都一直在很前沿的技术。最近在新的项目中,用了大量的css3动画，但是真的沉淀下来仔细的去深入css3动画的各个属性发现还是很深的，这里就写下关于帧动画steps属性的理解我们知道css3的animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-play-stateanimation-fill-modeanimation-timing-function其中1-7大多都有介绍，但是animation-timing-function是控制时间的属性在取值中除了常用到的三次贝塞尔曲线以...未完，继续阅读→
关键字：css3 animation 动画

CSS定位属性之间的相互作用

发布时间：2015/10/28 17:27:41 阅读(5185)条评论(1)条

1. 引言原文：bitsofcode的HOW POSITIONING CSS PROPERTIES INTERACT译者：爱前端，乐分享的FedFun，前端痴王海庆的博客。译言：来看下CSS标布局情况下，定位相关属性之间的相互作用，意译为主，不当之处敬请指正。阅读建议5分钟。2. 正文在定位元素时，我们经常用到四个属性display、position、float和偏移属性top right bottom left等。但不是在每个元素上都可以同时应用这四个属性，一些特殊的值组合会覆盖其他属性的应用，这些组合有：display: noneposition: absolute或position: fixedfloat: left或float: rightposition: static接...未完，继续阅读→
关键字：css

移动端开发，几个你可能不知道的CSS单位属性

发布时间：2015/6/18 21:04:06 阅读(7408)条评论(0)条

1. rem"em" 单位是我们开发中比较常用到的，它表示以当前元素的父元素的单位大小为基准来设置当前元素的大小；“rem” 中的 “r” 代表 “root”，它表示以根（即“html”）元素的单位大小为基准来设置当前元素的单位大小，所以不管当前元素是任意子节点，一旦设单位大小为 “rem” 那么这个元素大小都是以根元素单位为参考的，这里的 “em” 和 “rem” 均具有继承性。2. vw 和 vh（移动端开发个人最喜欢的单位属性，也是这次介绍的重点...未完，继续阅读→
关键字：移动 css rem em

前端人员必看CSS命名规范

发布时间：2015/5/19 14:55:28 阅读(9125)条评论(0)条

作为前端的设计人员，对于CSS的接触，就像吃饭一样。所以CSS命名规范命名是前端人员必看的。文章整理了Web前端开发中的各种CSS规范，包括文件规范、注释规范、命名规范、书写规范、测试规范等。一、文件规范1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解：所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中：基本样式库 /css/core通用UI元素样式库 /css/libJS组件相关样式库 /css/ui业务类的CSS是指和具体产品相关的文件，放在如下目录中：读书 /css/book/电影 /css/movie/音乐 /css/music/社区 ...未完，继续阅读→
关键字：css 命名技巧

CSS3的background-size优化Sprites图显示实例

发布时间：2015/5/16 11:05:42 阅读(6347)条评论(0)条

本篇主要是讲css3如何使用background-size与sprites同时使用技巧。运行查看效果时别忘了用支持CSS3 的浏览器查看.ie9+,chrome,firefox,...一、background-size使用方法可以创建一张Sprites图，这张图既有普通分辨率图像，又有高分辨率下的图像？你可以，但你还是要面对，你的用户在一个较慢的带宽下下载一个大图的烦恼。你也要同时面对IE9以下的浏览器不支持background-size的麻烦问题。你最好还是分别为高分辨率和普通分辨率创建不同的两张Sprites图。这个时候又有不同的声音了，这不是增加工作量吗？但这真的不是,在我的工...未完，继续阅读→
关键字：css3 sprite 技巧

css之input hover,focus伪类特效

发布时间：2014/8/13 9:08:21 阅读(22968)条评论(0)条

记得以前为了兼容ie6,ie7等低版本不支持css伪类，不得不用JS去做效果。现在IE6，7使用的人越来越少了，我们是时候应该抛弃它们了（使用JS控制文本框特效）。CSS伪类可以很好的做到这点只需要几行代码就可以了。而且是全局性的，不需要每个文本框跟按钮去添加样式。一劳永逸，够爽的吧。下面就开始介绍。IE6 IE7 IE8(Q) 不支持如”:focus,:hover”等伪类特效，所以我们的特效是基于支持伪类的浏览器中才能看到的特效。支持键盘控制一样可以显示效果。效果如下图所示：兼容情况IE6IE7IE8(Q)IE8(S)FirefoxSafariOperaChromeNNNY...未完，继续阅读→
关键字：css 伪类 focus 特效

CSS3打造一组质感细腻丝滑的按钮

发布时间：2014/8/6 9:53:05 阅读(6670)条评论(0)条

CSS3 引入了众多供功能强大的新特性，让设计和开发人员能够轻松的创作出各种精美的界面效果。下面这些发出闪亮光泽的按钮，很漂亮吧？把鼠标悬停在按钮上，还有动感的光泽移动效果。　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。HTML效果如下：　这些精美的效果用到了 CSS3 RGBA、box-shadow（阴影）、border-radius（边框圆角）和 linear-gradient（线性渐变），为了便于阅读，功能介绍代码如下：.button { min-height: 1.5em; display: inline-block; padding: 12px 36px;...未完，继续阅读→
关键字：css3 按钮

css让网页变灰兼容IE/ff/chrome

发布时间：2014/4/1 16:24:19 阅读(10373)条评论(0)条

今天在chrome用百度看到【马航最后通话内容】就点进去了,发现谷歌浏览器的图片颜色都变成灰色的了。但是今天不是讨论马航，而是讨论一个前端站长的技术问题—css让网页变灰兼容IE/ff/chrome。好奇的我用debug查看了下。代码如下：html{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter:grayscale(1)}然后自己使用后发现FF无效。然后自己也动...未完，继续阅读→
关键字：css 灰色图片

关于css3边框的radius和image用法的详解

发布时间：2014/3/26 9:16:58 阅读(7699)条评论(0)条

一、圆角边框：IE9.0以前版本不支持 border-radius: 接受8个属性，前四个为x轴，后四个为y轴，以斜杠划分x轴、y轴，即border-radius:左上较右上角右下角左下角 / 左上角右上角右下角左下角 ;（x轴/y轴），如：border-radius: 100px 0 100px 0/100px 0 100px 0。顺序图：原理图：原理：以四个角a，b，c，d 为起点，横向为x轴，纵向为y轴，以左上角x轴100px，y轴100px两点之间为弧，四个角交点为圆心的的四分之一圆，同样右下角也是，即 border-radius:...未完，继续阅读→
关键字：css3 边框背景

让网站的图片变成灰色效果兼容所有主浏览器

发布时间：2014/3/18 14:25:15 阅读(10866)条评论(0)条

以前有写过用【HTML5&jQuery指向时图片从灰度变成彩色】的文章，不兼容跨域的网站图片，所以今天看到有篇文章支持多浏览器图片变灰度的效果。就把上一篇文章改进一下。希望在前端努力的朋友可以借鉴一下。兼容：兼容Firefox 3.5+, Opera 15+, Safari, Chrome, and IE。效果图如下：(因为本人虚拟机不支持SVG文件的打开，所以只能你自已手动复制内容到本地运行！) 源代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi...未完，继续阅读→
关键字：css 灰色图片

Web开发者不容错过的10段CSS代码

发布时间：2014/3/12 13:54:03 阅读(7208)条评论(0)条

　Web开发技术每年都在革新，浏览器已逐渐支持CSS3特性，并且网站设计师和前端开发者普遍采用这种新技术进行设计与开发。但仍然有一些开发者迷恋着一些CSS2代码。　　本文将分享20段非常专业的CSS2/CSS3代码供大家使用，你可以把它们保存在IDE里、或者存储在CSS文档里，这些代码片段绝对会给你带来意外的惊喜。　　1. CSS Resets　　网络上关于CSS重置的代码非常多。本段代码是根据Eric Meyer’s reset codes进行改编的，里面包含一点响应式图片和所有核心元素的边界框设置，这样就可以保持页边距和填充可以很好地对齐。html, body,...未完，继续阅读→
关键字：css web 开发

实现CSS3动画的工具、特效和教程指南

发布时间：2014/3/4 10:24:32 阅读(7942)条评论(0)条

CSS3的动画能够实现动画从一个CSS样式配置过渡到另一个。动画由两部分组成，描述了CSS动画和一组关键帧指示动画风格的开始和结束状态。 CSS 动画工具Tridiv Animate.css Anima animo.js CSS3 Animation Cheat Sheet Ceaser Magic CSS3 Animations Stylie Sencha Animator CSS3 Keyframes Animation Generator Morf.js CSS 动画教程及特效Animated 3D Bar Chart with CSS3查看DEMO 下载Interactive Infographic with SVG and CSS Animations查看DEMO 下载...未完，继续阅读→
关键字：css3 教程特效

当前第 2 页 / 共 9 页总共108条记录
123