给网页添加个魔方旋转效果
本文为博主原创文章,转载留个版权即可(例如:本文转载小枫网络:www.xfabe.com)
效果展示:
首先把这串代码粘贴到<head>里面(引入外部的css)
<link rel="stylesheet" href="https://links.xfyun.club/xfyun/Magic-Cube.css">
再把下面这部分代码放到</body>上面
文字区:
<div class="xf_box"> <div class="xf_rubik_cube"> <a class="handsome_xf" href="#!">小枫好帅</a> <a class="handsome_xf" href="#!">我也这么认为</a> <a class="handsome_xf" href="#!">他真的好帅</a> <a class="handsome_xf" href="#!">我爱si他了</a> <a class="handsome_xf" href="#!">想给他生猴子</a> <a class="handsome_xf" href="#!">mua~枫!</a> </div> </div>
图片区:
<div class="xf_box"> <div class="xf_rubik_cube"> <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a> <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a> <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a> <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a> <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a> <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a> </div> </div>