background</a>:#eeefff;<a href=">这是一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效，如果你的网络无法加载这些字体，可能是由于国外的这个网站被墙的缘故，就像google的字体库网址被屏蔽那样。在线演示源码下载HTML代码<p id="container"><p><a href="#">RED</a></p><p><a href="#">BLUE</a></p><p...
background</a>:#eeefff;<a href=">这是一款很漂亮很有特色的CSS3菜单插件，和普通的菜单不同，它拥有飘带的外观，同时，鼠标滑过菜单项时，菜单项又会突起显示，很有3D立体的视觉效果。结合网页的背景，这款菜单就更显立体感了。有需要的前端设计师可以通过研究源码来使用这款菜单插件，当然，这也需要你的浏览器支持CSS3。在线演示源码下载HTML代码<p class=ribbon><a href=#><span>Home</span></a><a href=#><span>About</span>...
css如何垂直居中一个元素的问题已经是一个老生常谈的问题了。不管对于一个新手或者老手，在面试过程中是经常被问到的。前两天在看一个flex的视频教程，当中提到了有关元素的居中问题，所以今天小编就来扒一扒几种常见的方式。不足之处请大家批评指正（所有的代码都是自己亲手敲过可用的）1、水平居中（margin:0 auto;） 关于这个，大家应该是最不陌生的,不管是在培训班还是自己自学的话 。这个应该是老师讲的第一个方法了（...
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：准备工作1：设置Meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">这段代码的几个参数解释：width = device-width：宽度等于当前设备的宽度initial-scale：初始的缩放比例（默认设置为1.0） minimum-scale：允许用户缩放到的最小比例（默认设置为1.0） maximum-scale：允许...
下载 animate.css文件，文件的代码很多，不过要明白那是很多特效的CSS样式，如果只使用到其中的一两个特效，可以选择性的复制。首先是公共的样式：.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both; }.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite; }.animated定义了动画的持续时间；.an...
在项目开发中我们经常会遇到需要更改input单选和多选样式的情况，今天就给大家介绍一种简单改变input单选和多选样式的办法。在这之前先简单介绍一下:before伪类:before 选择器向选定的元素前插入内容。使用content 属性来指定要插入的内容（content是必须的哦）。相信这并不难以理解，接下来我们先理解思路：（1）首先在html用label为 input 元素定义标记，也就是当你点击label标签时相应的input也会选中或取消（2）接下来就是写cs...
一、代码<style>ul{list-style: none}p ul li{width:100px;height:30px;border:#eee 1px solid;float:left;}p ul li:nth-child(1){background:#f00;}p ul li:nth-child(3){background:#ccc;}</style> <p> <ul> <li>11</li> <li>22</li> <li>33</li> </ul></p>二、预览效果如上图，ie9及以上背景色能显示问题：如上图，ie8背景色显示不出来三、解决方法<style> ul{list-style: none} p ul li{width:1...
这篇文章主要介绍了解决CSS3的opacity属性带来的层叠顺序问题的方法,主要针对opacity的属性值小于1的层会覆盖在其他层之上的问题,需要的朋友可以参考下在最近的一个作品中，在使用 opacity 属性来实现页面整体透明的时候，发现了一个问题。如果两个层发生了重叠，使用了 opacity 属性并且属性值小于1的层，会覆盖掉后面的层。于是动手做了个实验，来验证 opacity 的层次。网页中的层叠规律是这样的：如果两个层都没有定义 position...
这篇文章主要介绍了使用CSS3编写灰阶滤镜来制作黑白照片效果的方法,CSS3中的filter十分强大,文中还介绍了对IE兼容的方法,需要的朋友可以参考下CSS3 中的滤镜（filter）功能让我们轻松方便简单的处理图片，而不需要使用 PhotoShop 或者使用很多 JavaScript、PHP 代码。这个属性已经得到比较新的 Firefox、Safari、Chrome 浏览器支持，而且我们可以通过综合的可替代的技术来模拟实现这个效果——甚至是 IE 浏览器。本文中，我们将使用...
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的方法首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了：.circleprogress{ width: 160px; height: 160px; border:20px solid red; border-radius: 50%; }然后就会说，这很简单嘛。但是如果不是完整圆形的...
perspective属性及相关的perspective-origin属性都是用来控制3D图形空间中坐标轴上的距离的,下面我们就来分享CSS3的perspective属性设置3D变换距离的示例方法,当然后面也会讲到perspective-origin的用法:perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。...
本篇文章主要介绍了使用CSS3实现Material Design效果的方法。是对原生组件基于标签属性做了美化，具有一定的参考价值，有兴趣的可以了解一下。预览这是一个正在完善的css文件，是对原生组件基于标签属性做了美化，对datepicker,select等无法用css实现的暂不考虑在本文内。按钮 Button初始按钮 <button>button</button><button class="red">red</button><button class="orange">orange</button><button class="blue">blue</butto...
这篇文章介绍css3动画2D、3D转换的方法css3动画的2D、3D转换代码:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css3动画</title><style type="text/css">p{width:100px;height:100px;background: rebeccapurple;color:#fff;}.p1{/*translate:移动(x,y)*/transform:translate(100px,100px);-webkit-transform: translate(100px,100px);/*safari,chrome*/-ms-transform: translate(100px,100px);/*IE*/-o-tra...
CSS3的box-shadow用来制作多重边框真的比较给力,这也是本文详解CSS3实现多重边框的方法的重点,不过在此之前我们还是先来看一下兼容性较好的传统方式:方法1：p嵌套实现多重边框。效果图：html代码<p id="outer"><p id="inner">p嵌套实现多重边框</p> </p>css代码#outer { width: 100px; height: 100px; background-color: bisque; border: 10px solid brown; position: relative; } #inner { width: 84px; heigh...
CSS3中的flex布局和before伪元素等特性用来实现垂直居中真的是太方便和优雅了,这里我们就来总结CSS3的新特性来总结垂直居中的实现方法分享:0.单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了.middle-demo-1{ height: 4em; line-height: 4em; overflow: hidden; }优点：（1）. 同时支持块级和内联极元素（2）. 支...