纯css实现一个多色便签效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现一个多色便签效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } ::-moz-selection { background: #C6FF91; text-shadow: none; } ::selection { background: #C6FF91; text-shadow: none; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } body { margin: 0; padding: 0; } .wrapper { margin: 60px auto 0 auto; } /* Note styles */ .note-wrap { width: 235px; min-height: 235px; padding: 35px; margin: 0 22px 44px 22px; position: relative; font-size: 24px; vertical-align: top; display: inline-block; font-family: Englebert, Arial; color: #4b453c; background: #F7E999; line-height: 34px; text-align: center; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); } .note-wrap:before { display: block; content: ""; background: rgba(227, 200, 114, 0.4); width: 130px; height: 28px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-radius: 6px/18px 0; position: absolute; top: -13px; left: 50px; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); } .note-wrap a { color: #6b824f; text-decoration: none; font-size: 20px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; } .note-wrap a:hover { color: #D83A25; } .note-yellow .........完整代码请登录后点击上方下载按钮下载查看
网友评论0