以前实现按钮一般都是用图片来实现的，特别是一些拥有质感的按钮，今天练习了一些相关方面的的例子，用css3来实现Social Media Buttons html代码如下 <div class="outset-colored"><ul><li> <a href=" " title="My E-Mail" class="email"> <img src="images/gmail_white.png" alt="gmail icon" /> <span class="site">E-Mail</span> </a> </li><li> <a href="#" title="My LinkedIn Page" class="linkedin"> <img src="images/link...
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，为什么要将icon做成字体？在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式，比如png8 alpha透明或者png8 in...
通常我们设置perspective都是给父元素设置，给当前元素设置会导致没有3D视角的中心点，给父元素的上级元素设置会导致中心点可能错误，因为父元素的上级元素高度可能和父元素不一样。如果发现旋转时元素无法出现近距离变大，远距离变小，可以看看perspective是不是给力父元素 animation的复合写法只需要保证第一次出现的时间是持续时间duration，第二次出现的时间是延迟时间，其他参数顺序可以顺便写name iteration-count timing-...
<section> <p>我是第1个p标签</p> <p>我是第2个p标签</p></section>然后对应2个选择器对应的CSS代码如下：p:nth_child(2) { color:red;} // p:nth-of-type(2) { color:red;}两种对应的效果都是这样的：对于:nth-child选择器有两点需要说明：1，这个是个段落元素2，这个是父级元素的第二个孩子 而对于：nth-of-type选择器，意味着选择一个元素如果：1，选择父级元素的第二个 段落 子 元素 如果把上面的代码稍...
initial关键字： 除了 Internet Explorer，其他的主流浏览器都支持 initial 关键字。 Opera 15 之前的版本不支持 initial 关键字。 initial 关键字用于设置 CSS 属性为它的默认值。 initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。overflow ： 所有主流浏览器都支持 overflow 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性...
今天在做一个项目，用zepto给元素增加一个class，class里面有transform的效果。开始的时候，元素的样式是用id选择器写的，但是增加class之后，发现动画效果出不来，当时头好晕没想出来为啥，结果回家后用简单的代码打一遍，发现原来是个很简单的问题……动画出不来的原因就是：id选择器里的css优先级要大于class选择器的优先级。新加进来的class没有办法覆盖掉原有的样式，导致了动画出不来。简单代码测试：<!DOCTYPE html><html><...
1<!DOCTYPE html> 2<meta charset="UTF-8"/> 3<html> 4 5<head> 6<style> 7 div { 8 width: 100px; 9 height: 100px;10 background: red;11 position: relative;12 animation: myfirst 5s infinite alternate;13}1415 @keyframes myfirst {16 0% { 17 background: red;18 ...
【box-shadow属性】：是一个css3属性，用于创建阴影效果。语法：box-shadow:offset-x offset-y blur spresd color position;属性值说明：offset-x offset-y指的是元素水平偏移量；blur：表示阴影的模糊半径；spread：阴影尺寸（从元素到阴影的距离），正值会在元素的各个方向按指定的数值延伸阴影，负值会使阴影收缩的比本身元素的尺寸还小。color：阴影的颜色值；position：可选，表示阴影的位置，默认值是外部阴影，关键字inset指...
1.什么是HTML5万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，作为新HTML语言，具有新的元素，属性和行为。 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维，图形以及特效特性性能与集成特性，CSS3特性 2.H5新增语义化标签<header>头部标签 <nav>导航标签 <article>内容标签 <section>块级标签 <aside>侧边栏标签 <footer>底部标签 3.H5新增多媒体标签<au...
最近在一个Web项目上工作时，客户不得不强调以某种方式动态通知泡沫。基本上，每一次的通知值的变化，需要的视觉效果，以获得用户的注意力。所以我做了，使用CSS3关键帧动画。代码总体比较简单，欢迎任何形式的转载,但务必说明出处在线演示点击下面的两个按钮 通知气泡会随时变化的HTML在这个例子中，我们将使用导航常用的标记结构复制代码代码如下:<ul class="menu"> <li><a href="">首页</a></li> <li><a href="">关于我们...
1、opacity：opacity的值会被它的所有子元素继承，也就是说不可能让一个元素比他的父元素更加不透明，但你可以让他变得更透明点Firefox Webkit Opera支持，注意IE 2、使用Alpha通道可以像其他任何颜色值一样被子元素继承，但元素的整体不透明度并不受影响，rgba值只能应用到它的指定元素上，所以子元素可以否决所有的继承Firefox Webkit Opera支持，注意IE 3、颜色变量1p {color:black;} 2p:last-child{ 3 backgorund-color:...
1 实现3D立方体首先准备好UL以及6个Li；代码如下ul { position: absolute; top: 50%; left: 50%;transform:translate(-50%,-50%) // 以上代码主要是使ul居中而已 transform-style: preserve-3d; // 使子元素保留其3D视角-webkit-perspective: 0; //视距离，默认值为0 } li { width: 200px; height: 200px; position: absolute; ...
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="description" content="描述"> <meta name="keywords" content="关键字"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>纯css3加载动画</title> <style> .spinner { width: 100px; height: 100px; bo...
CSS3 边框一、CSS3 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性：border-radiusbox-shadowborder-image二、CSS3 圆角在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在 CSS3 中，很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角：这是圆角边框！ /*在div中添加圆角元素*/ div { border:2px solid; border-radi...
前言最近开发中遇到的动画特效非常的频繁，加上之前开发是用到animation.js这个动画库，对动画的属性一知半解，so 今天来了解一下做个记录。CSS3动画基础属性其实也就是一张图就能概括了@keyframes的语法属性 /*animationname : 定义一个动画名称keyframes-selector：动画区间百分比 合法值：0-100%from (和0%相同)to (和100%相同)注意： 您可以用一个动画keyframes-selectors。css-styles：一个或多个合法的CSS样式属性*/@keyfra...