window lcd css,纯CSS实现液晶字体效果
/*The Digits*/.light{width:300px;background:#f4f5f7;height:60px;text-align:center;
}.digits div{text-align:left;position:relative;width:28px;height:50px;display:inline-block;margin:0 4px;
}.light .digits div span{background-color:#272e38;border-color:#272e38;
}.digits div span{opacity:0;position:absolute;-webkit-transition:0.25s;-moz-transition:0.25s;transition:0.25s;
}.digits div span:before,
.digits div span:after{content:‘‘;position:absolute;width:0;height:0;border:5px solid transparent;
}.digits .d1{height:5px;width:16px;top:0;left:6px;
}.digits .d1:before{border-width:0 5px 5px 0;border-right-color:inherit;left:-5px;
}.digits .d1:after{border-width:0 0 5px 5px;border-left-color:inherit;right:-5px;
}.digits .d2{height:5px;width:16px;top:24px;left:6px;
}.digits .d2:before{border-width:3px 4px 2px;border-right-color:inherit;left:-8px;
}.digits .d2:after{border-width:3px 4px 2px;border-left-color:inherit;right:-8px;
}.digits .d3{height:5px;width:16px;top:48px;left:6px;
}.digits .d3:before{border-width:5px 5px 0 0;border-right-color:inherit;left:-5px;
}.digits .d3:after{border-width:5px 0 0 5px;border-left-color:inherit;right:-5px;
}.digits .d4{width:5px;height:14px;top:7px;left:0;
}.digits .d4:before{border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;
}.digits .d4:after{border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;
}.digits .d5{width:5px;height:14px;top:7px;right:0;
}.digits .d5:before{border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;
}.digits .d5:after{border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;
}.digits .d6{width:5px;height:14px;top:32px;left:0;
}.digits .d6:before{border-width:0 5px 5px 0;border-bottom-color:inherit;top:-5px;
}.digits .d6:after{border-width:0 0 5px 5px;border-left-color:inherit;bottom:-5px;
}.digits .d7{width:5px;height:14px;top:32px;right:0;
}.digits .d7:before{border-width:0 0 5px 5px;border-bottom-color:inherit;top:-5px;
}.digits .d7:after{border-width:5px 0 0 5px;border-top-color:inherit;bottom:-5px;
}
/*1*/.digits div.one .d5,
.digits div.one .d7{opacity:1;
}
/*2*/.digits div.two .d1,
.digits div.two .d5,
.digits div.two .d2,
.digits div.two .d6,
.digits div.two .d3{opacity:1;
}
/*3*/.digits div.three .d1,
.digits div.three .d5,
.digits div.three .d2,
.digits div.three .d7,
.digits div.three .d3{opacity:1;
}
/*4*/.digits div.four .d5,
.digits div.four .d2,
.digits div.four .d4,
.digits div.four .d7{opacity:1;
}
/*5*/.digits div.five .d1,
.digits div.five .d2,
.digits div.five .d4,
.digits div.five .d3,
.digits div.five .d7{opacity:1;
}
/*6*/.digits div.six .d1,
.digits div.six .d2,
.digits div.six .d4,
.digits div.six .d3,
.digits div.six .d6,
.digits div.six .d7{opacity:1;
}
/*7*/.digits div.seven .d1,
.digits div.seven .d5,
.digits div.seven .d7{opacity:1;
}
/*8*/.digits div.eight .d1,
.digits div.eight .d2,
.digits div.eight .d3,
.digits div.eight .d4,
.digits div.eight .d5,
.digits div.eight .d6,
.digits div.eight .d7{opacity:1;
}
/*9*/.digits div.nine .d1,
.digits div.nine .d2,
.digits div.nine .d3,
.digits div.nine .d4,
.digits div.nine .d5,
.digits div.nine .d7{opacity:1;
}
/*0*/.digits div.zero .d1,
.digits div.zero .d3,
.digits div.zero .d4,
.digits div.zero .d5,
.digits div.zero .d6,
.digits div.zero .d7{opacity:1;
}
/*dot*/.digits div.dot{width:5px;
}.dot:after{width:5px;height:5px;content:‘‘;position:absolute;left:0;bottom:0px;background-color:#272e38;
}
window lcd css,纯CSS实现液晶字体效果相关推荐
- css实现液晶字体效果
<!DOCTYPE html> <html lang="zh-cn"><head><meta charset="utf-8&qu ...
- 轮回眼css,纯CSS如何实现血轮眼+轮回眼特效(代码详解)
本篇文章给大家介绍一下使用纯CSS实现血轮眼+轮回眼特效的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助. 效果(完整代码在底部) 其实实现并不难,都是重复的代码比较多. 实现(可 ...
- 【Web】CSS实现抖音风格字体效果(设置文本阴影)
简单记录 -慕课网- 步骤一:抖音风格字体效果 案例:抖音风格的字体特效. 实现这个 需要设置 网页背景颜色 字体颜色 字体大小 文本阴影 重点介绍如何设置文本阴影 CSS的文本阴影text-shad ...
- html 文本溢出 兼容,CSS - 纯css实现多行文本溢出省略(兼容所有浏览器)
前言 多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果,但麻 ...
- b站图片css,纯CSS打造BiliBili样式博客主题
前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...
- html hover图片效果,CSS第9款:Imagehover.css 纯CSS打造的图片悬停效果
用过很多图片县停效果,说实在话,很多都不好用.我大致说一下原因: 1.对基础CSS影响比较大: 2.附加的插件太多: 3.还要引用有一些JS. 而CSS3的诞生,对我们前端开发来说,有了质的飞跃!下边 ...
- html三角形下拉列表,CSS—纯CSS实现三角图形(常用于带指引效果的小三角,下拉列表的小三角等)...
常用情况,如下图 图片.png 图片.png CSS代码 .we-chat-info::after{ position: absolute; top: 109px; right: -8px; cont ...
- CSS:纯css样式实现左右两侧文字中间填充点或线(仿账单报表样式),自适应
效果图: 实现原理很简单,使用flex布局,中间的填充使用border属性,看似是很多点,其实是一个盒子的border. 并且自动适应填充. html代码: <div class="t ...
- webkit内核 css,纯CSS改变webkit内核浏览器的滚动条样式
基于webkit的浏览器现在可以自定义其滚动条的样式了,实现代码如下: 复制代码代码如下: ::-webkit-scrollbar/*整体部分*/ { width: 10px; height:10px ...
最新文章
- maven项目中找不到Maven Dependencies解决办法
- Android Studio 开始运行错误
- php替换中文,PHP中文替换
- JeeSite 企业信息化快速开发平台
- Android 系统性能优化(45)---Android 多线程
- uni-app微信小程序登录授权
- angularjs -- 监听angularJs列表数据是否渲染完毕
- python 调用github的api,呈现python的受欢迎的程度
- matlab 矩阵维度一致,错误使用 / 矩阵维度必须一致。
- “网络蚂蚁”的Java实现
- Xcode 之真机调试
- PyQt5 关于消息盒子QMessageBox 不显示消息盒子且出现内存不足的问题
- Python入门进阶:68 个 Python 内置函数详解
- Mac Zoc设置
- Java实现哈希加密(HmacSHA1、HmacMD5、HmacSHA256、HmacSHA512)
- ABB 120 六轴机械手臂编程调试(四) 三菱plc控制器配套程序
- 利用PhoneGap技术将“捕鱼达人”网页游戏移植到Android手机
- Debian 制作U盘安装盘启动器
- 【GXOI/GZOI2019】逼死强迫症【递推】【矩阵】
- 【调剂】内蒙古农业大学2020年硕士研究生调剂公告(一)