纯css实现一个自适应便签墙效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现一个自适应便签墙效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css"> <style> *{ margin:0; padding:0; } body{ font-family:arial,sans-serif; font-size:100%; margin:1em; background:#666; color:#fff; } h2,p{ font-size:100%; font-weight:normal; } ul,li{ list-style:none; } ul{ overflow:hidden; padding:3em; } ul li a{ text-decoration:none; color:#000; background:#ffc; display:block; height:10em; width:10em; padding:1em; -moz-box-shadow:5px 5px 7px rgba(33,33,33,1); -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); box-shadow: 5px 5px 7px rgba(33,33,33,.7); -moz-transition:-moz-transform .15s linear; -o-transition:-o-transform .15s linear; -webkit-transition:-webkit-transform .15s linear; } ul li{ margin:1em; float:left; } ul li h2{ font-size:140%; font-weight:bold; padding-bottom:10px; } ul li p{ font-family:"Reenie Beanie",arial,sans-serif; font-size:180%; } ul li a{ -webkit-transform: rotate(-6deg); -o-transform: rotate(-6deg); -moz-transform:rotate(-6deg); } ul li:nth-child(even) a{ -o-transform:rotate(4deg); -webkit-transform:rotate(4deg); -moz-transform:rotate(4deg); position:relative; top:5px; background:#cfc; } ul li:nth-child(3n) a{ -o-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); -moz-transform:rotate(-3deg); position:relative; top:-5px; background:#ccf; } ul li:nth-child(5n) a{ -o-transform:rotate(5deg); -webkit-transform:rotate(5deg); -moz-transform:rotate.........完整代码请登录后点击上方下载按钮下载查看
网友评论0