html消失,css3消失.html

Document

div{

position: absolute;

width: 100px;

height: 100px;

top: 0;

animation:fadeOut 500s;

-webkit-animation:fadeOut 500s;

background: #0000FF;

}

@keyframes mobbile{

0%{

left: 0;

background-color: #FFA300;

}

50%{

left: 200px;

border-radius: 50%;

background-color: #0f0;

}

100%{

left: 400px;

background-color: #00f;

}

}

@-webkit-keyframes fadeOut {

0% {

opacity: 1; /*初始状态 透明度为0*/

}

50% {

opacity: 0.5; /*中间状态 透明度为0*/

}

100% {

opacity: 0; /*结尾状态 透明度为1*/

}

}

@keyframes fadeOut {

0% {

opacity: 1; /*初始状态 透明度为0*/

}

50% {

opacity: 0.5; /*中间状态 透明度为0*/

}

100% {

opacity: 0; /*结尾状态 透明度为1*/

}

}

@-webkit-keyframes fadeIn {

0% {

opacity: 0; /*初始状态 透明度为0*/

}

50% {

opacity: 0; /*中间状态 透明度为0*/

}

100% {

opacity: 1; /*结尾状态 透明度为1*/

}

}

@keyframes fadeIn {

0% {

opacity: 0; /*初始状态 透明度为0*/

}

50% {

opacity: 0; /*中间状态 透明度为0*/

}

100% {

opacity: 1; /*结尾状态 透明度为1*/

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史