-
关键技术点： （1）box-shadow 功能：给元素的边框添加阴影的效果 语法：box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] （2）position 功能：给元素定位，主要用到绝对定位 用法：position：absolute 与 position：relative 配合使用实现相对于包含元素(参照元素)定位 （3）z-index 功能：设置元素的上下层显示顺序 语法：z-index：整数 注意：拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 （4）transform 功能：使元素变形的属性，其配合rotate(旋转角度)、scale(缩放倍数)、skew(扭曲元素)等参数一起使用 语法：transform：rotate(旋转角度) transform：scale(缩放倍数) （5）transition 功能：设置元素由样式1转变为样式2的过程所需时间 语法：transition：duration 注意：这只是transition其中的一种用法，还有其它复杂的用法请查看本网站的《十天学会CSS3》课程查看全部
-
照片墙的制作步骤： （1）每张照片的位置是不一样的 （2）每张照片有一定的旋转角度 （3）照片阴影及缓慢旋转、缓慢放大特效制作查看全部
-
使用css3实现：旋转、缩放、阴影、动画。查看全部
-
好的啊查看全部
-
赞赞赞赞赞赞赞赞查看全部
-
代码 位置 旋转 浏览器兼容查看全部
-
box-shadow 阴影 position 位置 transform旋转 z-index 层次 transition改变过程时间查看全部
-
编程练习查看全部
-
transition查看全部
-
关键技术点查看全部
-
z-index查看全部
-
1.box-shadox 功能：给元素的边框添加阴影效果 box-shadow:X轴偏移量 Y轴偏移量[阴影模糊半径][阴影扩展半径][阴影颜色][投影方式]给元素的边框添加阴影效果 2.查看全部
-
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .mainDiv{ width:100px; height:50px; margin:50px auto; text-align: center; line-height: 50px; font-weight: bold; color:#ddd; background:#000; border:1px solid #ddd; -webkit-transform:rotate(0deg) scale(1); -moz-transform:rotate(0deg) scale(1); transform:rotate(0deg) scale(1); -webkit-transition:2s; -moz-transition:2s; transition:2s; } .mainDiv:hover{ -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); background:red; color:black; } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">您好</div> </body> </html> //文字旋转特效查看全部
-
注意兼容写法 transform:rotate(720deg) scale(2); 旋转角度为720deg和放大倍数为2。 -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transition:1s;动画时间为1s -webkit-transition:1s; -moz-transition:1s;查看全部
-
transform: rotate旋转角度 scale缩放倍数 skew扭曲元素 语法 transform:rotate旋转角度 transform:scale缩放倍数查看全部
举报
0/150
提交
取消