纯CSS实现的VR头盔

pure css vr mask，适用于VR虚拟现实类网站图标设计。

css3, logo

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("http://codepen.io/ericthayer/pen/dOWMzJ.css");
@import url("https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Rubik+One|Shrikhand|Varela");
@import url("https://fonts.googleapis.com/css?family=Lobster|Merriweather|News+Cycle|Patua+One|Voltaire");
@import url("https://fonts.googleapis.com/css?family=Acme|Alfa+Slab+One|Anton|Archivo+Black|Arvo");
@import url("https://fonts.googleapis.com/css?family=Bevan|Bree+Serif|Hammersmith+One|Josefin+Sans|Kaushan+Script");
@import url("https://fonts.googleapis.com/css?family=Domine|Oswald|Alegreya+Sans|BenchNine|Crete+Round");
@import url("https://fonts.googleapis.com/css?family=Luckiest+Guy|Bitter|Montserrat|Raleway|Ranga");
@import url("https://fonts.googleapis.com/css?family=Fjalla+One|Fredoka+One|Quicksand|Sanchez|Yellowtail");
@import url("https://fonts.googleapis.com/css?family=Alice|Chewy|Reem+Kufi|Righteous|Rock+Salt");
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    overflow-y: scroll;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}
body {
    margin: 0;
    padding: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}
audio,
canvas,
progress,
video,
figure {
    line-height: 0;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden],
template {
    display: none;
}
a {
    background-color: transparent;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
a:active,
a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: none;
    /* 1 */
    
    text-decoration: underline;
    /* 2 */
    
    text-decoration: underline dotted;
    /* 2 */
}
b,
strong {
    font-weight: inherit;
    /* 1 */
}
b,
strong {
    font-weight: bolder;
    /* 2 */
}
dfn {
    font-style: italic;
}
h1 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0.67em;
    margin-left: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
}
mark {
    background: #ff0;
    color: #000;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
    max-width: 100%;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 0 auto 1em;
}
hr {
    box-sizing: content-box;
    /* 1 */
    
    height: 0;
    /* 1 */
    
    overflow: visible;
    /* 2 */
}
pre {
    overflow: auto;
}
/**
 * 1. Correct inheritance and scaling of font-size for preformatted text.
 * 2. Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    /* 1 */
    
    font-size: 1em;
    /* 2 */
}
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
button,
input {
    border: none;
    outline: 0;
}
input:focus {
    outline: -moz-focus-ring-color auto 5px;
    outline: -webkit-focus-ring-color auto 5px;
}
button {
    overflow: visible;
}
button,
select {
    text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled],
