为什么此CSS可以在Codepen上工作，而不能直接在浏览器中工作? [英] Why does this CSS work on Codepen but not directly in browser?
问题描述
我正在尝试在我的网站上实现一个带有动画的纯CSS模式框.它可以在我发现的Codepen上完美运行: http://codepen.io/petebot/pen/DBvKj
I'm trying to implement a CSS-only modal box with animation onto my website. It works perfectly on this Codepen I found: http://codepen.io/petebot/pen/DBvKj
但是我无法在我的网站上测试或自定义此代码，因为它无法在HTML页面上使用.
But I can't test or customize this code on my website because it doesn't work on an HTML page.
我在这里想念什么?
这是HTML页面:
<html>
<head>
<title></title>
<style>
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
.transition (@time: .5s, @range: all, @ease: ease-out) {
-moz-transition: @range @time @ease;
-webkit-transition: @range @time @ease;
-o-transition: @range @time @ease;
transition: @range @time @ease;
}
.transition-delay (@time: .4s) {
-webkit-transition-delay: @time;
-moz-transition-delay: @time;
-o-transition-delay: @time;
-transition-delay: @time;
}
.border-radius(@radius) {
-moz-border-radius:@radius;
-webkit-border-radius:@radius;
border-radius: @radius;
}
.gradient (@coler1: #fff, @coler2: #ccc) {
background: @coler1;
background: -moz-linear-gradient(@coler1, @coler2);
background: -webkit-linear-gradient(@coler1, @coler2);
background: -o-linear-gradient(@coler1, @coler2);
}
.box-shadow(@dims:0 0 10px, @color:#000) {
box-shadow: @dims @color; // Opera, FFX4
-moz-box-shadow:@dims @color; // FFX3.5
-webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
.ie7 { filter: e(%("progid:DXImageTransform.Microsoft.Shadow(color='%d', Direction=135, Strength=3)", @color)); }
}
.inset(@dims:1px 1px 1px, @color:#fff) {
box-shadow: @dims @color; // Opera, FFX4
-moz-box-shadow:@dims @color; // FFX3.5
-webkit-box-shadow:@dims @color; // Safari/Chrome/WebKit
}
body {
width: 100%;
background: url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/grid.png) repeat #fefefe;
}
.button {
margin: 40px auto;
font-size: 72px;
font-family: 'Yanone Kaffeesatz', Arial, sans-serif;
text-decoration: none;
text-shadow: 1px 1px 0px #fff;
font-weight: 400;
color: #666;
border: 1px solid #ccc;
cursor: pointer;
padding: 20px 70px 30px;
position: relative;
top: 50px;
background: #eee;
width: 300px;
display: block;
text-align: center;
.inset;
.border-radius(5px);
.transition;
&:hover{ color: #333; background: #eeffff; .transition;}
}
.modalbg {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0);
z-index: 99999;
.transition(2s);
.transition-delay(.2s);
display: block;
pointer-events: none;
.dialog {
width: 400px;
position: relative;
top: -1000px;
margin: 10% auto;
padding: 5px 20px 13px 20px;
.border-radius(10px);
.gradient;
.box-shadow;
}
}
.modalbg:target {
display: block;
pointer-events: auto;
background: rgba(4, 10 ,30, .8);
.transition();
.dialog {
top: -20px;
.transition(.8s);
.transition-delay;
}
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
.box-shadow;
.transition;
.transition-delay(.2s);
&:hover { background: #00d9ff; .transition; }
}
.fineprint {
font-style: italic;
font-size: 10px;
color: #646;
}
a { color: #333; text-decoration: none; }
</style>
</head>
<body>
<a class="button" href="#openModal">Open it up!</a>
<div id="openModal" class="modalbg">
<div class="dialog">
<a href="#close" title="Close" class="close">X</a>
<h2>Holy Crap!!!</h2>
<p>You freakin' did it!</p>
<p>You opened up the freakin' modal window! Now close it, ya dingus.</p>
<p class="fineprint">Based on the article "Creating a modal window with HTML5 & CSS3" at <a href="webdesignerdepot.com">Webdesigner Depot</a></p>
<p class="fineprint">p.s. Sorry for calling you a dingus earlier.</p>
</div>
</div>
</body>
</html>
推荐答案
问题是您拥有 LESS 格式的样式. 不需要是 CSS 的预处理器.浏览器本身不支持.您应该将 LESS 样式编译为 CSS ，然后将这些样式添加到页面中.
The problem is that you have the styles in LESS format. LESS is a CSS pre-processor. Is not supported natively by the browser. You should compile your LESS styles to CSS and then add those styles to your page.
在 codepen 中，该代码有效，因为CSS面板配置为使用LESS，但仅是一种codepen功能，遗憾的是您无法在您的网站/页面上使用它.
In codepen the code works because the CSS panel is configured to use LESS but is just a codepen feature, sadly you can't do it for your site / page.
查看其他文档，以了解如何将其编译为有效的CSS.
Check out LESS docs to see how to compile it to a valid CSS.
这篇关于为什么此CSS可以在Codepen上工作，而不能直接在浏览器中工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
