如何让我的 div 在页面加载时彼此缓和?
How do I get my divs to ease in right after eachother on page load?
我正在制作我的作品集,我认为当您在页面加载时看到一些漂亮的动画时会很酷。只有我不知道如何让动画工作。我的想法是让所有的 类 淡入淡出和缓入略微相继出现,这样当你加载页面时你会得到一个很酷的动画序列。
我的想法是:
淡入 title_text 作为第一个从左到右。
在那之后,所有的编程语言开始淡入并从 "javascript" 到 "php" 到 "mysql" 到 "css" 和最后的 "html".
我想让它变得灵活,这样我就可以在学习后添加更多语言。
我想自己学习一下,以后自己做动画。
对于那些感兴趣的人,这是我的投资组合
image
提前致谢!
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>
CSS
span.mycalendar {
font-size: 0.38em;
line-height: initial;
font-family: arial;
display: block;
position: relative;
width: 7em;
height: 7em;
background-color: #fff;
margin: 0 auto;
border-radius: 0.6em;
border-style: solid;
border-width: 1px;
border-color: #CFAF3B;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(0deg) skewY(0deg);
-webkit-transform-origin: 50% 10%;
transform-origin: 50% 10%;
}
title_text {
text-align: center;
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
color: white;
z-index: 5;
margin-top: -420px;
font-size: 80px;
text-transform: uppercase;
font-family: league-gothic;
letter-spacing: 5px;
border: 10px solid white;
}
.animations .html {
font-family: league-gothic;
float: left;
margin-left: 200px;
top: 30px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
animation: 5s linear 2s infinite alternate;
}
.animations .css {
font-family: league-gothic;
float: right;
margin-right: 200px;
top: 100px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .php {
font-family: league-gothic;
float: right;
margin-right: 200px;
top: -270px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .javascript {
font-family: league-gothic;
float: left;
top: -330px;
margin-left: -100px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .mysql {
font-family: league-gothic;
float: right;
margin-right: -500px;
top: -150px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
li {
background-color: red;
text-align: center;
}
li > a {
display: inline-block;
vertical-align: middle;
background-color: blue;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
vertical-align: middle;
}
span.mycalendar * {
display: block;
width: 100%;
font-size: 2.4em;
font-weight: bold;
font-style: normal;
text-align: center;
}
span.mycalendar strong {
position: absolute;
top: 0;
font-weight: normal;
padding-top: 0.06em;
color: #fff;
background-color: #CFAF3B;
box-shadow: 0 2px 0 #CFAF3B;
}
span.mycalendar span {
width: 100%;
font-size: 3.7em;
letter-spacing: -0.05em;
padding-top: 0.8em;
color: #2f2f2f;
}
ul {
list-style: none;
}
为了演示,我将它缩小了一点,但我希望你能理解这个想法
.animations .css,
.animations .html,
.animations .javascript,
.animations .mysql,
.animations .php {
font-family: league-gothic;
z-index: 10;
position: relative;
font-size: 20px;
color: #fff;
opacity: 0;
animation-name: fade-in;
animation-duration: 2s;
animation-fill-mode: forwards
}
body {
background: #777
}
.animations .html {
animation-delay: 0s
}
.animations .css {
animation-delay: 1s
}
.animations .php {
animation-delay: 2s
}
.animations .javascript {
animation-delay: 3s
}
.animations .mysql {
animation-delay: 4s
}
@-webkit-keyframes fade-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fade-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>
或者制作其他奇葩动画
.animations .css,
.animations .html,
.animations .javascript,
.animations .mysql,
.animations .php {
font-family: league-gothic;
z-index: 10;
position: relative;
font-size: 20px;
color: #fff;
transform: scale(0,0);
animation-name: pop-in;
animation-duration: 2s;
animation-fill-mode: forwards
}
body {
background: #777
}
.animations .html {
animation-delay: 0s
}
.animations .css {
animation-delay: 1s
}
.animations .php {
animation-delay: 2s
}
.animations .javascript {
animation-delay: 3s
}
.animations .mysql {
animation-delay: 4s
}
@keyframes pop-in {
from {
transform: scale(0,0);
}
to {
transform: scale(1,1);
}
}
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>
我正在制作我的作品集,我认为当您在页面加载时看到一些漂亮的动画时会很酷。只有我不知道如何让动画工作。我的想法是让所有的 类 淡入淡出和缓入略微相继出现,这样当你加载页面时你会得到一个很酷的动画序列。
我的想法是: 淡入 title_text 作为第一个从左到右。 在那之后,所有的编程语言开始淡入并从 "javascript" 到 "php" 到 "mysql" 到 "css" 和最后的 "html".
我想让它变得灵活,这样我就可以在学习后添加更多语言。
我想自己学习一下,以后自己做动画。
对于那些感兴趣的人,这是我的投资组合 image
提前致谢!
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>
CSS
span.mycalendar {
font-size: 0.38em;
line-height: initial;
font-family: arial;
display: block;
position: relative;
width: 7em;
height: 7em;
background-color: #fff;
margin: 0 auto;
border-radius: 0.6em;
border-style: solid;
border-width: 1px;
border-color: #CFAF3B;
overflow: hidden;
-webkit-backface-visibility: hidden;
-webkit-transform: rotate(0deg) skewY(0deg);
-webkit-transform-origin: 50% 10%;
transform-origin: 50% 10%;
}
title_text {
text-align: center;
width: 800px;
margin-left: auto;
margin-right: auto;
position: relative;
color: white;
z-index: 5;
margin-top: -420px;
font-size: 80px;
text-transform: uppercase;
font-family: league-gothic;
letter-spacing: 5px;
border: 10px solid white;
}
.animations .html {
font-family: league-gothic;
float: left;
margin-left: 200px;
top: 30px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
animation: 5s linear 2s infinite alternate;
}
.animations .css {
font-family: league-gothic;
float: right;
margin-right: 200px;
top: 100px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .php {
font-family: league-gothic;
float: right;
margin-right: 200px;
top: -270px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .javascript {
font-family: league-gothic;
float: left;
top: -330px;
margin-left: -100px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
.animations .mysql {
font-family: league-gothic;
float: right;
margin-right: -500px;
top: -150px;
z-index: 10;
position: relative;
font-size: 100px;
color: white;
}
li {
background-color: red;
text-align: center;
}
li > a {
display: inline-block;
vertical-align: middle;
background-color: blue;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
vertical-align: middle;
}
span.mycalendar * {
display: block;
width: 100%;
font-size: 2.4em;
font-weight: bold;
font-style: normal;
text-align: center;
}
span.mycalendar strong {
position: absolute;
top: 0;
font-weight: normal;
padding-top: 0.06em;
color: #fff;
background-color: #CFAF3B;
box-shadow: 0 2px 0 #CFAF3B;
}
span.mycalendar span {
width: 100%;
font-size: 3.7em;
letter-spacing: -0.05em;
padding-top: 0.8em;
color: #2f2f2f;
}
ul {
list-style: none;
}
为了演示,我将它缩小了一点,但我希望你能理解这个想法
.animations .css,
.animations .html,
.animations .javascript,
.animations .mysql,
.animations .php {
font-family: league-gothic;
z-index: 10;
position: relative;
font-size: 20px;
color: #fff;
opacity: 0;
animation-name: fade-in;
animation-duration: 2s;
animation-fill-mode: forwards
}
body {
background: #777
}
.animations .html {
animation-delay: 0s
}
.animations .css {
animation-delay: 1s
}
.animations .php {
animation-delay: 2s
}
.animations .javascript {
animation-delay: 3s
}
.animations .mysql {
animation-delay: 4s
}
@-webkit-keyframes fade-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
@keyframes fade-in {
from {
opacity: 0
}
to {
opacity: 1
}
}
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>
或者制作其他奇葩动画
.animations .css,
.animations .html,
.animations .javascript,
.animations .mysql,
.animations .php {
font-family: league-gothic;
z-index: 10;
position: relative;
font-size: 20px;
color: #fff;
transform: scale(0,0);
animation-name: pop-in;
animation-duration: 2s;
animation-fill-mode: forwards
}
body {
background: #777
}
.animations .html {
animation-delay: 0s
}
.animations .css {
animation-delay: 1s
}
.animations .php {
animation-delay: 2s
}
.animations .javascript {
animation-delay: 3s
}
.animations .mysql {
animation-delay: 4s
}
@keyframes pop-in {
from {
transform: scale(0,0);
}
to {
transform: scale(1,1);
}
}
<div class="animations">
<div class="html">
HTML
</div>
<div class="css">
CSS
</div>
<div class="php">
PHP
</div>
<div class="javascript">
JAVASCRIPT
</div>
<div class="mysql">
MySQL
</div>
</div>