-
使用css3中calc()进行自适应布局
calc()能做什么？calc()可以通过计算得到元素的宽度或者高度，让我们很容易进行自适应布局。你可以为一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度，比如说“calc(50% + 2em)”，这样一来你就不用考虑元素div的宽度值到底是多少，而把这个任务交由浏览器去计算...
-
js如何衔接css3的多个@keyframes动画？
css3特效动画，我们在编写页面中经常遇到，而且是在同一个div模块上有多个衔接的不同动画，css中，我们经常使用animation-delay （规定在动画开始之前的延迟）进行处理。那么，下面分享一个自己用的比较多的一个js动画衔接小方法： 1、先定义两个animation @keyfram...
-
css3中的位置移动
translate定义2D转换中的移动，沿着x和y轴移动元素translate最大的优点事不会影响到其他元素的位置translate中的百分比单位是对于自身元素的translate（50%，50%）translate对行内标签没有效果注意：1同时使用多个转移，其格式为：transform trans...
-
css3 动画demo
1）http://www.yyyweb.com/demo/css-cokecan/inner.html2）页面切换效果demohttp://www.yyyweb.com/demo/page-transitions/3）各种loading图标动画http://www.yyyweb.com/demo/s
-
11种超酷CSS3复选框样式美化成效
c_a_3();11种超酷CSS3复选框样式美化效果这是一款效果非常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框的样式十分不好看，该效果将复选框加一美化，带上了一些动画效果，其中一些制作为滑动按钮的样式。这些效果都可是通过相邻兄弟选择器来选择与checkb...
-
html5 figcaption和css3制作8种惊艳的图片标题hover效果
一款利用html5的figcaption标签和css3 3d transform，css3 transition等技术制作的图片标题hover效果，共有8种不同的惊艳效果。下载演示地址...
-
html5与css3学习实践-网页的最简构造
c_a_3();html5与css3学习实践--网页的最简结构 一个网页的基础结构 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <titile&g...
-
css3 box-shadow属性 鼠标移动添加阴影效果
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。基本语法：{box-shadow:[inset] x-offset y-offset blur-radius spread-radius color}对象选择器：{box-shadow:[投影方式] ...
-
【CSS3】颜色表示方式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <!-- <link...
-
【CSS3】选择器
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="st...
-
【CSS3】浏览器内核、私有前缀
浏览器内核私有前缀浏览器webkit-webkit-chrome、safari、安卓、iostrident-ms-IEgecko-moz-firefoxpresto-o-opera 1 h1{ 2 text-stroke:1px red;/*保证此属性纳入标准后能正常使用*/ 3 t...
-
【CSS3】盒模型
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="styles...
-
【CSS3】内联、内部、外部样式，样式优先级、层叠、继承
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="styles...
-
【CSS3】字体font
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="styles...
-
【CSS3】文本属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="styles...
-
CSS3盒模型display:-webkit-box;的使用
box-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(...
-
CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置
在一个文档中，每个元素都被表示为一个矩形的盒子。盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']。我们要设置某个元素的大小定位，肯定会和这四个元素打交道。只是元素的宽高计算有些默认值。box-sizing属性用于更...
-
CSS3过渡 transition
CSS3过渡添加某种效果可以从一种样式转变到另一个的样式。transition: width 2s, height 2s;指定要添加效果的CSS属性指定效果的持续时间过渡属性transition 简写属性，用于在一个属性中设置四个过渡属性transition-property 规定应用过渡的 C...
-
css3 渐变
CSS3渐变 可以让你在两个或多个指定的颜色之间显示平稳的过渡线性渐变（linear-gradient）- 向下/向上/向左/向右/对角方向默认从上向下 background-image: linear-gradient(#e66465, #9198e5) 可多颜色从左向右 b...
-
css3 阴影、图片边框、边框大小
css3颜色十六进制颜色#ffffff 十六进制0-f 两位一色，分别为红、绿、蓝RGB颜色rgb(红，绿，蓝) 0-255RGBA颜色rgba(红，绿，蓝, alpha) alpha为透明度，取值0-1hls颜色hsl(h,s,l) 色相饱和度设置颜色 h:色调(0-360)0表示...
您的位置:首页 > 标签 “CSS3” 相关文章