一、引入资源文件

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

二、Fade（渐隐渐现效果）

<div class="ui fade reveal">
	<div class="visible content">
		<img src="./img/square-image.png" alt="" class="ui small image">
	</div>
	<div class="hidden content">
		<img src="./img/ade.jpg" alt="" class="ui small image">
	</div>
</div>
<div class="ui fade reveal small image">
	<div class="visible content">
		<img src="./img/square-image.png" alt="">
	</div>
	<div class="hidden content">
		<img src="./img/ade.jpg" alt="">
	</div>
</div>

三、Move（左右移动效果）

<div class="ui move left reveal small image">
	<div class="visible content">
		<img src="./img/square-image.png" alt="">
	</div>
	<div class="hidden content">
		<img src="./img/ade.jpg" alt="">
	</div>
</div>
<div class="ui move right reveal small image">
	<div class="visible content">
		<img src="./img/square-image.png" alt="">
	</div>
	<div class="hidden content">
		<img src="./img/ade.jpg" alt="">
	</div>
</div>
<div class="ui move up reveal small image">
	<div class="visible content">
		<img src="./img/square-image.png" alt="">
	</div>
	<div class="hidden content">
		<img src="./img/ade.jpg" alt="">
	</div>
</div>
<div class="ui move down reveal small image">
	<div class="visible content">
		<img src="./img/square-image.png" alt="">
	</div>	
    <div class="hidden content">
		<img src="./img/ade.jpg" alt="">
	</div>
</div>

四、Rotate（旋转揭示效果）

<div class="ui small circular rotate right reveal image">
	<img src="./img/square-image.png" alt="" class="visible content">
	<img src="./img/ade.jpg" alt="" class="hidden content">
</div>
<div class="ui small circular rotate left reveal image">
	<img src="./img/square-image.png" alt="" class="visible content">
	<img src="./img/ade.jpg" alt="" class="hidden content">
</div>

五、实际效果

原文作者：絷缘
作者邮箱：zhiyuanworkemail@163.com
原文地址：https://zhiyuandnc.github.io/6TaBTojkN/
版权声明：本文为博主原创文章，转载请注明原文链接作者信息