-
css3绚丽照片墙 1旋转 2缩放 3阴影 4动画查看全部
-
transform:rotate(30deg); 顺时针旋转30° transform:scale(1.2); 放大1.2倍 transition:1s; 动画从样式1到样式2的时间 box-shadow: 10px 11px 12px 13px #ccc; 盒子阴影 -webkit- 谷歌内核 -moz- 火狐内核查看全部
-
关键技术点： 1、box-shadow:阴影 功能：给元素的边框添加阴影的效果 语法：box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径][阴影扩展半径][阴影颜色][投影方式] 2、position:给元素定位 功能：给元素定位，主要用到绝对定位 用法：position:absolute与posistion:relative 配合使用实现相对于包含元素(参照元素)定位 3、z-index:设置元素上下层显示顺序 功能：设置元素的上下层显示顺序 语法：Z-index：整数 注意：拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 4、transform:元素变形。rotate(旋转角度)scale(缩放倍数)skew(扭曲元素) 功能：是元素变形的属性，其【配合rotate(旋转角度),scale（缩放倍数）,skew(扭曲元素)等参数一起 使用 语法：transform:rotate(旋转角度) transform:scale(缩放倍数) 5、transition设置元素由样式1转变成样式2的过程所需时间。 语法：transition:durantion 注意：这只是transition其中的一种用法查看全部
-
transform:scale(缩放倍数)查看全部
-
box-shadow查看全部
-
.mainDiv:hover{ background:#fff; font-color:#000; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); -webkit-transition:1s; -moz-transition:1s; transition:1s; }查看全部
-
照片墙基本制作步骤查看全部
-
文字一开始设备和背景色一样，鼠标移动到 div 才将文字颜色改变能达到文字由隐藏到显示的效果。rotate 和 scale 属性可以在 transform 一次性同时设置的,要是分开写的话，后面的会把前面的属性覆盖的查看全部
-
要点小结：<br> 1.照片墙的样式仅初始位置和初始角度不同，处理方式是给每个img一个class类名，单独设置不同样式，相同样式写在img和img:hover（鼠标移上去的效果）里<br><br> 2.样式宜采用外部链接方式<link rel="stylesheet" href="css/base.css(当css文件夹与html处于同一层级时这样写)" /><br><br> 3.rotate（Xdeg），顺时针X为+，逆时针X为-<br><br> 4.transform和transtion都需要注意浏览器兼容性：-webkit-、-moz-<br><br> 5.transtion不止控制鼠标移上去这一个动画，而是控制所有动画的，所以transtion要加在要变化的元素的基本样式上 6.z-index属性设置照片上下层叠放，其中img:hover里的z-index值要比img中大<br><br> 7.box-shadow阴影效果放在img:hover中<br><br> 8.给img添加一个盒子将其设置为相对定位，img设置为绝对定位查看全部
-
关键技术点： 1、box-shadow:阴影 功能：给元素的边框添加阴影的效果 语法：box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径][阴影扩展半径][阴影颜色][投影方式] 2、position:给元素定位 功能：给元素定位，主要用到绝对定位 用法：position:absolute与posistion:relative 配合使用实现相对于包含元素(参照元素)定位 3、z-index:设置元素上下层显示顺序 功能：设置元素的上下层显示顺序 语法：Z-index：整数 注意：拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 4、transform:元素变形。rotate(旋转角度)scale(缩放倍数)skew(扭曲元素) 功能：是元素变形的属性，其【配合rotate(旋转角度),scale（缩放倍数）,skew(扭曲元素)等参数一起 使用 语法：transform:rotate(旋转角度) transform:scale(缩放倍数) 5、transition设置元素由样式1转变成样式2的过程所需时间。 语法：transition:durantion 注意：这只是transition其中的一种用法查看全部
-
步骤分解： 每张照片的位置不一样 每张照片有一定的旋转角度 照片阴影及缓慢旋转、缓慢放大的特效制作查看全部
-
transform:rotate(30deg); 顺时针旋转30° transform:scale(1.2); 放大1.2倍 transition:1s; 动画从样式1到样式2的时间 box-shadow: 10px 11px 12px 13px #ccc; 盒子阴影 -webkit- 谷歌内核 -moz- 火狐内核查看全部
-
变化过程查看全部
-
这个是重点查看全部
-
box-shadow查看全部
举报
0/150
提交
取消