html input[disabled] {
    cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
/**
 * Restore focus style in Firefox 4+ (unset by a rule above)
 */

button:-moz-focusring,
input:-moz-focusring {
    outline: 1px dotted ButtonText;
}
input:not(button,
.btn) {
    line-height: normal;
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea {
    color: inherit;
    -webkit-box-shadow: none;
    -webkit-appearance: none !important;
}
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
input[type="text"],
input[type="search"] {
    -webkit-border-radius: 0;
    -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto;
}
optgroup {
    font-weight: bold;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td,
th {
    padding: 0;
}
address {
    font-style: normal;
    word-wrap: break-word;
}
dl,
ol,
ul {
    margin-top: 0;
    padding-left: 2em;
}
nav ul {
    list-style-type: none;
    padding-left: 0;
}
ol {
    list-style-type: decimal;
}
p {
    margin-top: 0;
}
.whitney-bold {
    font-family: "Whitney-Bold", "Helvetica Neue", Helvetica, sans-serif;
}
.whitney-semibold {
    font-family: "Whitney-SemiBold", "Helvetica Neue", Helvetica, sans-serif;
}
.whitney-medium {
    font-family: "Whitney-Medium", "Helvetica Neue", Helvetica, sans-serif;
}
.bungee {
    font-family: "Bungee", "Helvetica Neue", Helvetica, sans-serif;
}
.bungee-shade {
    font-family: "Bungee Shade", "Helvetica Neue", Helvetica, sans-serif;
}
.rubik-one {
    font-family: "Rubik One", "Helvetica Neue", Helvetica, sans-serif;
}
.shrikhand {
    font-family: "Shrikhand", "Helvetica Neue", Helvetica, sans-serif;
}
.varela {
    font-family: "Varela", "Helvetica Neue", Helvetica, sans-serif;
}
.lobster {
    font-family: "Lobster", "Helvetica Neue", Helvetica, sans-serif;
}
.merriweather {
    font-family: "Merriweather", "Cambria", Georgia, serif;
}
.news-cycle {
    font-family: "News Cycle", "Helvetica Neue", Helvetica, sans-serif;
}
.patua-one {
    font-family: "Patua One", "Helvetica Neue", Helvetica, sans-serif;
}
.voltaire {
    font-family: "Voltaire", "Helvetica Neue", Helvetica, sans-serif;
}
.acme {
    font-family: "Acme", "Helvetica Neue", Helvetica, sans-serif;
}
.alfa-slab-one {
    font-family: "Alfa Slab One", "Helvetica Neue", Helvetica, sans-serif;
}
.anton {
    font-family: "Anton", "Helvetica Neue", Helvetica, sans-serif;
}
.archivo-black {
    font-family: "Archivo Black", "Helvetica Neue", Helvetica, sans-serif;
}
.arvo {
    font-family: "Arvo", "Cambria", Georgia, serif;
}
.bevan {
    font-family: "Bevan", "Helvetica Neue", Helvetica, sans-serif;
}
.bree-serif {
    font-family: "Bree Serif", "Cambria", Georgia, serif;
}
.hammersmith-one {
    font-family: "Hammersmith One", "Helvetica Neue", Helvetica, sans-serif;
}
.joesefin-sans {
    font-family: "Josefin Sans", "Helvetica Neue", Helvetica, sans-serif;
}
.kaushan-script {
    font-family: "Kaushan Script", "Helvetica Neue", Helvetica, sans-serif;
}
.domine {
    font-family: "Domine", "Helvetica Neue", Helvetica, sans-serif;
}
.oswald {
    font-family: "Oswald", "Helvetica Neue", Helvetica, sans-serif;
}
.crete-round {
    font-family: "Crete Round", "Cambria", Georgia, serif;
}
.alegreya-sans {
    font-family: "Alegreya Sans", "Helvetica Neue", Helvetica, sans-serif;
}
.bench-nine {
    font-family: "BenchNine", "Helvetica Neue", Helvetica, sans-serif;
}
.luckiest-guy {
    font-family: "Luckiest Guy", "Helvetica Neue", Helvetica, sans-serif;
}
.bitter {
    font-family: "Bitter", "Helvetica Neue", Helvetica, sans-serif;
}
.montserrat {
    font-family: "Montserrat", "Helvetica Neue", Helvetica, sans-serif;
}
.raleway {
    font-family: "Raleway", "Helvetica Neue", Helvetica, sans-serif;
}
.ranga {
    font-family: "Ranga", "Helvetica Neue", Helvetica, sans-serif;
}
.fjalla-one {
    font-family: "Fjalla One", "Helvetica Neue", Helvetica, sans-serif;
}
.fredoka-one {
    font-family: "Fredoka One", "Helvetica Neue", Helvetica, sans-serif;
}
.quicksand {
    font-family: "Quicksand", "Helvetica Neue", Helvetica, sans-serif;
}
.sanchez {
    font-family: "Sanchez", "Helvetica Neue", Helvetica, sans-serif;
}
.yellow-tail {
    font-family: "Yellowtail", "Helvetica Neue", Helvetica, sans-serif;
}
.reem-kufi {
    font-family: "Reem Kufi", "Helvetica Neue", Helvetica, sans-serif;
}
.righteous {
    font-family: "Righteous", "Helvetica Neue", Helvetica, sans-serif;
}
.chewy {
    font-family: "Chewy", "Helvetica Neue", Helvetica, sans-serif;
}
.rock-salt {
    font-family: "Rock Salt", "Helvetica Neue", Helvetica, sans-serif;
}
.alice {
    font-family: "Alice", "Cambria", Georgia, serif;
}
.icon {
    display: inline-block;
    fill: currentColor;
    height: 1em;
    width: 1em;
    vertical-align: middle;
    position: relative;
    top: -.0625em;
    margin-right: .25em;
    margin-left: .25em;
    text-align: center;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transition: -webkit-transform .3 ease;
    transition: -webkit-transform .3 ease;
    transition: transform .3 ease;
    transition: transform .3 ease, -webkit-transform .3 ease;
}
body {
    background-color: #bbb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='92' viewBox='0 0 112 92'%3E%3Cg fill='%236850a7' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M72 10H40L16 20H0v8h16l24-14h32l24 14h16v-8H96L72 10zm0-8H40L16 4H0v8h16l24-6h32l24 6h16V4H96L72 2zm0 84H40l-24-6H0v8h16l24 2h32l24-2h16v-8H96l-24 6zm0-8H40L16 64H0v8h16l24 10h32l24-10h16v-8H96L72 78zm0-12H40L16 56H0v4h16l24 14h32l24-14h16v-4H96L72 66zm0-16H40l-24-2H0v4h16l24 6h32l24-6h16v-4H96l-24 2zm0-16H40l-24 6H0v4h16l24-2h32l24 2h16v-4H96l-24-6zm0-16H40L16 32H0v4h16l24-10h32l24 10h16v-4H96L72 18z'/%3E%3C/g%3E%3C/svg%3E");
    height: 100vh;
    padding: 2em;
}
.canvas {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
}
.vr-mask {
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .2s ease;
    will-change: transform scale;
}
@media (min-width: 35em) {
    .vr-mask {
        -webkit-transform: scale(1.75);
        transform: scale(1.75);
    }
}
.vr-mask {
    color: #fff;
    margin-right: auto;
    margin-left: auto;
    width: 250px;
    height: 150px;
    position: relative;
    text-align: center;
}
.vr-mask div {
    position: absolute;
}
.vr-mask div:before,
.vr-mask div:after {
    position: absolute;
    display: block;
    content: "";
}
.screen {
    background-color: rebeccapurple;
    border-radius: 8px;
    border: 6px solid rebeccapurple;
    box-shadow: inset 0 0 0 4px currentColor, 0 0 0 5px currentColor;
    padding: 3px;
    height: 84px;
    width: 164px;
    bottom: 0;
    left: 43px;
    z-index: 3;
}
.glass {
    background-color: rebeccapurple;
    bottom: 0;
    left: 0;
    width: 100%;
}
.glare {
    background-color: transparent;
    border-radius: 25px;
    box-shadow: inset 0 0 0 10px currentColor;
    height: 5px;
    width: 25px;
    top: 24px;
    left: 10px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.glare:after {
    border-radius: inherit;
    box-shadow: inset 0 0 0 10px currentColor;
    position: absolute;
    content: "";
    height: inherit;
    width: 40px;
    top: 12px;
    left: -5px;
}
.nose-rest {
    border-radius: 43%;
    background-color: currentColor;
    bottom: -11px;
    left: calc(50% - 12px);
    height: 32px;
    width: 24px;
}
.nose-rest:before,
.nose-rest:after {
    background-color: inherit;
    border-radius: 50% 50% 0 0;
    height: 27px;
    width: 14px;
    top: 1px;
    z-index: 3;
}
.nose-rest:before {
    left: -2px;
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
}
.nose-rest:after {
    right: -2px;
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
}
.ear-left,
.ear-right {
    background-color: rebeccapurple;
    border-radius: 50%;
    border: 4px solid currentColor;
    height: 74px;
    width: 60px;
    bottom: 5px;
    left: 9px;
    z-index: 0;
}
.ear-left:before,
.ear-right:before {
    background-color: inherit;
    border-radius: 10px;
    border: 4px solid currentColor;
    height: 38px;
    width: 28px;
    top: 50%;
    left: -12px;
    margin-top: -18px;
}
.ear-right {
    right: 9px;
    left: auto;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.strap {
    background-color: currentColor;
    border-radius: 50% 50% 0 0;
    border: 4px solid currentColor;
    box-shadow: inset 0 0 0 7px rebeccapurple;
    top: 0;
    left: calc(50% - 85px);
    height: 146px;
    width: 170px;
    z-index: 0;
}
.strap:before {
    background-color: rebeccapurple;
    border-radius: 5px;
    height: 146px;
    width: 60px;
    top: 3px;
    left: calc(50% - 30px);
    -webkit-clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
}
.og-img {
    position: absolute;
    pointer-events: none;
    top: 0;
    right: 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    z-index: 3;
    display: none;
}

HTML

pure css vr mask，适用于VR虚拟现实类网站图标设计。

css3, logo

编辑器支持Emmet

快捷键

pure css vr mask，适用于VR虚拟现实类网站图标设计。

css3, logo

纯CSS3实现的镜头光晕（光圈）

9个常用的纯CSS实现加载动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：