-1
Я пытаюсь внедрить только модный модуль CSS с анимацией на свой сайт. Он отлично работает на этом Codepen. Я нашел: http://codepen.io/petebot/pen/DBvKjПочему этот CSS работает на Codepen, но не напрямую в браузере?
Но я не могу проверить или настроить этот код на своем веб-сайте, потому что он не работает на 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>