.postDesc { background: url(images/posted_time.png) no-repeat 0 1px; color: #757575; float: left; width: 100%; clear: both; text-align: left; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 13px; padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/ margin-top: 20px; line-height: 1.8; padding-bottom: 35px; } #cnblogs_post_body h4{ background: #2B6600; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; font-size: 16px; font-weight: bold; height: 24px; line-height: 23px; margin: 12px 0 !important; padding: 5px 0 5px 10px; text-shadow: 2px 2px 3px #222222; } #back-to-top { background-color:wheat; bottom: 0; box-shadow: 0 0 6px ; color: #444444; padding: 2px 2px; position: fixed; right: 20px; cursor: pointer; } #home { opacity: 0.80; margin: 0 auto; width: 65%; min-width: 950px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } body { color: #000; background: url(https://5b0988e595225.cdn.sohucs.com/images/20180523/b38f8132e4dc41d5aacdd8646e75be2e.jpeg) fixed; background-size: 1300px; background-repeat: no-repeat; font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; background-repeat:repeat; background-attachment： background-position： background-position: 50% 50%; background-repeat:no-repeat; } } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; font-variant: small-caps; font-style: italic; line-height: 110%; } .div1{ width: 100px; height: 100px; border: 1px solid; position: relative; background-color: #fff; transition: width 2s; /*划过时的颜色推送的时间*/ overflow: hidden; /*隐藏多余的：before，让它只占满div1*/ z-index: 2; } .div1:before{ content: ''; position: absolute; left: -240px; top: 0px; width: 100px; height: 100px; background: #629feb; z-index: 1; transition: width 2s; transform: skew(30deg, 0); /*让它是斜着划过去，好看一些* }