-
box-shadow 功能：给元素边框增加阴影效果 阴影的模糊半径、扩展半径、颜色 投影方式 2、position:给元素定位 3.z-index：设置元素上下层显示顺序 4.transform:元素变形，rotate（旋转角度）参数正负代表顺逆时针方向，scale（缩放倍数），skew（扭曲元素） 放在一起使用 例如：transform:rotate(旋转角度） transform:scale(缩放倍数) 5.transition 动画变化的快慢设置 便是元素从样式一道样式二的时间 语法：transition: duration查看全部
-
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .mainDiv{ width:100px; height:100px; margin:100px auto; text-align: center; line-height: 100px; font-weight: bold; color:#ddd; background:#ddd; 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{ color:#000; background:red; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">您好</div> </body> </html>查看全部
-
关键技术点： 1、box-shadow:阴影 2、position:给元素定位 3、z-index:设置元素上下层显示顺序 4、transform:元素变形。rotate(旋转角度)scale(缩放倍数)skew(扭曲元素) 5、transition设置元素由样式1转变成样式2的过程所需时间。transition:durantion查看全部
-
重点知识预览 box-shadow查看全部
-
浏览器兼容-webkit- chrome和safari -moz- firefox查看全部
-
样式1到2查看全部
-
旋转角度查看全部
-
上下层查看全部
-
上下层查看全部
-
1. box-shadow：给元素的边框添加阴影的效果 2. position：给元素定位，主要用到绝对定位 3. z-index:设置元素的上下层显示 4. transition：设置元素由样式1转变为样式2的过程所需时间 border-radius 该属性允许您为元素添加圆角边框！ 5. transform：使元素变形的属性，其配合rotate(旋转角度)、scale(改变大小)、skew(扭曲元素)等参数一起使用 6.使用绝对定位position:absolute将照片放在不同的位置查看全部
-
关键技术点： 1、box-shadow:阴影 2、position:给元素定位 3、z-index:设置元素上下层显示顺序 4、transform:元素变形。rotate(旋转角度)scale(缩放倍数)skew(扭曲元素) 5、transition设置元素由样式1转变成样式2的过程所需时间。transition:durantion查看全部
-
@·特效实现步骤： 1.放位置各异的照片 2.每张照片给一定旋转角度 3.照片的动画效果(阴影，缓慢旋转，缓慢放大特效)查看全部
-
关键技术点： 1、box-shadow:阴影 2、position:给元素定位 3、z-index:设置元素上下层显示顺序 4、transform:元素变形。rotate(旋转角度)scale(缩放倍数)skew(扭曲元素) 5、transition设置元素由样式1转变成样式2的过程所需时间。transition:durantion查看全部
-
特效实现步骤： 1.放位置各异的照片 2.每张照片给一定旋转角度 3.照片的动画效果(阴影，缓慢旋转，缓慢放大特效)查看全部
-
transform:rotate(旋转度数-deg) scale（放大倍数） 兼容写法 -webkit- -moz查看全部
举报
0/150
提交
取消