Question

我正在尝试在我的网站上实现一个只有CSS的模态框和动画。它在我找到的Codepen上完美运行：http://codepen.io/petebot/pen/DBvKj

但我无法在我的网站上测试或自定义此代码，因为它无法在HTML页面上运行。

我在这里缺少什么？

这是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>

Answer 1

问题是你有 LESS 格式的样式。 LESS 是 CSS 预处理器。浏览器本身不支持。您应该将 LESS 样式编译为 CSS ，然后将这些样式添加到您的页面。

在 codepen 中，代码可以运行，因为CSS面板配置为使用LESS但只是一个codepen功能，遗憾的是你不能为你的网站/页面做这件事。

查看LESS docs以了解如何将其编译为有效的CSS。

Answer 2

尝试使用此方法获取已编译的css

点击css标签旁边的设置按钮。

然后单击Analyze css，然后单击Clear css errors。

您现在将拥有已编译的css。

在html文件中使用此css。

为什么这个CSS适用于Codepen而不是直接在浏览器中？

2 个答案: