YeomanYe

<h1>CSS is awesome!</h1>

<style>
@keyframes typing {
from { width: 0 }
}
@keyframes caret {
50% { border-color: currentColor; }
}
h1 {

YeomanYe

/*普通闪烁效果 */
@keyframes blink { 50% { color: transparent } }
.highlight {
    animation: 1s blink 3 steps(1); /* 或用step-end */
}

YeomanYe

/*平滑闪烁效果*/
@keyframes blink-smooth { to { color: transparent } }
.highlight {
animation: .5s blink-smooth 6 alternate;
}

YeomanYe

@keyframes loader {
  /*图片总长800px*/
to { background-position: -800px 0; }
}
.loader {
width: 100px; height: 100px;
background: url(img/loader.png) 0 0;
/*steps()将动画均匀分配为8帧,产生图片逐帧播放的效果*/
animation: loader 1s infinite steps(8);
/* 把文本隐藏起来 */

YeomanYe

/*效果:输入框提示元素的放大动画,过程:元素出现->元素超出大小->回到原始大小*/
input:not(:focus) + .callout{
    /*覆盖了动画函数,动画函数使用默认值ease,同时使用修正了不同函数的动画时间*/
    transform:scale(0);
    /*防止动画效果用在了，诸如背景等属性上产生异样的效果*/
    transition:.25s transform;
}
.callout{
    transform-origin:1.4em -.4em;
    transition:.5s cubic-bezier(.25,.1,.3,1.5) transform;

YeomanYe

<header> HTML
<h1>Site name</h1>
</header>
<main>
<p>Bacon Ipsum dolor sit amet...
<!-- 从baconipsum.com那里复制一些示意文字过来 --></p>
</main>
<footer>
<p>© 2015 No rights reserved.</p>
<p>Made with ♥ by an anonymous pastafarian.</p>

YeomanYe

main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

YeomanYe

/*只适用与在视口中居中的场景*/
main {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}

YeomanYe

/*当我们使用 Flexbox 时， margin: auto 不仅在水平方向上将元素居中， 垂直方向上也是如此*/
body {
display: flex;
min-height: 100vh;
margin: 0;
}
main {
margin: auto;
}

YeomanYe

/*通过padding设置居中可用于，满幅背景,定宽的内容*/
.test{
    padding:1em;
    padding:1em calc(50% - 450px);
}