主页
CSS-背景线性渐变
线性渐变必须添加浏览器私有前缀起始方向可以是:方位名词或者度数,如果省略默认是top语法background: linear-gradient(起始方向, 颜色1, 颜色2, ...); background: -webkit-linear-gradient(left, red, blue); background: -webkit-linear-gradient(left top, red, blue);
查看更多 1
CSS3-3D转换
三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的x轴:水平向右 注意:x右边是正值,左边是负值y轴:垂直向下 注意:y下边是正值,上边是负值z轴:垂直屏幕 注意:z往外面是正值,往里面是负值(近正远负)3D位移:translate3d(x, y, z)translform: translateX(100px),仅在X轴移动translform: translateY(100px),仅在Y轴移动translform: translateZ(100px),仅在Z轴移动translform: translate3d(x, y, z),其x,y,z分别指要移动的轴的方向距离3...
查看更多 0
CSS3-动画
动画(animation)可以通过设置多个节点来精确一个或一组动画,常用来实现复杂的动画效果相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果制作动画分为两步:先定义动画在使用(调用)动画1.定义动画使用@keyframes定义动画(类似定义类选择器)@keyframes 动画名称 { /* 开始状态 */ 0% { width: 100px; } /* 结束状态 */ 100% { width: 300px; } } 2.元素使用动画div { width: 100px; hei...
查看更多 0
CSS3-2D转换综合写法及总结
同时使用多个转换,其格式为:transform: 移动 旋转 缩放 ...等; transform: translate() rotate() scale() ...等;其顺序会影响转换的效果。(先旋转会改变坐标轴方向)当我们同时拥有位移和其他属性的时候,记得要将位移放到最前面总结转换transform 我们简单理解就是变形有2D和3D之分我们暂且学了三个分别是位移旋转和缩放2D移动translate(x, y)最大的优势是不影响其他盒子 ,里面参数用% ,是相对于自身宽度和高度来计算的可以分开写比如 translateX(x)和translateY(y)2D旋转rotate(度数)可以...
查看更多 0
CSS3-2D转换
转换(tarnsform) ,可以实现元素的位移、旋转、缩放等效果转换(transform)可以简单理解为变形 移动:translate 2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位语法transform: translate(x, y); /* 分开写 */ transform: translateX(x); transform: translateY(y); 重点 定义为2D转换中的移动,沿着X和Y轴移动元素 translate最大的优点:不会影响到其他元素的位置 translate中的百分比单位是相对自身元素的 translate(-50%, -50%)...
查看更多 0
CSS3新特性-过渡transition
过渡动画:是从一个状态渐渐过渡到另一个状态,经常和 :hover 一起搭配使用transition: 要过渡的属性 花费时间 运动曲线 何时开始; transition: width .5s ease 0.5s; /* 如果想要写多个属性,利用逗号进行分割 */ transition: width .5s ease 0.5s, height .5s ease 0.5s; /* 如果想要多个属性都变化,属性写all就可以了 */ transition: all .5s;1. 属性:想要变化的css属性,宽度高度、背景颜色、内外边距都可以,如果想要所有的属性都变化过渡,写一个all就可以 2...
查看更多 0
CSS3新特性-盒子模型
CSS3中box-sizing来指定盒模型,有2个值:content-box、border-box,这样我们计算盒子大小的方式就发生了变化可以分成两种情况:box-sizing: content-box; 盒子大小为width + padding + border的大小(以前默认的)box-sizing: border-box; 盒子大小为width如果盒子模型我们改为了box-sizing: border-box; ,那padding和border就不会撑大盒子了(前提是padding和border不会超过width宽度).box { box-sizing: border-bo...
查看更多 0
CSS3新特性-新增选择器
1. 属性选择器属性选择器可以根据元素特定属性来选择元素 选择符 简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[att^="val"] 选择具有att属性且值以val开头的E元素 E[att$="val"] 选择具有att属性且值以val结尾的E元素 E[att*="val"] 选择具有att属性且值中包含有val的E元素 注意:类选择器、属性选择器、伪类选择器,权重为 0 0 1 0 2. 结构伪类选择器结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元...
查看更多 0

qiaofugui

博主很懒,啥都没有
188 文章数
14 评论量
3 分类数
191 页面数
已在风雨中度过 2年133天1小时12分