19Semantic-UI之图片的动画效果
Posted jie-fang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了19Semantic-UI之图片的动画效果相关的知识，希望对你有一定的参考价值。
??在Semantic-UI中定义了很多图片动画效果，可以直接使用。
示例：定义图片动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic UI </title>
<!-- 使用CDN导入js和css 文件-->
<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
<script>
$(function () {
$(".ui.blue.button").on("click",function () {
$("#img").transition("fade");
})
})
</script>
<style>
#img{
width: 15%;
height: 15%;
}
</style>
</head>
<body style="padding: 20px;">
<!-- 定义图片动画 -->
<img src="../images/pic.png" id="img">
<button class="ui blue button">查看</button>
</body>
</html>以上是关于19Semantic-UI之图片的动画效果的主要内容，如果未能解决你的问题，请参考以下文章