CSS3 - 技术教程文章
好用的css3特性-过渡和2D变换【代码】【图】
css3中有很多非常好用的特性，今天来总结一下与动画相关，包括过渡、2D变换。首先来介绍一下过渡，过渡是在进行变化的时候进行的一个缓冲，如果没有过渡，当变更了元素的位置、大小的数据时，会一瞬间完成变化，增加了过渡之后，变化的过程会展现出来。比如以下gif，我们想要在鼠标移入盒子的时候，将盒子的宽和高增大一倍，并且更改颜色，没有过渡和过渡明显在用户体验上就不一样。?过渡的写法也简单，只需要在变化的基础上增加一...
3.css3文字与字体【图】
1.css3文字与字体： ①Font-size：大小。⑴通常使用px、百分比、em来设置大小； ⑵xx-small、x-small、small、medium、large、x-large、xx-large设置为不同尺寸，默认值medium； ⑶smaller设置为比父元素更小的尺寸； ⑷larger设置为比父元素更大的尺寸；②Font-variant：规定是否以小型大写字母的字体显示文本。 ⑴Normal默认值，浏览器会显示一个标准字体； ⑵Small-caps浏览器会显示小型大写字母的字体；③Font-...
css3动画添加间隔【代码】
因项目需要，需要在元素上实现动画效果，并且需要有动画间隔。坑爹的是animation-delay只有在第一次动画开始的时候才起效。在网上找了很多方法，最终的方法基本都是改动画规则，比如@keyframes move{/* 此处从75%开始 */75%{ transform: translateX(0px);}100%{ transform: translateX(100px);}}但是项目的特殊性在于元素都是组件类型的，意思就是给每个元素写单个的动画效果是不现实的。因为动画效果是通用的，不能因为某个元素就...
CSS3秘笈：第七章
第七章 margin、padding和border1.盒模型：四个属性：（1）padding：内容与其边框线之间的空间。（2）border：盒子周围的直线（3）background-color：用来填充边框内部空间的，包括padding区域。（4）margin：一个标签和另一个标签之间的间隔。2.padding和margin的区别：padding是在内容和边框之间增加空间。避免内容被硬塞在方框里面，它还包括背景区域，因此padding占用的空间也可以为空白的内容。而margin则是在元素之间增加空...
css3中的三种选择器
选择器：CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容一 属性选择器：a) E[attribute] 表示存在attr属性即可；div[class]b) E[attr=val] 表示属性值完全等于val；div[class=mydemo]c) E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；div[class*=mydemo]d) E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；d...
CSS3制作同心圆进度条【代码】【图】
1、css代码此处在制作进度条时，是旋转进度条的半圆（红色），背景使用灰白（如果使用红色作为背景，旋转灰白遮罩，在浏览器中可能会有渲染bug）1.wrapper{ display:block;position:relative;width:100px;height:100px;border-radius:50px;overflow:hidden; } 2.pie { position:absolute;background-color:#e74c3c;width:100px;height:100px; } 3.pie1 { clip:rect(0px,50px,100px,0px); } 4.pie2 { clip:rect(0px,100px,100px,50p...
用Less定义常用的CSS3效果函数及常用颜色搭配（让CSS写起来更有趣）【代码】【图】
定义圆角及调用/* 定义圆角 @radius 圆角大小 */ .round(@radius:5px){border-radius:@radius;-webkit-border-radius: @radius;-moz-border-radius: @radius; } .round7{.round(7px); }定义盒子阴影及调用/* 盒子阴影 @right_left 右边阴影为正数 左边负数 @bottom_top 下边阴影为正数 上边负数 @box 阴影大小 @box_color 阴影颜色 */ .boxshadow(@right_left:5px,@bottom_top:5px,@box :5px,@box_color:#b6ebf7){box-shadow:@arg...
CSS3的 transition 属性【代码】
CSS3的 transition 属性用于状态过度效果！1、语法：1transition: property duration timing-function delay; 2-moz-transition: property duration timing-function delay; 3-webkit-transition: property duration timing-function delay; 4-o-transition: property duration timing-function delay;上以语法兼容各浏览器。2、transition含有四个部份设置，各部份设置如下： a) property ：规定设置过渡效果的 CSS 属性的名称，可...
PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 features
PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. Consider, if you will, the following CSS: PIE currently adds full or partial support to IE 6 through 8 for the following CSS3 featuresborder-radiusbox-shadowborder-imagemultiple background imageslinear-gradient as background ...
css3动画【代码】
html<div class="a4"><a href="" class="a5"></a><div class="a6"><div class="a7"></div></div><a href="" class="a8"><div class="a9"></div></a><a class="a10" href=""><div class="a11"></div></a><a class="a12" href=""><div class="a13"></div></a> </div> css@keyframes myfirst { from {transform: translate(0px,0px);} to {transform: translate(10px,20px);} } .a4 div:hover{animation: myfirst .5s linear 3 alter...
jquery和css3打造超梦幻的三维动画背景【代码】【图】
今天为大家带来的是一款由jquery和css3实现的超级梦幻的背景效果。绿色的小原点由远到近，由近到远一种飞跃效果。效果非常好看，我们一起看下效果图： 在线预览 源码下载 我们一起看下实现的代码。这是一款由jquey和css3实现的效果。这里引用的是jquery 11.0版本。注意需在ie9以上浏览器、google、或火狐等支持css3的浏览器中运行。html代码：<div class="container" style="opacity: 0.55; -webkit-perspective: 50px;"><div st...
30个CSS3选择器的应用【代码】
或许大家平时总是在用的选择器都是： id class 以及标签选择器。可是这些还远远不够，为了在开发中更加得心应手，本文总结了30个CSS3选或许大家平时总是在用的选择器都是：#id .class 以及标签选择器。可是这些还远远不够，爱创课堂为了在开发中更加得心应手，本文总结了30个CSS3选择器，希望对大家有所帮助。更多精彩关注：http://www.icketang.com/1 *：通用选择器* { margin:0; padding:0; }*选择器是选择页面上的全部元...
HTML5与CSS3权威指南
第一章：Web时代的变迁HTML5放心使用的理由：兼容性：HTML5在老板本的浏览器上也可以正常运行；实用性：HTML5内部并没有封装什么很复杂的，不切实际的功能，而只是封装了简单实用的功能；非革命性的发展：HTML5的内部功能不是革命性的，只是发展性的。第二章：HTML5与HTML4的区别1.DOCTYPE声明：<！DOCTYPE html>2.指定字符i编码：<meta charset = "UTF-8">3.不允许写结束标记的元素有：area, base, br, col, command, embed, hr, ...
CSS3教程：background-clip和background-origin【图】
原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-position 计算的参考位置。语法为：background-clip: [border | padding] [, [border | padding]]* background-origin: [border | padding...
CSS3入门之边框与背景【代码】【图】
CSS3入门之边框与背景*:first-child {margin-top: 0 !important; }body>*:last-child {margin-bottom: 0 !important; }/* BLOCKS =============================================================================*/p, blockquote, ul, ol, dl, table, pre {margin: 15px 0; }/* HEADERS =============================================================================*/h1, h2, h3, h4, h5, h6 {margin: 20px 0 10px;padding: 0...
html5和css3实现的3D滚动特效【代码】【图】
今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下：在线预览 源码下载实现的代码。html代码：<div class="container"><div class="cube"><div class="side side1"></div><div class="side side2"></div><div class="side side3"></div><div class="side side4"></div><div class="side side5"></div><div class="side side6"></div></div></div><div class="container container2"><div class="cube"><div class="sid...
15个让人惊讶的 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 5. Slick jQuery Menu 6. Frame-by-Frame Animation (...
web前端小案例-css3制作浏览器背景渐变背【代码】【图】
知识点：rgb全色循环算法，HEX与RGB颜色转换算法、CSS3颜色渐变，CSS3渐变色兼容ie方法，定时器与循环，函数封装,数组应用等。css代码： <style>*{margin:0;padding:0;}body#wrap{width:100%;height:500px; }</style>JavaScript代码： <script>function convert(sRgb){ /*rgb转换成HEX*/var sRgb=sRgb;var sHex=sRgb.toString(16);sHex=sHex.length<2?‘0‘+sHex:sHex /* 三目判断 判断条件 ？ 符合条件 ：不符合条件*/return...
CSS3 @font-face【代码】【图】
(转)CSS3 @font-facehttp://www.fontsquirrel.com/fontface@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的...
基于CSS3的3D旋转效果【代码】【图】
自从有了html5和css3，好多以前只能想想的华丽效果都可以上手实现了。3D 转换(个人认为3D变换更贴切^)就是其中之一。关于3D转换，可以阅读CSS3 3D transform变换，不过如此，文中对3D转换进行了形象、生动、详细的阐述。在这里，只和大家讨论怎么利用3D转换来实现立体及其旋转效果，例如：好吧，废话不多说，上代码！1.页面代码 1<div class="translate3D_test"> 2<ul class="cube"> 3<li class="translate3D_li">1</li> 4<li cla...
每天一个Js小demo之移动端全景图场景实现-全景装修图。主要知识点：css3，旋转角度检测
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width,user-scalable=no" /><meta charset="UTF-8"><title>Document</title><style type="text/css">body,html { margin: 0; height: 100%; overflow: hidden; position: relative;}.wrap { position: relative; height: 100%;} .view,.boxZ,.box { position: absolute; left: 50%; top: 50%; -webkit-transform-style: preserve-3d; transform...
使用CSS3动画 animation 来控制元素的显示和隐藏【代码】
CSS3中 animation 和 transition 俩样式都能创建动画效果，而且是后台C++执行的，所以效率比普通jQuery的js模拟动画的效率高很多，所以建议大家能用css实现的效果都用css。transition的使用比较简单，这里就不介绍了，着重为大家介绍下 animation 。animation 的css属性有很多，本文通过 animation-name 来控制启动动画和转换动画，以下是一个通过 animation 来控制元素的显示和隐藏的例子（仅支持webkit）：<!doctype html> <html...
HTML5和CSS3中的交互新特性
当文章的标题是一副用photoshop制作的图片，那么势必在搜索引擎中无法搜索到。并且因为图片的体积不算小。可能在网速慢的的时候不得不耐心的等待图片的刷新。所以。我们来谈谈有没有一种新的方法能够避免这些缺点。 什么是HTML5和CSS3 HTML和CSS并不难理解。HTML为构成网页的主要语言。通过这样的语言。我们能够向计算机说明网页格式、内容、显示效果等等。而CSS则是专门用来控制网页显示效果的语言。 HTML 5的新特性 1. 新的内容标...
CSS3 过渡【代码】
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。请把鼠标移动到下面的元素上：CSS3 过渡浏览器支持属性浏览器支持transition Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。注释：Chrome 25 以及更早的版本，需要前缀 -webkit-...
基于css3实现手风琴效果
终于在凌晨一点钟逼迫自己写博客。一直想记录自己的前端工程师之路，但毕竟拖延症晚期。因为第一篇随笔，所以多写一点废话吧。刚刚从学校毕业，放弃了一直学习的java，而想从事前端的工作。第一是觉得osgi这类的java框架实在太过笨重和繁琐，也许是真的好用，但也觉得真心不适合我。然后么，也许有点俗，前端真的能做很多华丽花哨的东西出来。到现在也工作一个月了，工资不高，老板不好，但社会毕竟不会总让人满意，没人有手把手教...
9种CSS3 blend模式制作的鼠标滑过图片标题特效【图】
这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效。该图片标题特效在鼠标滑过一张图片的时候，图片的标题会对应的动画，而且图片会使用css blend模式渲染为很酷的效果。IE浏览器不支持CSS background-blend-mode属性，所以在IE浏览器中看不到图片的混合效果，仅仅能看到图片标题的动画效果。效果演示：http://www.htmleaf.com/Demo/201506051977.html下载地址：http://www.htmleaf.com/css3/css3donghua/2015060...
css3响应式布局
css3的新特性响应式布局，通过@media screen and (min-width: ) and (max-width: ) {}；来实现页面的响应式设计，来适应不同的终端。需在头部添加：<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">。1.适应手机端： 例如： @media screen and (max-width:414px ) {调整CSS的样式}；适应iPhone 6 Plus的手机尺寸，想要适应其他手机屏幕需要调(max-width:)与(min-w...
8.1.2 CSS3选择器 —— 结构性伪类
1.1 E:nth-child(n)：表示E父元素的第n个子节点 p:nth-child(odd){ background: red } /* 匹配奇数行 */ p:nth-child(even){ background: red } /* 匹配偶数行 */ p:nth-child(2n){ background: red } /* 自定义行数 */1.2 E:nth-last-child(n)：表示E父元素的第n个子节点，从后向前计算2.1 E:nth-of-type(n)：表示E父元素中的第n个子节点，且类型为E2.2 E:nth-last-of-type(n)：表示E父元素中的第n个子节点，...
CSS3中的skew（）属性【代码】【图】
刚开始接触CSS3的2D变换属性，就被这个skew（）搞的一头雾水，不知道具体是怎么变化的！研究了一会才发现，CSS3的斜切坐标系和数学中的坐标系完全不一样（设置斜切原点为左上角）<style> div{width: 200px;height: 200px;transition:all 2s;margin: 150px auto;} .div1{background-color: #f00;} .div2{background-color: #0f0;}</style><body><div class="div1"></div><div class="div2"></div></body>下面我们设置鼠标经过时的sk...
css3 实现可以中英切换的导航条【代码】【图】
html<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>导航栏</title><link rel="stylesheet" href="css/test.css" /></head><body><div class="nav"><ul class="list"><li><a href="#"><b>Home</b><i>首页</i></a></li><li><a href="#"><b>Study</b><i>学习</i></a></li><li><a href="#"><b>Coursr</b><i>课程</i></a></li><li><a href="#"><b>Bbs</b><i>论坛</i></a></li><li><a href="#"><b>About</b><i>关于</i></...