纯CSS实现的响应式正方形

Pure CSS Responsive Square

css3, square

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2272
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* ==============================
	$---Contents
	$-Variables
	$-Mixins
	$-Resets
	$-Modules
	$-Styles
============================== */
/* ==============================
	$-Variables
============================== */
/* ==============================
	$-Mixins
============================== */
/* ==============================
	$-Resets
============================== */

html,
body {
    height: 100%;
    font-size: 20px;
}
html {
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: border-box;
}
body {
    margin: 0;
    line-height: 1.5;
    background-color: #333;
    font-family: Georgia, Times, "Times New Roman", serif;
    color: #333;
}
/* main ie fix */

main {
    display: block;
}
/* headers */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 1em;
    margin-bottom: .25em;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight: 700;
}
/* highlight colors */

::-moz-selection {
    background-color: #333;
    color: white;
}
::selection {
    background-color: #333;
    color: white;
}
/* anchor links */

a {
    color: black;
}
a:hover,
a:active {
    text-decoration: none;
}
a:visited {
    color: rebeccapurple;
}
/* form elements */

select,
textarea,
input {
    max-width: 100%;
    padding: 0;
    margin: 0;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 1em;
    color: #333;
}
input[type=submit],
input[type=button] {
    cursor: pointer;
}
/* img */

img {
    max-width: 100%;
    height: auto;
    border: none;
    vertical-align: middle;
    font-style: italic;
}
/* ==============================
	$-Modules
============================== */
/* fluid grid */

.grid-12 {
    width: 100%;
}
.grid-11 {
    width: 91.53%;
}
.grid-10 {
    width: 83.06%;
}
.grid-9 {
    width: 74.6%;
}
.grid-8 {
    width: 66.13%;
}
.grid-7 {
    width: 57.66%;
}
.grid-6 {
    width: 49.2%;
}
.grid-5 {
    width: 40.73%;
}
.grid-4 {
    width: 32.26%;
}
.grid-3 {
    width: 23.8%;
}
.grid-2 {
    width: 15.33%;
}
.grid-1 {
    width: 6.866%;
}
/* ==============================
	$-Styles
============================== */

.position {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.square {
    height: 0;
    padding-bottom: 100%;
    position: relative;
    background: coral;
    text-align: center;
    overflow: hidden;
}
.square-inn {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    padding: .75em;
}

HTML

Pure CSS Responsive Square

css3, square

编辑器支持Emmet

快捷键

Pure CSS Responsive Square

css3, square

纯CSS3实现带缩略图的响应式垂直幻灯片

15个纯CSS实现的响应式土豪金星球类应用动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：