svg动画用复杂交互动画改善用户体验-练习

书籍中的练习,自己看着效果按照自己的感觉瞎搞的demo,懒得写于是直接贴代码把!!!

发现挺多人搜索这个关键字的(我猜测是下书籍📚的吧hhh)⬇️那我就放pdf吧

书籍我也是通过网络寻找,无意传播

链接: pdfDownload 提取码: 6znw 复制这段内容后打开百度网盘手机App,操作更方便哦

如有侵权,请联系本人立即删除 QQEmail istianlei@qq.com 谢谢🙏🙏🙏

书籍Demo
源码

HTML

随意写的,主要用svg画一些线条和圆,具体的大家可以参考svg文档把

1
2
3
4
5
6
7
8
...
<svg class="magnifier" vieBox="0 0 300 46">
<!-- 圆 -->
<circle class="magnifier-c" cx="20" cy="20" r="16" fill="none" stroke="#fff"></circle>
<!-- 线 -->
<line class="magnifier-l-c" x1="10" y1="10" x2="20" y2="20" fill="none" stroke="#fff" />
</svg>
...

CSS

css部分写得比较乱(我真垃圾!!!)

主要通过Element添加class来切换(能用css的就不用js)

随便贴一点意思意思emmm

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.magnifier-l-c,
.line-line,
.main input {
/* 避免引起回流 */
visibility: hidden;
opacity: 0;
}

.magnifier.open .magnifier-l-c,
.main.open .line-line,
.main.open input {
/* 避免引起回流 */
visibility: visible;
opacity: 1;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 获取Element
let magnifier = document.querySelector('.magnifier')
let main = document.querySelector('.main')
let line = document.querySelector('.line')
// set click
magnifier.onclick = function() {
// 判断是否有class
let hasOpen = magnifier.classList.contains('open')
console.log(hasOpen)
// 设置 class
if (hasOpen) {
magnifier.classList.remove('open')
main.classList.remove('open')
line.classList.remove('open')
} else {
magnifier.classList.add('open')
main.classList.add('open')
line.classList.add('open')
}
}

okk了, 大概就这么多,然后具体的可以看源码和书籍Demo

书籍Demo
源码

打赏测试
显示 Gitment 评论