html5编辑文档,HTML5带各种趣味动画的文本编辑器
CSS
語言：
CSSSCSS
確定
body {
background-color: #eee;
}
html,
body {
margin: 0px;
height: 100%;
overflow: hidden;
}
.toolbar {
width: 100%;
background: #fff;
padding: 4px 10px;
}
.characters {
display: inline-block;
margin-right: 20px;
vertical-align: top;
}
.characters__item {
border: 1px solid #333333;
border-radius: 0;
display: inline-block;
width: 25px;
height: 25px;
text-align: center;
background-color: #eee;
}
.characters__item--selected {
background: #fff;
}
.characters__item--first {
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
}
.characters__item--last {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
.characters__item--middle {
border-left-width: 0;
border-right-width: 0;
}
.characters__item--color {
border: 0;
width: 55px;
}
.characters__item__button {
width: 100%;
height: 100%;
cursor: pointer;
}
.characters__item__colorInput {
width: 100%;
cursor: pointer;
}
.bm {
background-color: transparent;
width: 100px;
height: 120px;
display: inline-block;
/*float: left;*/
overflow: hidden;
transform: translate3d(0, 0, 0);
vertical-align: top;
position: absolute;
left: 0;
top: 0;
}
.bm.char {
pointer-events: none;
}
.bm .hoverer {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
}
.bm .loader {
width: 50%;
height: 50%;
background-color: rgba(0, 0, 0, 0);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.bm svg g {
pointer-events: auto;
}
.space {
position: absolute;
transform: translate3d(0, 0, 0);
width: 100px;
height: 120px;
background-color: rgba(255, 0, 0, 0);
pointer-events: none;
}
.line-break {
height: 120px;
width: 0px;
}
.textBox {
position: relative;
top: 0;
left: 0;
overflow-y: auto;
overflow-x: hidden;
height: calc(100% - 56px);
width: 100%;
}
.caret {
position: absolute;
top: 0;
left: 0;
background-color: #333333;
width: 4px;
margin-left: -2px;
animation: blink-animation 1.5s steps(5, start) infinite;
-webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}
.textHelper {
position: absolute;
top: 0;
left: -100%;
/*visibility: hidden;*/
opacity: 0.01;
}
@keyframes blink-animation {
to {
visibility: hidden;
}
}
@-webkit-keyframes blink-animation {
to {
visibility: hidden;
}
}
.title {
float: right;
line-height: 2em;
}
總結
以上是生活随笔為你收集整理的html5编辑文档,HTML5带各种趣味动画的文本编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux下redis的安装及配置.
- 下一篇： 2017年html5行业报告,云适配发布