CSS3 - 技术教程文章
CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）【代码】
《CSS3基本选择器》一、通配符选择器（＊）*{marigin:0;padding:0;}二、元素选择器(E)li {background-color: grey;color: orange;}三、类选择器（.className）四、id选择器（#ID）#first {background: lime;color:#000;}#last {background:#000;color: lime;}五、后代选择器（ＥＦ）.demo li {color: blue;}六、子元素选择器(E>F)ul > li {background: green;color: yellow;}七、相邻兄弟元素选择器(E + F)li + li {background: gr...
CSS3（六 CSS3新特性（阴影、动画、渐变、变形、伪元素等）【代码】【图】
一、阴影1.1、文字阴影1.2、盒子阴影二、背景2.1、背景图像尺寸2.2、背景图像显示的原点三、伪元素3.1、before3.2、after3.3、清除浮动四、圆角与边框4.1、border-radius 圆角4.2、边框图片border-image五、变形 transform5.1、rotate()2D旋转5.2、设置原点 transform-origin 5.3、平移 translate() 5.4、缩放 scale5.5、斜切扭曲skew 六、渐变七、透明7.1、opacity7.2、transparent与图片透明7.3、RGBA八、动画8.1、过渡动画8.2、...
【代码片段】CSS3 渐变（CSS3 Gradients）【代码】
background-color: #000; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#bbb‘, endColorstr=‘#000‘); background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); background-image: -webkit-linear-gradient(top, #bbb, #000); background-image: -moz-linear-gradient(top, #bbb, #000); background-image: -ms-linear-gradient(top, #bbb, #000); background-image...
CSS3图片圆角+阴影特效【代码】
使用CSS3技术编写的图片圆角及阴影特效代码，与一般的图片阴影有些不一样，用CSS直接生成阴影，当然要比使用图片来修饰要好得多，图片的加载可能会影响到网页的加载，CSS就不会哦。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=u...
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）【代码】
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>HTML5-页面切换动画</title> 6<link href="animations.css" rel="stylesheet"> 7<script src="modernizr.custom.js"></script> 8<script src="jquery-1.8.0.min.js"></script> 9<style> 10 #viewsWrapper { 11 top:0px; 12 left:0px; 13 width:300px; 14 height:200px; 15 position:relative; 16 overflo...
CSS3 动画及过渡详解【代码】【图】
今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、过渡(transition)和动画(animation)等CSS3技术。首先我们先来了解一下变形(transform),transform就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。下面我们来看一看它们是如何使用，先从我们的transform语法开始： <!--它其中的值为：旋转rotate、扭曲skew、缩放scale和移动...
CSS3-Canvas画布（线条）【代码】
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3-Canvas画布（线条）</title> <script> window.onload=function () { var canvas=document.getElementById("canvas");//获取canvas对象 var ctx=canvas.getContext("2d"); //创建二维的绘图上下文对象 //通过上下文对象调用属性或方法来绘图 ctx.beginPath();// “beginPath()” 表开始一条路径或者重置当...
css3实现单行文本溢出显示省略号【代码】【图】
文本超出一定宽度让其隐藏，以省略号替代width:200px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;如下图原文：https://www.cnblogs.com/theblogs/p/9941118.html
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。一.旋转 rotate用法：transform: rotate(45deg);共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。二.缩放 scale用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);参数表示缩放倍数；一个参数时：表示水平和垂直同时缩放该倍率两个...
了解CSS3边框圆角、边框阴影及边框图片的使用【代码】
边框圆角border-radius: 50%;这里的50%是谁的50%？其实是正方形边长的50% border-radius: 10px 20px 15px 5px; /* 左上角圆角的半径 右上角圆角的半径 右下角圆角的半径 左下角圆角的半径 */ border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; /* 前面四个值 是控制四个方向的横轴 后面四个值 是控制四个方向的纵轴 横轴的50%是宽度的50% 纵轴的50%是高度的50% */当圆角半径大于边框的时候，内容区会开始出现圆角。 边框阴影...
【css3网页布局】flex盒子模型【图】
1.0 前言网页布局（layout）是CSS的一个重点应用。经典布局类型：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，成为了现下最流行的布局方式。 Flex布局是什...
使用CSS3改变文本选中的默认颜色——张鑫旭【代码】【图】
关于浏览器文字选中颜色以我的系统举例（xp 默认主题），浏览器上页面文字选中后默认的背景色是一种蓝色， 不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色，如下图所示，截自Firefox3.6浏览器：在CSS3的爸爸妈妈还没有相亲认识的时候，要改变页面上文字选中后的背景色以及文字颜色，就跟让太监生孩子一样困难。但是，随着CSS3呱呱落地，获得越来越多的浏览器认可，一切又显得那么自然而然。虽然有些顽固的糟老头（如...
33.CSS3动画效果
第二十六章 CSS3动画效果一、动画简介 CSS3提供了类似Flash关键帧控制的动画效果，通过animation属性实现。之前学的transform属性只能通过指定属性的初始状态和结束状态实现动画效果，有一定局限性。 animation实现动画效果有两个部分组成 1、通过类似Flash动画中的关键帧声明一个动画 2、在animation属性中调用关键帧声明的动画 CSS3提供的animation是一个复合属性，它包含多种子属性，如...
html5+css3 制作音乐播放器
//css//body , html{ margin:0; padding:0; font:12px Arial, Helvetica, sans-serif; } .MusicBox { background-color: #212121; background-image: -webkit-gradient(linear, left top, left bottom, from(#1B1B1B), to(#212121)); background-image: -webkit-linear-gradient(top, #1B1B1B, #212121); background-image: -moz-linear-gradient(top, #1B1B1B, #212121); bac...
css3 border-image【代码】【图】
这是一个截图，我想做做种样式的div.最终效果下面开始：首先打开windows 画图板，手绘一个图形bg.jpg,歪歪扭扭就ok了： <style type="text/css"> div { -moz-border-image: url(border.png) 30 30 stretch; /* Old Firefox */ -webkit-border-image: url(bg.jpg) 10 10 stretch; /* Safari and Chrome */ -o-border-image: url(bg.png) 20 30 stretch; ...
用css3实现社交分享按钮
以前实现按钮一般都是用图片来实现的，特别是一些拥有质感的按钮，今天练习了一些相关方面的的例子，用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 icon font
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，为什么要将icon做成字体？在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式，比如png8 alpha透明或者png8 in...
CSS3 弹性布局&3D动画【代码】
通常我们设置perspective都是给父元素设置，给当前元素设置会导致没有3D视角的中心点，给父元素的上级元素设置会导致中心点可能错误，因为父元素的上级元素高度可能和父元素不一样。如果发现旋转时元素无法出现近距离变大，远距离变小，可以看看perspective是不是给力父元素 animation的复合写法只需要保证第一次出现的时间是持续时间duration，第二次出现的时间是延迟时间，其他参数顺序可以顺便写name iteration-count timing-...
css3选择器：nth-child和nth-of-type之间的差别【图】
<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，选择父级元素的第二个 段落 子 元素 如果把上面的代码稍...
那些熟悉又陌生的 css2、css3 样式，持续复习
initial关键字： 除了 Internet Explorer，其他的主流浏览器都支持 initial 关键字。 Opera 15 之前的版本不支持 initial 关键字。 initial 关键字用于设置 CSS 属性为它的默认值。 initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。overflow ： 所有主流浏览器都支持 overflow 属性。 注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性...
动画中的id与class使用css3的优先级问题【代码】【图】
今天在做一个项目，用zepto给元素增加一个class，class里面有transform的效果。开始的时候，元素的样式是用id选择器写的，但是增加class之后，发现动画效果出不来，当时头好晕没想出来为啥，结果回家后用简单的代码打一遍，发现原来是个很简单的问题……动画出不来的原因就是：id选择器里的css优先级要大于class选择器的优先级。新加进来的class没有办法覆盖掉原有的样式，导致了动画出不来。简单代码测试：<!DOCTYPE html><html><...
css3实现div自动左右动【代码】
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 ...
css3-(box-shadow)属性【代码】【图】
【box-shadow属性】：是一个css3属性，用于创建阴影效果。语法：box-shadow:offset-x offset-y blur spresd color position;属性值说明：offset-x offset-y指的是元素水平偏移量；blur：表示阴影的模糊半径；spread：阴影尺寸（从元素到阴影的距离），正值会在元素的各个方向按指定的数值延伸阴影，负值会使阴影收缩的比本身元素的尺寸还小。color：阴影的颜色值；position：可选，表示阴影的位置，默认值是外部阴影，关键字inset指...
HTML5+CSS3新特性学习【代码】
1.什么是HTML5万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，作为新HTML语言，具有新的元素，属性和行为。 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维，图形以及特效特性性能与集成特性，CSS3特性 2.H5新增语义化标签<header>头部标签 <nav>导航标签 <article>内容标签 <section>块级标签 <aside>侧边栏标签 <footer>底部标签 3.H5新增多媒体标签<au...
css3气泡 css3关键帧动画创建的动态通知气泡【图】
最近在一个Web项目上工作时，客户不得不强调以某种方式动态通知泡沫。基本上，每一次的通知值的变化，需要的视觉效果，以获得用户的注意力。所以我做了，使用CSS3关键帧动画。代码总体比较简单，欢迎任何形式的转载,但务必说明出处在线演示点击下面的两个按钮 通知气泡会随时变化的HTML在这个例子中，我们将使用导航常用的标记结构复制代码代码如下:<ul class="menu"> <li><a href="">首页</a></li> <li><a href="">关于我们...
css3 -- 颜色与不透明度【代码】
1、opacity：opacity的值会被它的所有子元素继承，也就是说不可能让一个元素比他的父元素更加不透明，但你可以让他变得更透明点Firefox Webkit Opera支持，注意IE 2、使用Alpha通道可以像其他任何颜色值一样被子元素继承，但元素的整体不透明度并不受影响，rgba值只能应用到它的指定元素上，所以子元素可以否决所有的继承Firefox Webkit Opera支持，注意IE 3、颜色变量1p {color:black;} 2p:last-child{ 3 backgorund-color:...
简单CSS3代码实现立方体以及3D骰子【图】
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; ...
纯css3加载动画
<!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 边框用 CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如 Photoshop。在本章中，您将了解以下的边框属性：border-radiusbox-shadowborder-image二、CSS3 圆角在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。在 CSS3 中，很容易创建圆角。在 CSS3 中 border-radius 属性被用于创建圆角：这是圆角边框！ /*在div中添加圆角元素*/ div { border:2px solid; border-radi...
css3 动画最简单的例子【代码】【图】
前言最近开发中遇到的动画特效非常的频繁，加上之前开发是用到animation.js这个动画库，对动画的属性一知半解，so 今天来了解一下做个记录。CSS3动画基础属性其实也就是一张图就能概括了@keyframes的语法属性 /*animationname : 定义一个动画名称keyframes-selector：动画区间百分比 合法值：0-100%from (和0%相同)to (和100%相同)注意： 您可以用一个动画keyframes-selectors。css-styles：一个或多个合法的CSS样式属性*/@keyfra...