本篇文章给大家带来的内容是关于如何使用纯css 实现一个没有dom元素的动画效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
代码解读
没有 dom 元素，直接写 css。
设置页面空间：
body { position: fixed; margin: 0; width: 100vw; height: 100vh;}
登录后复制
用伪元素设置背景图案：
body::before { content: ''; position: fixed; width: 200vmax; height: 200vmax; background-color: steelblue; color: turquoise; background-image: linear-gradient( 45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%), linear-gradient( 45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%); background-position: 0 0, 5vmax 5vmax; background-size: 10vmax 10vmax;
登录后复制
平移背景图案：
body::before { top: 50%; left: 50%; animation: 9s move infinite ease-in-out alternate;}@keyframes move { from { left: -40%; top: -40%; } to { left: -60%; top: -60%; }}
登录后复制
让背景图案转动起来：
立即学习“前端免费学习笔记（深入）”；
body::before { animation: 9s move infinite ease-in-out alternate, 9s -1.5s rotating infinite ease-in-out alternate;}@keyframes rotating { to { transform: rotate(180deg); }}
登录后复制
平移页面：
body { top: 50%; left: 50%; animation: 3s move infinite ease-in-out alternate;}
登录后复制
缩放页面：
body { animation: 3s move infinite ease-in-out alternate, 3s zoom infinite ease-in-out alternate;}@keyframes zoom { to { transform: scale(10); }}
登录后复制
最后，增加变色效果：
@keyframes rotating { to { transform: rotate(180deg); filter: hue-rotate(1turn); }}
登录后复制
大功告成！
相关推荐：
如何使用纯CSS实现一只移动的小白兔动画效果
如何使用纯CSS实现一只移动的小白兔动画效果
以上就是如何使用纯CSS 实现一个没有DOM元素的动画效果的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2893792.html
