Twelve_Y的博客

【代码】CSS(四) -- 动效实现(立体盒子旋转-四方体+正六边)

3D转换 3D特点：近大远小 物体后面遮挡看不见 3D位移 translate3d(x,y,z) 3D旋转 rotate3d(x,y,z) 透视 perspective 3D呈现 transform-style 1.三维坐标系： 三维坐标系：就是指立体空间，立体空间由3个轴共同组成 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：垂直向下 注意： y下面是正值，上面是负值 ...

动画（animation） 1.什么是动画 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。 2.动画的使用 1、先定义动画 2、在调用定义好的动画 2.1 语法格式（定义动画） 1.定义动画 @keyframes 动画名称 { 0% { //开始状态 width: 100px...

1. 2D转换 二维坐标系（改变标签在二维平面上的位置和形状的一种技术） 转换（transform） 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。 移动 ：translate 旋转 ：rotate 缩放： scale 移动盒子的位置：①定位 ②盒子的外边距 ③2d转换移动 2.移动 2.1 语法 transform：translate(x,y); x就是x轴...

CSS3 属性选择器、结构伪类选择器、伪元素选择器、2D转换、动画、3D装换、浏览器私有转换 CSS3是在CSS2上进行扩展 1. 属性选择器 属性选择器权重是10，类选择器、伪类选择器(属性选择器：权重高于标签选择器) disabled = “disabled” //禁用 比如：button[disabled] { } 元素[属性] { } 选择符: E[att] ...

CSS3： 1.背景透明： 语法：background: rgba(0, 0, 0, 0.3); 最后一个参数是alpha 透明度 取值范围 0~1之间 我们习惯把0.3 的 0 省略掉 这样写 background: rgba(0, 0, 0, .3); 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不受影响 因为是CSS3 ，所以 低于 ie9 的版本是不支持的。 2.圆角...