<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
height: 100%;
background: white;
}
h1 {
color: black;
text-align: center;
font-size: 10vw;
position: relative;
font-weight: 900;
text-transform: uppercase;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
margin: 0;
}
h1:before,
h1:after {
content: attr(data-heading);
position: absolute;
left: 0;
width: 100%;
text-align: center;
}
h1:before {
clip-path: polygon(0 0, 100% 0%, 100% 39%, 0 67%);
color: white;
text-shadow: 3px -2px 5px white, -3px 3px 4px white;
background: white;
}
h1:after {
clip-path: polygon(0 0, 100% 0%, 100% 37%, 0 65%);
color: black;
animation: fracture 5s infinite ease;
}
@keyframes fracture {
0% {
transform: translateX(0);
}
50% {
transform: translate(-20px, 2%);
}
}
</style>
</head>
<body>
<h1 contenteditable data-heading="悠酒网">悠酒网</h1>
</body>
<script type="text/javascript">
var h1 = document.querySelector("h1");
h1.addEventListener("input", function() {
this.setAttribute("data-heading", this.innerText);
});
</script>
</html>
原文：https://www.cnblogs.com/jimyking/p/14727550.html