CSS3
2019-03-01 10:12:21来源:博客园 阅读 ()
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Sticky notes using CSS3 and Google Fonts (Step 5)</title> <link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css"> <style type="text/css"> *{ margin:0; padding:0; } body{ font-family:arial,sans-serif; font-size:100%; margin:3em; 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(5deg); position:relative; top:-10px; } ul li a:hover,ul li a:focus{ box-shadow:10px 10px 7px rgba(0,0,0,.7); -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7); -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7); -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); position:relative; z-index:5; } ol{text-align:center;} ol li{display:inline;padding-right:1em;} ol li a{color:#fff;} </style> </head> <body> <ol> <li><a href="step1.html">Step #1</a></li> <li><a href="step2.html">Step #2</a></li> <li><a href="step3.html">Step #3</a></li> <li><a href="step4.html">Step #4</a></li> <li><strong>Step #5</strong></li> <li><a href="#"></a></li> </ol> <ul> <li> <a href="#"> <h2>六福齐来 #1</h2> <p>good health #1</p> </a> </li> <li> <a href="#"> <h2>Nice #2</h2> <p>Nice to see you. #2</p> </a> </li> <li> <a href="#"> <h2>Bye #3</h2> <p>See you late #3</p> </a> </li> <li> <a href="#"> <h2>Geovin Du #4</h2> <p>Text Content #4</p> </a> </li> <li> <a href="#"> <h2>涂 #5</h2> <p>涂聚文 #5</p> </a> </li> <li> <a href="#"> <h2>Geovin #6</h2> <p>How are you? #6</p> </a> </li> <li> <a href="#"> <h2>深圳 #2</h2> <p>天下为公 #2</p> </a> </li> <li> <a href="#"> <h2>爱 #7</h2> <p>家和万事兴 #7</p> </a> </li> <li> <a href="#"> <h2>Geovin #8</h2> <p>Geovin Du #8</p> </a> </li> </ul> </body> </html>
原文链接:https://www.cnblogs.com/geovindu/p/10451258.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:flex 增长与收缩
- ie8下透明度处理 2020-06-11
- CSS3 2020-06-05
- css:css3(圆角边框、盒子阴影、文字阴影) 2020-06-05
- 2.CSS3选择器 2020-05-17
- 1.CSS3简介 2020-05-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash