text 161104リモーダルのように出て记事を顺々に出していく
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text 161104リモーダルのように出て记事を顺々に出していく相关的知识,希望对你有一定的参考价值。
//HTML
<h1>Principle 12: Appeal</h1>
<h2><a href="https://cssanimation.rocks/principles/" target="_parent">Animation Principles for the Web</h2>
<article class="principle twelve">
<div class="shape">
<div class="container">
<span class="item one"></span>
<span class="item two"></span>
<span class="item three"></span>
<span class="item four"></span>
</div>
</div>
</article>
//CSS
/******* TWELVE (Appeal) *******/
.twelve .shape {
background: none;
border: none;
perspective: 400px;
perspective-origin: center;
}
.twelve .shape .container {
animation: show-container 8s infinite cubic-bezier(.6,-0.44,.37,1.44);
transform-style: preserve-3d;
width: 4em;
height: 4em;
border: 1em solid #fff;
background: #2d97db;
position: relative;
}
.twelve .item {
background-color: #1f7bb6;
position: absolute;
}
.twelve .item.one {
animation: show-text 8s 0.1s infinite ease-out;
height: 6%;
width: 30%;
top: 15%;
left: 25%;
}
.twelve .item.two {
animation: show-text 8s 0.2s infinite ease-out;
height: 6%;
width: 20%;
top: 30%;
left: 25%;
}
.twelve .item.three {
animation: show-text 8s 0.3s infinite ease-out;
height: 6%;
width: 50%;
top: 45%;
left: 25%;
}
.twelve .item.four {
animation: show-button 8s infinite cubic-bezier(.64,-0.36,.1,1.43);
height: 20%;
width: 40%;
top: 65%;
left: 30%;
}
@keyframes show-container {
0% {
opacity: 0;
transform: rotateX(-90deg);
}
10% {
opacity: 1;
transform: none;
width: 4em;
height: 4em;
}
15%, 90% {
width: 12em;
height: 12em;
transform: translate(-4em, -4em);
opacity: 1;
}
100% {
opacity: 0;
transform: rotateX(-90deg);
width: 4em;
height: 4em;
}
}
@keyframes show-text {
0%, 15% {
transform: translateY(1em);
opacity: 0;
}
20%, 85% {
opacity: 1;
transform: none;
}
88%, 100% {
opacity: 0;
transform: translateY(-1em);
animation-timing-function: cubic-bezier(.64,-0.36,.1,1.43);
}
}
@keyframes show-button {
0%, 25% {
transform: scale(0);
opacity: 0;
}
35%, 80% {
transform: none;
opacity: 1;
}
90%, 100% {
opacity: 0;
transform: scale(0);
}
}
/* General styling */
body {
margin: 0;
background: #e9b59f;
font-family: HelveticaNeue, Arial, Sans-serif;
color: #fff;
}
h1 {
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
font-weight: 300;
}
h2 {
font-size: 0.75em;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
a {
text-decoration: none;
color: #333;
}
.principle {
width: 100%;
height: 100vh;
position: relative;
}
.shape {
background: #2d97db;
border: 1em solid #fff;
width: 4em;
height: 4em;
position: absolute;
top: calc(50% - 2em);
left: calc(50% - 2em);
}
以上是关于text 161104リモーダルのように出て记事を顺々に出していく的主要内容,如果未能解决你的问题,请参考以下文章
Visualforceで数値や日付のフォーマットを指定して表示するには?
html vue cards-imageの画像をどのようにはきだすか。(for文での扱い)
markdown 画面をスリープさせないようにする
css コンポーネントをどのように作るかref:http://qiita.com/usako/items/de252b7f7e43e5161fcb
ruby AWS KMSサービスを利用して,秘密にしたいデータをコードの中で扱えるようにする
markdown ネストしたリレーションで,亲を保存したときに子も保存されるようにする