-
box-shadow 边框添加阴影效果 position 给元素定位 z-index 设置元素上下层显示 transform 是元素变形的属性，配合rotate旋转/scale改变大小 transition设置样式转变所需时间查看全部
-
box-shadow 边框添加阴影效果 position 给元素定位 z-index 设置元素上下层显示 transform 是元素变形的属性，配合rotate旋转/scale改变大小 transition设置样式转变所需时间查看全部
-
border-radius:50px; transform:rotate(720deg) scale(2); 圆角，动画查看全部
-
使用transform要考虑到浏览器兼容性. -webkit- 是Chrome和Safari浏览器的前缀; -moz- 是Firefox浏览器的前缀。 -webkit-transform: -moz-transform:查看全部
-
box-shadow 边框添加阴影效果 position 给元素定位 z-index 设置元素上下层显示 transform 是元素变形的属性，配合rotate旋转/scale改变大小 transition设置样式转变所需时间查看全部
-
box-shadow 边框添加阴影效果 position 给元素定位 z-index 设置元素上下层显示 transform 是元素变形的属性，配合rotate旋转/scale改变大小 transition设置样式转变所需时间查看全部
-
文字一开始设备和背景色一样，鼠标移动到 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其中的一种用法查看全部
-
步骤分解： 每张照片的位置不一样 每张照片有一定的旋转角度 照片阴影及缓慢旋转、缓慢放大的特效制作查看全部
-
box-shadow 边框添加阴影效果 position 给元素定位 z-index 设置元素上下层显示 transform 是元素变形的属性，配合rotate旋转/scale改变大小 -webkit-是Chrome和Safar浏览器的前缀； -moz-是Firefox浏览器的前缀； transition设置样式转变所需时间查看全部
-
/*****图片原始旋转角度*****/ img{ padding:10px 10px 15px; background:#FFF; border:1px solid #ddd; position:absolute; top:50px; left:200px; transform:rotate(20deg); transition:all ease 1s; } /*****指向图片变化：旋转、放大、阴影*****/ img:hover{ -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); transform:scale(1.2); box-shadow:10px 10px 15px #CCC; }查看全部
-
太给力了 ，看完此照片墙简短的课程，感觉好爽！！！爽爽爽爽爽！！！！查看全部
-
看了照片墙的制作课程，真是受益匪浅，前几天刚刚做过一个照片墙，但是对原理理解的不太清楚，今天无意间发现本课程，彻底的知道了用的是什么技术，主要的实现方法，慕课网真的太给力了。知道了body要给一背景色；实现照片墙的效果要用到transform的rotate方法，position要用到绝对位置absolute；还要注意浏览器的兼容性。查看全部
-
transform：功能：使元素变形的属性，配合rotate(旋转)、scale(缩放倍数)、skew（扭曲元素）等使用. box-shadow:给元素的边框添加阴影效果 positon:给元素定位，主要用到绝对定位 z-index:设置元素的上下层显示 transition:设置元素由样式1转为2的过程所需的时间 ------------------------------------------------------- 为了浏览器兼容：-webkit-transform -moz-transform transform <style> body{background-color:#eee}//设置背景色 h1{text-align:center}//标题居中 .continer{whdth:900px; height:450px; margin:60px auto}//居中设置宽高为后续绝对定位 img{ padding:10px上 10px右 15px下; //填充：顺时针 background:#fff;背景色 border:1px solid #ddd; //边框 position:absolute;//绝对定位 transform:rotate(20deg)倾斜20°//样式一倾斜角度 transition:2s;//样式1-->>样式2显示时间 z-index:1; } img:hover{ transform:rotate(0deg)//旋转角度为0; transform:scale(2)//鼠标移动上后图片缩放为原来的2倍 box-shadow:10px 10px 15px #//阴影:（左正右负)（上负下正）(阴影距离) (阴影色) z-index:2; } .pic1{ left:400px; top:0px; transform:roate(20deg); } </style> <img class=".pic1" src="1.jpg"/>查看全部
举报
0/150
提交
取消