此效果上网的时候看到的,觉得有趣新奇,于是立马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