CSS3绚丽照片墙_学习笔记

首页免费课 CSS3绚丽照片墙笔记

CSS3绚丽照片墙

最热最新

半边天堂 00:55

z-index：元素上下层显示顺序

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-11-20
半边天堂 00:51

position：元素位置定位。主要使用绝对定位

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-11-20
半边天堂 00:21

box-shadow 阴影制作

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-11-20
Y_rocky 03:19

使用padding和背景色进行边框的添加

查看全部

0 采集收起来源：CSS3照片墙动画实现
2015-11-11
縌麟

transform:rotate(30deg); 顺时针旋转30° transform:scale(1.2); 放大1.2倍 transition:1s; 动画从样式1到样式2的时间 box-shadow: 10px 11px 12px 13px #ccc; 盒子阴影 -webkit- 谷歌内核 -moz- 火狐内核 .container{width:960px;height:450px;margin:60px suto; position:relative;} img{padding:10px 10px 15px; background-color:#fff; border:1px solid #ddd;position:absolute; top:50px;left:200px;transform:rotate(20deg);-webkit-transform:rotate(20deg); -moz-transform:rotate(20deg) ;transition:1s ; -webkit-transition:1s ; -moz-transition:1s ; cursor:pointer;z-index:1; } img:hover{transform:rotate(0deg);-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg) ; transform:scale(1.2);-webkit-transform:scale(1.2);-moz-transform:scale(1.2); box-shadow:2px 2px 2px #ccc;-webkit-box-shadow:2px 2px 2px #ccc;-moz-box-shadow:2px 2px 2px #ccc;z-index:100; }

查看全部

0 采集收起来源：CSS3照片墙动画实现
2015-11-05
召唤师

transform:rotate(30deg); 顺时针旋转30° transform:scale(1.2); 放大1.2倍 transition:1s; 动画从样式1到样式2的时间 box-shadow: 10px 11px 12px 13px #ccc; 盒子阴影 -webkit- 谷歌内核 -moz- 火狐内核

查看全部

0 采集收起来源：CSS3照片墙动画实现
2015-10-24
小红红乖乖

box-shadow 给元素的边框添加阴影的效果 position 给元素定位，主要用到绝对定位 z-index 设置元素的上下层显示顺序 transform 使元素变形的属性 transition设置元素由样式1转变为样式2的过程

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-10-16
小红红乖乖

制作步骤：每张照片的位置不一样每张照片有一定的旋转角度照片阴影及缓慢旋转、缓慢放大的特效制作

查看全部

0 采集收起来源：CSS3照片墙步骤分解
2015-10-16
D__C 02:18

CSS3中的transform： transform.rotate(旋转角度); transform.scale(缩放倍数); transform.skew(扭曲元素);

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-09-16
indd

-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;

查看全部

0 采集收起来源：编程练习
2015-09-12
123_何以

<!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{ -webkit-transform:rotate(720deg) scale(1.2); -moz-transform:rotate(720deg) scale(1.2); transform:rotate(720deg) scale(1.2); -webkit-transition:ease-in; -moz-transition:ease-in; transition:ease-in; background:red; } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">您好</div> </body> </html>

查看全部

0 采集收起来源：编程练习
2018-03-22
Agony2015

CSS3旋转特效 <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:1s; -moz-transition:1s; transition:1s; } .mainDiv:hover{ background:red; color:black; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); } </style>

查看全部

0 采集收起来源：编程练习
2018-03-22
Agony2015 01:10

制作步骤

查看全部

0 采集收起来源：CSS3照片墙步骤分解
2015-09-08
kzzk 00:39

关键技术点

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-09-08
kzzk 00:21

关键技术点

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-09-08