html5 子标题栏,HTML5 建构主义标题栏页面模板
CSS
語言：
CSSSCSS
確定
/*
@mixin tilt($rotate, $v, $h) {
-webkit-transform: rotate($rotate) tranlate($v, $h);
-ms-transform: rotate($rotate) tranlate($v, $h);
transform: rotate($rotate) tranlate($v, $h);
}*/
body {
color: #20201f;
background: #fffbeb;
}
h1,
h2,
h3,
h4 {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
line-height: 1.2em;
margin: 0;
}
h1 {
font-size: 8em;
font-weight: 700;
}
h2 {
font-size: 4em;
font-weight: 700;
}
h3 {
font-size: 2em;
font-weight: 400;
letter-spacing: 2px;
}
h4 {
font-size: 1.4em;
font-weight: 700;
letter-spacing: 1px;
}
.red {
color: #cf3b28;
}
.border-top {
border-top: 20px solid #cf3b28;
display: inline-block;
padding-top: 10px;
}
.border-left {
border-left: 20px solid #cf3b28;
padding-left: 20px;
display: inline-block;
}
.border-bottom {
border-bottom: 20px solid #cf3b28;
padding-bottom: 10px;
display: inline-block;
}
.border-right {
border-right: 20px solid #cf3b28;
padding-right: 20px;
display: inline-block;
}
.center {
top: 50%;
left: 50%;
position: fixed;
-webkit-transform: translate(-50%, -15%);
-ms-transform: translate(-50%, -15%);
transform: translate(-50%, -15%);
}
.group1 {
-webkit-transform: rotate(-45deg) translate(0, -50%);
-ms-transform: rotate(-45deg) translate(0, -50%);
transform: rotate(-45deg) translate(0, -50%);
}
.group2 {
-webkit-transform: rotate(45deg) translate(34%, -80%);
-ms-transform: rotate(45deg) translate(34%, -80%);
transform: rotate(45deg) translate(34%, -80%);
}
.group3 {
-webkit-transform: rotate(-45deg) translate(100%, -225%);
-ms-transform: rotate(-45deg) translate(100%, -225%);
transform: rotate(-45deg) translate(100%, -225%);
}
.group4 {
-webkit-transform: rotate(45deg) translate(-60%, -45%);
-ms-transform: rotate(45deg) translate(-60%, -45%);
transform: rotate(45deg) translate(-60%, -45%);
}
總結(jié)
以上是生活随笔為你收集整理的html5 子标题栏,HTML5 建构主义标题栏页面模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： h.264 html播放,浏览器 – 我
- 下一篇： HTML单元格怎么加单元格,如何根据其值