css3 transition 的运用案例

transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay

复制下面代码新建index.html文件保存即可查看动画效果;

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>css3滚动效果简单示例</title>
<script type="text/javascript">
    document.documentElement.style.fontSize = document.documentElement.clientWidth /768*100 + 'px';
</script>
</head>
<style type="text/css">
body {
margin: 0 auto;
font-size: 16px;
color: #121212;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
position: relative;
}
body, p, div, h1, h2, h3, h4, h5, h6, button, input, ol, li, ul, dl, dt, dd, img, table, tr, td, th, select {
margin: 0;
padding: 0;
-webkit-appearance: none;
border: 0;
list-style: none;
box-sizing: border-box;
}
.main .main_div{
width:100%;
}
.main .bottom{
border:0.008rem solid rgba(14,253,255,0.5);
width:100%;
min-height:60px;
position:relative;
padding:0.08rem 0.05rem;
}
.main .bottom h3{
font-size:0.08rem;
color:#fff;
margin-bottom:0.05rem;
text-align:center;
}
.main{
width: 25%; margin: 0 auto;
}
.main .bottom .biaoge{
min-height:200px;
}
.main .bottom .biaoge_list{
overflow:hidden;
position: relative;
}
.main .bottom .biaoge_list .biaoge_lists .ul_list{
overflow:hidden;
position: relative;
}
.main .bottom .biaoge_list .biaoge_lists .ul_listall{
-webkit-animation: 14s gundong linear infinite normal;
animation: 14s gundong linear infinite normal;
position: relative;
}
@keyframes gundong {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -30vh, 0);
transform: translate3d(0, -30vh, 0);
}
}
.main .bottom .biaoge_list ul{
display:flex;
display: -webkit-flex;
width:100%;
}
.main .bottom .biaoge_list .ul_title{
background: linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
background: -ms-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
background: -webkit-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
background: -moz-linear-gradient(left, rgba(255,255,255,0.1), rgba(255,255,255,0.5), rgba(255,255,255,0.1));
}
.main .bottom .biaoge_list .ul_con{
border-bottom:0.008rem solid rgba(14,253,255,0.5);
}
.main .bottom .biaoge_list ul li{
width:20%;
text-align:center;
color:#fff;
font-size:0.06rem;
height:0.2rem;
line-height:0.2rem;
}
.main .bottom .biaoge_list ul li:frist-child{
text-align:left;
}
</style>
<body>
<div class="main" style="background: #03A9F4;">
<div class="main_div">
<div class="bottom">
<h3>这里是标题</h3>
<div class="biaoge biaoge_list" style="width:100%; height:36vh">
<div class="biaoge_lists">
<ul class="ul_title">
<li>用户</li>
<li>类型号</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<div class="ul_list">
<div class="ul_listall">
<ul class="ul_con">
<li>张三</li>
<li>11</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>12</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>13</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>14</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>15</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>16</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>11</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>12</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>13</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>14</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>15</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
<ul class="ul_con">
<li>张三</li>
<li>16</li>
<li>类别一</li>
<li>类别二</li>
<li>类别三</li>
</ul>
</div>
   </div>
   </div>
</div>
</div>
</div>
</div>
</body>
</html>

点赞(6) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部