分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

【转载】CSS3 文字溶解效果

发布时间:2023-09-06 01:11责任编辑:林大明关键词:CSS

代码如下:

<!DOCTYPE html><html ><head> ?<meta charset="UTF-8"> ?<title>CodePen - word animation | word filter</title><style>* { ?box-sizing: border-box;}html, body { ?height: 100%; ?width: 100%; ?background-color: black; ?padding:0; ?margin:0;}.container { ?width: 100%; ?height: 100%; ?position: relative; ?filter: contrast(20); ?background-color: black; ?overflow: hidden;}h1 { ?font-family:consolas, 黑体; ?color: white; ?font-size: 4rem; ?text-transform: uppercase; ?line-height: 1; ?animation: letterspacing 5s infinite alternate ease-in-out; ?display: block; ?position: absolute; ?left: 50%; ?top: 40%; ?transform: translate3d(-50%, -50%, 0); ?letter-spacing: -2rem; ?white-space:nowrap; ??padding:0; ?margin:0;}@keyframes letterspacing { ?0% { ???letter-spacing: -2rem; ???filter: blur(1rem); ???color:red; ?} ?50% { ???filter: blur(0.5rem); ?} ?80% { ???letter-spacing: .5rem; ???filter: blur(0.1rem); ???color: #fff; ?} ?100% { ???letter-spacing: 0.5rem; ???filter: blur(0rem); ???color: #fff; ?}}</style></head><body><div class="container"> ?<h1>ABCDE 中文测试</h1></div></body></html> 

参考来源:http://www.cnblogs.com/coco1s/p/7519460.html

【转载】CSS3 文字溶解效果

原文地址:http://www.cnblogs.com/zjfree/p/7522304.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved