css开发第一个字符制作圆形文字图标效果,非常简单,先固定一个圆形span标签宽高为,圆角 50%,然后设定行高,让字符垂直居中,设定 overflow: hidden,限制字符溢出,然后设定 letter-spacing: 200px,让字符间距变大,不让第二个字符显示到span中,然后设定 text-indent: 12px,这个字符图标就用css实现了。
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>04 第一个字符串生成文字图标</title> </head> <body> <div> <ul> <li><span>第一个字符串生成文字图标</span>第一个字符串生成文字图标</li> <li><span>用CSS可以做什么?</span>用CSS可以做什么?</li> <li><span>前端的致命诱惑</span>前端的致命诱惑</li> </ul> </div> </body> </html>
CSS代码
*{ margin: 0; padding: 0; list-style: none; transition: .5s; } html,body{ background-color: #f5f5f5; color: #fff; font-size: 14px; } .app{ width: 100%; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; } .app ul { max-width: 300px; } .app ul li{ width: 100%; color: #152239; font-size: 16px; line-height: 42px; margin: 15px 0; float: left; } .app ul li span{ width: 42px; height: 42px; line-height: 40px; color: #1E47ED; font-size: 18px; font-weight: 700; text-indent: 12px; border-radius: 50%; display: block; float: left; overflow: hidden; background-color: #eaeaea; letter-spacing: 20px; margin-right: 15px; }
帝国CMS教程
织梦cms教程
discuz教程
ecshop教程
phpcms教程
wordpress教程
苹果cms教程
php教程
数据库教程
微信小程序教程
python教程
css教程
js教程
视频教程
电子书
最新更新- 01 text-decoration上 中 下划线使用方法 2个月前
- 02 哀悼日网站变灰色方法 2个月前
- 03 全套@media响应式布局代码方案分享 3个月前
- 04 less响应式布局方案分享 3个月前
- 05 css开发第一个字符制作圆形文字图标效果 3个月前
- 01 为什么bootstrap国内很少人使用 620热度
- 02 IE不显示加载iconfont阿里巴巴图标的解决方法 411热度
- 03 CSS文字超出省略号显示 329热度
- 04 分享IE6 PNG 透明的几种方法 253热度
- 05 CSS定位控制上下左右坐标教程 247热度