用html实现一个动态的文字框

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>一个动态的文字框动画</title><link rel="stylesheet" href="./style.css"></head>
<body>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<div class="content"><div class="content_container"><p class="content_container_text">Hello</p><ul class="content_container_list"><li class="content_container_list_item">world !</li><li class="content_container_list_item">friend !</li><li class="content_container_list_item">users !</li><li class="content_container_list_item">everybody !</li></ul></div>
</div>
</body>
</html>

body {width: 100%;height: 100%;position: fixed;background-color: #5e3434;
}.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);height: 160px;overflow: hidden;font-family: "Lato", sans-serif;font-size: 35px;line-height: 40px;color: #fff;
}.content_container {font-weight: 600;overflow: hidden;height: 40px;padding: 0 40px;
}.content_container:before {content: "[";left: 0;
}.content_container:after {content: "]";position: absolute;right: 0;
}.content_container:before, .content_container:after {position: absolute;top: 0;color: #a04d16;font-size: 42px;line-height: 40px;-webkit-animation-name: opacity;animation-name: opacity;-webkit-animation-duration: 2s;animation-duration: 2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}.content_container_text {display: inline;float: left;margin: 0;
}.content_container_list {margin-top: 0;padding-left: 110px;text-align: left;list-style: none;-webkit-animation-name: change;animation-name: change;-webkit-animation-duration: 10s;animation-duration: 10s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}.content_container_list_item {line-height: 40px;margin: 0;
}@-webkit-keyframes opacity {0%, 100% {opacity: 0;}50% {opacity: 1;}
}@keyframes opacity {0%, 100% {opacity: 0;}50% {opacity: 1;}
}@-webkit-keyframes change {0%, 12.66%, 100% {transform: translate3d(0, 0, 0);}16.66%, 29.32% {transform: translate3d(0, -25%, 0);}33.32%, 45.98% {transform: translate3d(0, -50%, 0);}49.98%, 62.64% {transform: translate3d(0, -75%, 0);}66.64%, 79.3% {transform: translate3d(0, -50%, 0);}83.3%, 95.96% {transform: translate3d(0, -25%, 0);}
}@keyframes change {0%, 12.66%, 100% {transform: translate3d(0, 0, 0);}16.66%, 29.32% {transform: translate3d(0, -25%, 0);}33.32%, 45.98% {transform: translate3d(0, -50%, 0);}49.98%, 62.64% {transform: translate3d(0, -75%, 0);}66.64%, 79.3% {transform: translate3d(0, -50%, 0);}83.3%, 95.96% {transform: translate3d(0, -25%, 0);}
}