这篇博客介绍了一个有趣的技巧，通过JavaScript动态地将预定义的CSS样式写入style标签，从而实现了一只安卓机器人的动态绘制效果。作者从网上获取灵感，F12查看源代码，并详细解释了实现这一效果的原理。代码可直接复制运行。
此效果上网的时候看到的，觉得有趣新奇，于是立马F12查看源代码，平时习惯于操作body标签中的元素，忽视了除body标签中之外的标签 ，殊不知style标签也能这么玩
实现原理：
通过js，定时的逐个读取写好的css样式代码，逐个写入到style标签中，即可实现这种看起来很神奇的效果
代码如下，直接全部复制即可演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.code-wrapper {
flex: 1;
height: 155px;
padding: 10px;
}
.preview-wrapper {
flex: 1;
height: 50%;
}
#code {
overflow: hidden;
height: 100%;
}
.actions {
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
}
.actions>button {
margin: 10px;
background: #ddd;
padding: 8px 10px;
border: none;
}
.actions>button.active
最低0.47元/天 解锁文章
627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
