CSS3绚丽照片墙_学习笔记

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

CSS3绚丽照片墙

最热最新

mmy大脸猫

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

查看全部

0 采集收起来源：编程练习
2018-03-22
mk0529m 02:58

transition

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-06-30
mk0529m

transition

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-06-30
mk0529m 01:22

transform

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-06-30
mk0529m 00:49

css3新属性

查看全部

0 采集收起来源：CSS3照片墙效果演示
2015-06-30
霜花似雪

<!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:#000000; 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>

查看全部

0 采集收起来源：编程练习
2018-03-22
霜花似雪

关键技术点： 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其中的一种用法

查看全部

1 采集收起来源：CSS3照片墙技术点分析
2015-06-22
霜花似雪 00:42

特效实现步骤： 1.放位置各异的照片 2.每张照片给一定旋转角度 3.照片的动画效果(阴影，缓慢旋转，缓慢放大特效)

查看全部

0 采集收起来源：CSS3照片墙步骤分解
2015-06-22
霜花似雪 00:50

CSS3新特性运用：绚丽照片墙

查看全部

0 采集收起来源：CSS3照片墙效果演示
2015-06-22
smile_again

.mainDiv:hover{ background-color:red; color:black; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); transform:rotate(720deg) scale(2); }

查看全部

0 采集收起来源：编程练习
2015-06-15
qq_陈尔贵_0

<!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; -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{ width:130px; height:130px; background-color:#B9E1EE; color:red; font-weight:bold; border-radius:100px; line-height:130px; -webkit-transform:rotate(720deg) scale(2); -moz-transform:rotate(720deg) scale(2); } </style> <title>css3特效</title> </head> <body> <div class="mainDiv">I ❤ you</div> </body> </html>

查看全部

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

box-shadow(给元素的边框添加阴影) 语法: box-shadow: x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-06-13
成者并非一蹴而就

关键技术点： 1、box-shadow:阴影 2、position:给元素定位 3、z-index:设置元素上下层显示顺序 4、transform:元素变形。rotate(旋转角度)scale(缩放倍数)skew(扭曲元素) 5、transition设置元素由样式1转变成样式2的过程所需时间。transition:durantion

查看全部

0 采集收起来源：CSS3照片墙技术点分析
2015-06-02
叶小白

旋转特效

查看全部

0 采集收起来源：编程练习
2015-06-01
冰凉的小手123

transition transform

查看全部

0 采集收起来源：编程练习
2015-05-21