使用纯CSS如何实现文字断开的动画效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于成都企业网站建设,高端网页制作,对成都地磅秤等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业seo优化排名优化,H5建站,响应式网站。
https://github.com/comehope/front-end-daily-challenges/tree/master/012-broken-text-effects
定义 dom,只有一个元素,元素有一个 data-text 属性,属性值等于元素内的文本:
BREAK
居中显示:
html, body { height: 100%; display: flex; align-items: center; justify-content: center; }
设置渐变背景色:
body { background: linear-gradient(brown, sandybrown); }
设置文本的字体字号:
.text { font-size: 5em; font-family: "arial black"; }
利用伪元素增加文字:
.text { position: relative; } .text::before, .text::after { content: attr(data-text); position: absolute; top: 0; left: 0; color: lightyellow; }
设置左侧文字的遮罩:
.text::before { background-color: darkgreen; clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%); }
设置右侧文字的背景和遮罩:
.text::after { background-color: darkblue; clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%); }
当鼠标划过时,遮罩的文字分别向两侧偏移:
.text::before, .text::after { transition: 0.2s; } .text:hover::before { left: -0.15em; } .text:hover::after { left: 0.15em; }
隐藏辅助元素,包括原始文字和伪元素的背景色:
.text { color: transparent; } .text::before { /*background-color: darkgreen;*/ } .text::after { /*background-color: darkblue;*/ }
两侧文字增加歪斜效果:
.text:hover::before { transform: rotate(-5deg); } .text:hover::after { transform: rotate(5deg); }
微调文字的高度:
.text:hover::before { top: -0.05em; } .text:hover::after { top: 0.05em; }
大功告成!
感谢各位的阅读!看完上述内容,你们对使用纯CSS如何实现文字断开的动画效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注创新互联行业资讯频道。