纯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: 3em; background: darkslategray; color: #fff; } h1 { text-align: center; font-weight: bold; font-size: 300%; font-family: "Reenie Beanie", calibri; color: ivory; } 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; width: 10em; height: 10em; padding: 1em; /*give the notes a shadow*/ -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7); -moz-box-shadow: 5px 5px 7px rgba(33,33,33,.7); -o-box-shadow: 5px 5px 7px rgba(33,33,33,.7); /*give the tilt effect to your sticky notes*/ -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -o-transform: rotate(-6deg); /*apply some smooth transition to the sticky note*/ -webkit-transition: -webkit-transform .15s linear; -moz-transition: -moz-transform .15s linear; -o-transition: -o-transform .15s linear; } ul li:nth-child(even) a { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); position: relative; top: 5px; background: mistyrose; } ul li:nth-child(3n) a { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); position: relative; top: -5px; background: skyblue; } ul li:nth-child(5n) a { -webkit-transform: rotate(5deg); -moz-transform.........完整代码请登录后点击上方下载按钮下载查看
网友评论0