css设置显示隐藏动画的方法:首先创建一个HTML示例文件;然后创建一个<div>标签,并设置一些文字;最后使用“@-webkit-keyframes”对fadenum类设置淡出淡入效果即可。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

打开html开发软件新建一个html代码页面。如图:

53ef8743e9511b14580805952b057b0.png

在html代码页面创建一个<div>标签,然后给这个<div>添加一个class类并设置一些文字,用于显示淡出淡入动画效果(那里中使用的类名:fadenum,下面将直接对该类进行描述)。如图:

01f8b6d0613f9ef27786f5ac7d0a51c.png

设置<div>类样式。创建<style>标签,在这个标签里面设置fadenum类的宽、高、背景色,方便接下来查看淡出淡入效果。如图:

dfb9a660e2d120ae9626a1bb1b6591c.png

保存html代码后使用浏览器打开即可看到设置<div>样式显示效果。

dad087ee94dfae8ba24d6783d881e7a.png

添加淡出淡入动画效果。使用@-webkit-keyframes对fadenum类设置淡出淡入效果。默认开始是显示,紧接着就是淡出,然后再淡入。

【推荐学习:css视频教程】

淡出淡入效果代码:

@-webkit-keyframes fadenum{ /*设置内容由显示变为隐藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}

6494b35d2de223c3a7dfde707023b64.png

为fadenum类添加淡出淡入效果,直接把代码添加到fadenum类即可。

使用animation进行淡出淡入效果进行时间、动画方式进行设置。如图:

代码:

-webkit-animation: fadenum 2s infinite;
    -moz-animation: fadenum 2s infinite;
  animation:fadenum 2s infinite;

bac9282839ecf5068dcb0e711117f59.png

保存html代码使用浏览器打开即可看到<div>标签自动淡出淡入效果。

2204961896d858396f29cd63e3f5c27.png

583f53e3b215461a4e6c63ffd1e640a.png

页面所有代码。可以直接复制所有代码到新建html页面,粘贴保存后使用浏览器打开即可看到效果。

所有代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3显示隐藏效果</title>
<style>
.fadenum{
background-color: #ffce44;
width: 50px;height: 50px;
text-align:center;
line-height:50px;
margin:40px auto;
-webkit-animation: fadenum 2s infinite;
    -moz-animation: fadenum 2s infinite;
  animation:fadenum 2s infinite;
}
@-webkit-keyframes fadenum{ /*设置内容由显示变为隐藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}
@-moz-keyframes fadenum{ /*设置内容由显示变为隐藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}
@-o-keyframes fadenum{ /*设置内容由显示变为隐藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}
@keyframes fadenum{ /*设置内容由显示变为隐藏*/
   0%{opacity: 1;}
   50%{opacity: 0;}
   100%{opacity: 1;}
}
</style>
</head>
<body>
<div class="fadenum">30</div>
</body>
</html>

注意事项

案例中使用@-webkit-keyframes主要针对谷歌内核浏览器,如果存在不兼容其他浏览器需要添加其他浏览器前缀

以上就是css怎么设置显示隐藏动画的详细内容,转载自php中文网

点赞(646) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部