css3动画全屏页面
Today we'll be looking at ways to spice up when people land on our sites. I just experimented with this a little bit on a personal project, CODE Hearted. You can see the logo and content is animated on page load so that it gives the page a little more life.
今天，我们将研究人们在我们网站上登陆时如何增添趣味。 我只是在一个个人项目CODE Hearted上对此进行了试验。 您可以看到徽标和内容在页面加载时动画化，从而使页面更具生命力 。
Not only can we use this technique to add a little pizazz, we can use it for UI/UX purposes to guide the user's eyes across our page. Let's say we only want a tagline to show up that tells a user what our site is about, then 3 seconds later, the content shows up. The combinations for this are unlimited and definitely play around with these animations and let your imagination go crazy. I went a little overboard I think on some animations (we probably wouldn't want everything on a page to move), but it was more for demonstration purposes.
我们不仅可以使用此技术添加一点点赞誉， 还可以将其用于UI / UX，以引导用户的视线遍及整个页面。 假设我们只希望显示一个标语，告诉用户我们网站的内容，然后3秒钟后，内容就会显示出来。 这样的组合是无限的，并且肯定会与这些动画一起玩，并且让您的想象力发疯。 我认为有些动画（我可能不希望页面上的所有内容都移动）使我有些落伍，但这更多是出于演示目的。
The main way to build this technique is using CSS3's animation feature and the animation-delay.
构建此技术的主要方法是使用CSS3的animation功能和animation-delay 。
建立它 (Build It)
Let's start by setting up our site. We are going to use the super awesome Animate.css by Dan Eden for our animations. Also Twitter Bootstrap. We can write up our own but we'll use this to make it quick and easy.
让我们开始设置我们的网站。 我们将使用Dan Eden的超赞Animate.css动画。 还有Twitter Bootstrap 。 我们可以自己编写，但是我们将使用它来使它变得快速和容易。
文件夹/文件结构 (Folder/File Structure)
- css
- style.css
- style.css
- index.html index.html
index.html (index.html)
We'll set up the HTML needed to set up our page. We'll load bootstrap and animate.css from a CDN.
我们将设置建立页面所需HTML。 我们将从CDN加载bootstrap和animate.css。
To use animate.css, we add a class of animated and the type of animation we want to use. These are found here on the cool demo page. After this, all the animations will run at the same time. We add specific classes to each to vary the animation time and that's what gives us our varied effect.
要使用animate.css，我们添加了animated类和想要使用的动画类型。 这些可以在很酷的演示页面上找到。 此后，所有动画将同时运行。 我们向每个类别添加特定的类来改变动画时间，这就是我们赋予我们各种效果的原因。
<!doctype html>
<html>
<head>
<title>CSS3 Page Loading Animations</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/2.1.0/animate.min.css"><!-- load animate -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div id="header" class="row text-center">
<div id="logo">
<span id="danger">
<span class="dd animated bounceInDown">d</span>
<span class="da animated bounceInDown">a</span>
<span class="dn animated bounceInDown">n</span>
<span class="dg animated bounceInDown">g</span>
<span class="de animated bounceInDown">e</span>
<span class="dr animated bounceInDown">r</span>
</span>
<span id="zone">
<span class="zz animated bounceInDown">z</span>
<span class="zo animated bounceInDown">o</span>
<span class="zn animated bounceInDown">n</span>
<span class="ze animated bounceInDown">e</span>
</span>
</div>
<nav id="main-nav">
<ul class="list-unstyled list-inline">
<li><a id="demo-1" class="animated btn btn-danger" href="index.html">Demo 1</a></li>
<li><a id="demo-2" class="animated btn btn-danger" href="two.html">Demo 2</a></li>
<li><a id="demo-3" class="animated btn btn-danger" href="three.html">Demo 3</a></li>
</ul>
</nav>
</div>
<div id="main" class="row">
<div id="sidebar" class="col-sm-4">
<nav id="sidebar-nav">
<ul>
<li><a id="side-home" class="animated bounceInLeft" href="#">Home</a>
<li><a id="side-about" class="animated bounceInLeft" href="#">About</a>
<li><a id="side-work" class="animated bounceInLeft" href="#">Work</a>
<li><a id="side-contact" class="animated bounceInLeft" href="#">Contact</a>
</ul>
</nav>
</div>
<div id="content" class="animated bounceInUp col-sm-8 text-center">
<div class="row">
<div class="col-sm-4">
<img class="img-responsive animated bounceInUp" src="http://lorempixel.com/500/500/people">
</div>
<div class="col-sm-4">
<img class="img-responsive animated bounceInUp" src="http://lorempixel.com/500/500/nature">
</div>
<div class="col-sm-4">
<img class="img-responsive animated bounceInUp" src="http://lorempixel.com/500/500">
</div>
</div>
</div>
</div>
</div>
</body>
</html>Now we have a solid foundation for our site. Using animate, all of those things that are animated will now move when you view your site. Let's add some more styling and then we'll get to the animations.
现在，我们为网站奠定了坚实的基础。 使用动画，当您查看站点时，所有这些动画的东西现在都将移动。 让我们添加更多样式，然后进入动画。
/* BASE
============================================================================= */
@import url(http://fonts.googleapis.com/css?family=Offside);
html { overflow-y:scroll; }
body { margin-top:40px; }
/* HEADER
============================================================================= */
#header { margin-bottom:50px; }
/* logo */
#logo { color:#FFF; font-family:'Offside'; font-size:80px; margin-bottom:50px; margin-top:50px; }
#logo span { display:inline-block; }
/* MAIN NAV
============================================================================= */
#main-nav { margin-bottom:30px; }
/* SIDEBAR
============================================================================= */
#sidebar { }
#sidebar-nav { }
#sidebar-nav ul { list-style:none; padding-left:0; }
#sidebar-nav li { }
#sidebar-nav a { background:#428bca; color:#FFF; display:block; margin-bottom:10px; padding:20px; text-transform:uppercase;
border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
}
#sidebar-nav a:hover { background:#3276b1; text-decoration:none; }
/* CONTENT
============================================================================= */
#content { background:#FFF; min-height:400px; padding:20px;
border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
}
#content img { border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; }
/* ANIMATIONS
============================================================================= */
/* logo */
.dd { animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; }
.da { animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; }
.dn { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
.dg { animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; }
.de { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
.dr { animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; }
.zz { animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; }
.zo { animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
.zn { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
.ze { animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
/* sidebar */
#side-home { animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; }
#side-about { animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
#side-work { animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; }
#side-contact { animation-delay:0.3s; -moz-animation-delay:0.3s; -webkit-animation-delay:0.3s; }
/* content */
#content { animation-delay:1.5s; -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
#content img { animation-delay:1.7s; -moz-animation-delay:1.7s; -webkit-animation-delay:1.7s; }And that's it! By adding the variable animation-delays times you can create some pretty sweet animations. Go crazy and experiment with it!
就是这样！ 通过添加可变的animation-delays时间，您可以创建一些漂亮的动画。 发疯并尝试一下！
翻译自: https://scotch.io/tutorials/css3-page-landing-animations
css3动画全屏页面
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
