-
position 给元素定位 position:absilute绝对定位 position:relative相对定位查看全部
-
box-shadow 给元素边框添加阴影查看全部
-
照片墙的制作步骤查看全部
-
不错，点赞查看全部
-
挺简单的查看全部
-
ok?查看全部
-
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"/>查看全部
-
-webkit-是Chrome和Safar浏览器的前缀； -moz-是Firefox浏览器的前缀；查看全部
-
transform:rotate(20deg) scale(1.5) translate(-100px,-10px); transition:设置元素由样式1转变为样式2的过程查看全部
-
各种属性查看全部
举报
0/150
提交
取消