效果如下
下面是完整的js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>change tab</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0 auto;
max-width: 500px;
}
.cube-unit {
fill-opacity: .9;
stroke-miterlimit: 0;
}
.blue-cube {
--mainColor: #009CDE;
--strokeColor: #0079ad;
--lightColor: #00affa;
--darkColor: #008bc7;
}
.pink-cube {
--mainColor: #de0063;
--strokeColor: #ad004e;
--lightColor: #fa0070;
--darkColor: #c7005a;
}
@keyframes moveX {
to {
transform: translateX(var(--translate, 35px));
}
}
@keyframes moveY {
to {
transform: translateY(var(--translate, -35px));
}
}
.m-left,
.m-right {
animation: 2s moveX alternate infinite paused;
}
.m-up,
.m-down {
animation: 2s moveY alternate infinite paused;
}
.m-left {
--translate: -50px;
}
.m-right {
--translate: 50px;
}
svg:hover * {
animation-play-state: running;
}
</style>
</head>
<body>
<svg class="pink-cube" viewBox="0 0 300 230" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="cube" class="cube-unit">
最低0.47元/天 解锁文章
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
