html 进入效果,用css3实现简单的进入效果
這是一個比較簡單的小例子，實現如圖效果
僅僅用css3就可以達到這種效果，代碼如下：
.div {
position: relative;
top: 20px;
height: 300px;
width: 200px;
margin: 0 auto;
background: blue;
float: left;
margin-left: 20px;
}
.div2 {
position: relative;
top: 30px;
height: 300px;
width: 200px;
margin: 0 auto;
background: red;
float: left;
margin-left: 20px;
}
.fadeInLeft {
animation: fadeInLeft;
}
.fadeInDown {
animation: fadeInDown;
}
.fadeInUp {
animation: fadeInUp;
}
.fadeInRight {
animation: fadeInRight;
}
.OneAnimated {
animation-duration: 0.5s;
animation-fill-mode: both;
}
.TwoAnimated {
animation-duration: 1s;
animation-fill-mode: both;
}
.ThreeAnimated {
animation-duration: 1.5s;
animation-fill-mode: both;
}
.FourAnimated {
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes fadeInDown{
0% {
opacity: 0;
transform: translateY(-50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft{
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp{
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInRight{
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
就這樣~
總結
以上是生活随笔為你收集整理的html 进入效果,用css3实现简单的进入效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 某计算机系统20位地址线 8位数据线,同
- 下一篇： html前台检验特殊字符正则,【Qt编程