文章标题动画Html

最新推荐文章于 2022-05-14 12:45:07 发布

龙图图

最新推荐文章于 2022-05-14 12:45:07 发布

阅读量300

点赞数

分类专栏：网页设计文章标签：动画

本文链接：https://blog.csdn.net/xingyueyezi01/article/details/78128153

版权

网页设计专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
文章标题动画Html

<!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-Ty
复制链接

扫一扫