ホームページ >ウェブフロントエンド >CSSチュートリアル >3 CSS3 でデザインを読み込む (1) のサンプルコードを共有します。
3 CSS3 でデザインを読み込む (1) のサンプルコードを共有します。
- 零下一度オリジナル
- 2017-05-05 15:21:201847ブラウズ
最近、<a href="http://www.php.cn/wiki/1118.html" target="_blank">HTML5</a> シリーズのコースを勉強しています。内容も非常にシンプルで分かりやすいですが、プロパティのhtml。今回紹介する CSS3 Loading アニメーション も紹介された内容に興味のあるギークアカデミー生は動画を視聴することも可能です。 <a href="http://www.php.cn/wiki/1118.html" target="_blank">HTML5</a> 系列课程，这么课程涵盖的内容也是非常的多，虽然内容十分简单容易理解，但是非常难以记忆，比如 CSS3 的一些属性。今天所要介绍的 CSS3 Loading 动画也是极客学院里所介绍的内容，感兴趣的同学也可以前去观看视屏。
Loading one
demo01.gif
第一种加载动画的效果，就是这么一个图在不停的转啊转，下面我们就来看看代码。
首先，我们先定义一下 HTML代码，为了方便这里我只粘贴核心代码
<p class="box">
<p class="loading">
<i></i>
</p>
</p>p下面我们使用了 i标签，不要问为什么，你也可以换成 p标签或其他任何标签。下面就用 CSS对我们的Html进行修饰
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 100%;
padding: 3%;
}
.loading {
display: flex;
width: 30%;
height: 250px;
margin: 50px auto;
border: 1px solid #699;
justify-content: center;
align-items: center;
}这里解释一下，margin: 50px auto; 这一行，将上下外边距设置为 50px, 左右设置为 auto，这样可以达到将我们的元素水平居中的目的。
还有这里的 box-sizing: border-box 是什么意思呢？我们将宽度设置为了父元素的 30%,而我们又设置了边框，那这个边框占据的大小算不算在当前元素的宽度中呢？这里我们设置的值就是说明，加上边框占据的大小，当前元素占父元素的 30%。
display,align-items,justify-content 这三个属性是为了将 i 标签中的内容放置在 p 的中部。首先利用 display 属性将p 设置成弹性盒子元素，然后利用 align-items 设置元素在纵轴上居中，justify-content 设置元素在横轴上居中。注意居中效果必须在这三种元素同时存在时才有效，因为后两个属性是依赖于第一个属性的。
.loading i {
width: 35px;
height: 35px;
position: relative;
display: block;
border-radius: 50%;
background: linear-gradient(transparent 0%, transparent 50%,
#699 50%, #699 100%);
-webkit-animation: loading 1s linear 0s infinite;
}看看 background 属性，其中设置了线性渐变效果，其中的参数也是我刚接触不能够理解的，不明白为什么要这么写，其实可以这么理解，从0% 到 70% 设置成透明，从 70% 到 100% 设置成 #699，这样我们就看到了上述图片中图像。
-webkit-animation 属性就是为当前元素指定了一个动画，第一个参数是动画的名称，也即 loading ，该动画是需要我们自己去定义的，具体定义下面再介绍。第二个参数是动画持续的时长，第三个参数是动画的速度曲线，第四个参数是动画延迟时间，第五个参数是动画播放的次数。下面看看我们自己定义的动画
@-webkit-keyframes loading {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}十分容易理解，就是在动画的不同阶段进行元素的旋转。值得注意的是，这种定义方式只能在 Chrome 和 Safari 浏览器中能看到动画效果，那么如果我们想在火狐浏览器中也显示动画效果，那么我们需要这么定义。
@-moz-keyframes loading-moz{
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}引用的时候 -moz-animation: loading-moz 1s linear 0s infinite;几乎是相同的，只不过换个头部而已（至于在其他浏览器中怎么定义，自己去试试吧）。
Loading two
demo02.gif
这个动画的效果就是五个条纹像波浪一样摆动。下面就来书写这么一个效果。首先是HTML,毫无悬念，十分简单的布局
<p class="box">
<p class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>其实这个效果几乎所有的CSS 代码都是和上面一致的，来看看
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 100%;
padding: 3%;
}
.loading {
display: flex;
width: 30%;
height: 250px;
margin: 50px auto;
border: 1px solid #699;
justify-content: center;
align-items: center;
}
.loading i {
position: relative;
width: 6px;
height: 32px;
margin-right: 6px;
border-radius: 3px;
background-color: #699;
}这里唯一多出来的一行代码就是 .loader i 中的 margin-right属性，为什么会多这么一行呢？因为我们有 5 个 i
1 つ読み込み中
demo01.gif🎜🎜 アニメーションを読み込むことの最初の効果は、そのような画像が回転し続けることです。コードを見てみましょう。 . 🎜🎜まず、HTML コードを定義しましょう。便宜上、ここにはコア コードのみを貼り付けます🎜
@-webkit-keyframes loading {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(.5);
}
100% {
transform: scaleY(1);
}
}
.loading i:first-child {
-webkit-animation: loading 1s linear .1s infinite;
}
.loading i:nth-child(2) {
-webkit-animation: loading 1s linear .2s infinite;
}
.loading i:nth-child(3) {
-webkit-animation: loading 1s linear .3s infinite;
}
.loading i:nth-child(4) {
-webkit-animation: loading 1s linear .4s infinite;
}
.loading i:last-child {
-webkit-animation: loading 1s linear .5s infinite;
}🎜p 以下では、i を使用します。 tag を使用する場合は、理由を尋ねる必要はありません。 p タグまたはその他のタグに置き換えることもできます。 CSS を使用して HTML を変更しましょう 🎜linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。🎜 説明は次のとおりです。
margin: 50px auto; この行は、margin: 50px auto; の上下を変更します。 a href="http://www.php.cn/code/6043.html" target="_blank">余白は 50px に設定され、左右の余白はauto に設定されている場合、これにより要素を水平方向に中央揃えにするという目的を達成できます。 🎜🎜そして、ここでの box-sizing: border-box は何を意味しますか?幅を親要素の 30% に設定し、境界線を設定します。この境界線が占めるサイズは現在の要素の幅にカウントされますか?ここで設定した値は、境界線が占めるサイズに加えて、現在の要素が親要素の 30% を占めます。 🎜🎜display、align-items、justify-content これら 3 つの属性は、p の真ん中の i タグ内にコンテンツを配置します。まず display 属性を使用して p をフレキシブル ボックス要素に設定し、次に align-items を使用して要素が垂直方向の中央に配置されるように設定します。軸、および justify -content 要素を水平軸の中央に配置します。後の 2 つの属性は最初の属性に依存するため、センタリング効果はこれら 3 つの要素が同時に存在する場合に有効である必要があることに注意してください。 🎜<p class="box">
<p class="loader">
<p class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
</p>🎜 線形グラデーション効果を設定する background 属性を見てください。これも初心者には理解できないものです。なぜこのように書かれているのかわかりません。実際、 0% から 70% までは透明に設定され、70% から までは透明に設定されます。 code>100% は #699 に設定されているため、上記の 画像。 🎜🎜-webkit-animation 属性は、現在の要素のアニメーションを指定します。最初のパラメーターはアニメーションの名前であり、このアニメーションは loading によって実行される必要があります。具体的な定義を以下に紹介します。 2 番目のパラメータはアニメーションの長さ、3 番目のパラメータはアニメーションの速度カーブ、4 番目のパラメータはアニメーションの遅延時間、5 番目のパラメータはアニメーションの再生回数です。独自に定義したアニメーション 🎜 .box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 250px;
margin: 10px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.loading {
position: relative;
}
.loading i {
display: block;
width: 15px;
height: 15px;
background-color: #333333;
border-radius: 50%;
position: absolute;
}🎜 を見てみましょう。これはアニメーションのさまざまな段階での要素の回転です。この定義メソッドは Chrome ブラウザと Safari ブラウザでのみアニメーション効果を表示できることに注意してください。そのため、Firefox ブラウザ効果でもアニメーションを表示したい場合は、次に、このように定義する必要があります。 🎜absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。🎜引用する場合
-moz-animation:loading-moz 1s Linear 0s infinite; はヘッダーを変更するだけで、ほぼ同じです (他のブラウザでの定義方法については、自分で試してください)。 🎜
2 つ読み込み中
🎜
demo02.gif🎜🎜 このアニメーションの効果は、5 つのストライプが波のように揺れることです。以下にそのような効果を書いてみましょう。 1 つ目は HTML です。間違いなく、非常にシンプルなレイアウトです🎜
.loading i:nth-child(1) {
top: 25px;
left: 0px;
}
.loading i:nth-child(2) {
top: 17px;
left: 17px;
}
.loading i:nth-child(3) {
top: 0px;
left: 25px;
}
.loading i:nth-child(4) {
top: -17px;
left: 17px;
}
.loading i:nth-child(5) {
top: -25px;
left: 0px;
}
.loading i:nth-child(6) {
top: -17px;
left: -17px;
}
.loading i:nth-child(7) {
top: 0px;
left: -25px;
}
.loading i:nth-child(8) {
top: 17px;
left: -17px;
}🎜実際、この効果のほぼすべての CSS コードは上記と一致しています。見てみましょう。 🎜 @-webkit-keyframes loading {
50%{
transform: scale(0.4);
opacity: 0.3;
}
100%{
transform: scale(1);
opacity: 1;
}
}🎜 ここでのコードの唯一の余分な行は、.loader i の margin-right 属性です。なぜこのような余分な行があるのでしょうか。 i タグが 5 つあるため、この行に属性設定がないとすべてのタグが重なってしまいます。次のステップは、アニメーション効果を設定することです。🎜@-webkit-keyframes loading {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(.5);
}
100% {
transform: scaleY(1);
}
}
.loading i:first-child {
-webkit-animation: loading 1s linear .1s infinite;
}
.loading i:nth-child(2) {
-webkit-animation: loading 1s linear .2s infinite;
}
.loading i:nth-child(3) {
-webkit-animation: loading 1s linear .3s infinite;
}
.loading i:nth-child(4) {
-webkit-animation: loading 1s linear .4s infinite;
}
.loading i:last-child {
-webkit-animation: loading 1s linear .5s infinite;
}
可见我们设置的动画效果就是在 50% 的时候，将元素沿着 Y 轴进行缩放。然后我们对每一个i 标签进行了动画设定，不同的是每一个标签中的动画延迟执行时间不同，这样就可以达到波浪的效果，还有一点值得注意的是，我们发现我们指定的 动画速度曲线不同了，其实这个地方我们有必要了解一下所有可能的取值，如下
linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。
Loading Three
demo03.gif
这次要做的效果是动态转圈加载的效果，下面来看看如何实现这里的 HTML 代码和以上两个可能有点差别，这里多了一个 p 标签，目的是让画出的图形能够居中。
<p class="box">
<p class="loader">
<p class="loading">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</p>
</p>看看 CSS 代码
.box {
width: 100%;
padding: 3%;
}
.loader {
width: 30%;
height: 250px;
margin: 10px auto;
border: 1px solid chocolate;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.loading {
position: relative;
}
.loading i {
display: block;
width: 15px;
height: 15px;
background-color: #333333;
border-radius: 50%;
position: absolute;
}要理解为什么这些代码会画出如图所示的图形，那么我们必须要对 position 属性有一个透彻的了解，首先我们来看看我们用到的两个属性值是什么意思.
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
知道了意思，再来分析以上的代码，我们在loading 元素中定义了一个 position:relative 由于没有相应的内容将其撑起，所以这个时候loading 实际上为中心的一个点，然后我们将 i 标签设置为绝对定位，也就是围绕着这个点进行画圆即可。下面来看看画圆的代码
.loading i:nth-child(1) {
top: 25px;
left: 0px;
}
.loading i:nth-child(2) {
top: 17px;
left: 17px;
}
.loading i:nth-child(3) {
top: 0px;
left: 25px;
}
.loading i:nth-child(4) {
top: -17px;
left: 17px;
}
.loading i:nth-child(5) {
top: -25px;
left: 0px;
}
.loading i:nth-child(6) {
top: -17px;
left: -17px;
}
.loading i:nth-child(7) {
top: 0px;
left: -25px;
}
.loading i:nth-child(8) {
top: 17px;
left: -17px;
}看到这些代码，如果你不知道为什么这样能够画出一个圆，那么拿出草稿纸，画一个坐标轴，将上述代码中的 top 值作为 y 轴的值，将 left 的值作为 x 轴的值，就可以看到为什么这么书写代码了。好了，静态图像已经书写完毕，那么接下来就是定义动画的时间了
@-webkit-keyframes loading {
50%{
transform: scale(0.4);
opacity: 0.3;
}
100%{
transform: scale(1);
opacity: 1;
}
}opacity 属性用于设置元素的透明度。所以说我们的动画效果就是将元素缩小为 0.4 倍并且将透明度设置成 0.3。然后为每个 i 标签指定动画效果，从上到下依次为
-webkit-animation: loading 1s ease 0s infinite; -webkit-animation: loading 1s ease 0.12s infinite; -webkit-animation: loading 1s ease 0.24s infinite; -webkit-animation: loading 1s ease 0.36s infinite; -webkit-animation: loading 1s ease 0.48s infinite; -webkit-animation: loading 1s ease 0.60s infinite; -webkit-animation: loading 1s ease 0.72s infinite; -webkit-animation: loading 1s ease 0.84s infinite;
这个时候如果运行，你会发现好像是逆时针旋转的，如果想改成顺时针旋转，可以将延迟时间前面都加上负号。好了，今天先介绍这三种加载效果，如果书写有错误，欢迎反馈交流。
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
以上が3 CSS3 でデザインを読み込む (1) のサンプルコードを共有します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。