文章标题动画Html

来源：互联网发布：linux环境下面安装字体编辑：程序博客网时间：2024/06/05 11:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style> div{    margin:30px;    width:200px;    height:100px;    background-color:red;}.translate2{    margin:30px;    width:200px;    height:100px;    background-color:red;    /*transform:rotate(45deg);*/    /*-ms-transform:rotate(45deg); /**/ Internet Explorer */    /*-moz-transform:rotate(45deg); *//* Firefox */    /*-webkit-transform:rotate(45deg); *//* Safari 和 Chrome */    /*-o-transform:rotate(45deg);*/    transform:translate(30px,-120px);    -ms-transform:translate(30px,-120px);/* Internet Explorer */    -moz-transform:translate(30px,-120px); /* Firefox */    -webkit-transform:translate(30px,-120px); /* Safari 和 Chrome */    -o-transform:translate(30px,-120px);}.translate{    transform:rotate(10deg);    -ms-transform:rotate(10deg); /* Internet Explorer */    -moz-transform:rotate(10deg); /* Firefox */    -webkit-transform:rotate(10deg);/* Safari 和 Chrome */    -o-transform:rotate(10deg);}.skew{    transform:skew(10deg);    -ms-transform:skew(10deg); /* Internet Explorer */    -moz-transform:skew(10deg); /* Firefox */    -webkit-transform:skew(30deg);/* Safari 和 Chrome */    -o-transform:skew(10deg);}.transition{    width:100px;    height:100px;    background:blue;    transition:width 2s;    -moz-transition:width 2s; /* Firefox 4 */    -webkit-transition:width 2s; /* Safari and Chrome */    -o-transition:width 2s; /* Opera */}.transition:hover{    width:1000px;}.animation{    width:100px;    height:100px;    background:red;    position:relative;    animation:mymove 1s infinite;    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/}@keyframes mymove{    from {left:0px;}    to {left:1000px;}}@-webkit-keyframes mymove /*Safari and Chrome*/{    from {left:0px;}    to {left:1000px;}}</style></head><body><div>    源图案</div><div class="translate translate2">    旋转加移位</div><div class="skew">    倾斜</div><div class="transition">    倾斜</div><div class="animation">    动画</div></body></html>
阅读全文
0 0
文章标题 动画Html

文章标题动画Html
