HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
先看题,别看答案试下吧 ~_~
1、下面的代码输出的内容是什么?
function O(name){
this.name=name||'world';
}
O.prototype.hello=function(){
return function(){
console.log('hello '+this.name)
}
}
var o=new O;
var hello=o.hello();
hello();
分析:
1、O类实例化的时候赋值了一个属性name,默认值为world,那么在实例化的时候并未给值,所以name属性为world
2、O类有一个原型方法hello,该方法其实是一个高阶函数,返回一个低阶函数,精髓就在这个低阶函数中的this,
注意这里的低阶函数其实是在window环境中运行,所以this应该指向的是window
所以我的答案是:'hello undefined'(但这个答案是错误的,哈哈)
圈套:殊不知原生window是有name属性的,默认值为空
所以正确答案应该是:hello
2、给你一个div,用纯css写出一个红绿灯效果,按照红黄绿顺序依次循环点亮(无限循环)
当时没写出来,现场手写这么多代码是有难度的,下面是我后面实现代码(省略了浏览器兼容性前缀)
/*
思路:
总共三个灯,分别红黄绿,要一个一个按顺序点亮,我们可以这样暂定一个循环需要10秒中,每盏灯点亮3秒,
那么在keyframes中对应写法就如下所示(红灯点亮时间为10%--40%,黄灯点亮时间为40%--70%,绿灯点亮时间为70%--100%)
*/
@keyframes redLamp{
0%{background-color: #999;}
9.9%{background-color: #999;}
10%{background-color: red;}
40%{background-color: red;}
40.1%{background-color: #999;}
100%{background-color: #999;}
}
@keyframes yellowLamp{
0%{background-color: #999;}
39.9%{background-color: #999;}
40%{background-color: yellow;}
70%{background-color: yellow;}
70.1%{background-color: #999;}
100%{background-color: #999;}
}
@keyframes greenLamp{
0%{background-color: #999;}
69.9%{background-color: #999;}
70%{background-color: green;}
100%{background-color: green;}
}
#lamp,#lamp:before,#lamp:after{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #999;
position: relative;
}
#lamp{
left: 100px;
animation: yellowLamp 10s ease infinite;
}
#lamp:before{
display: block;
content: '';
left: -100px;
animation: redLamp 10s ease infinite;
}
#lamp:after{
display: block;
content: '';
left: 100px;
top: -100px;
animation: greenLamp 10s ease infinite;
}
总结
以上所述是小编给大家介绍的纯CSS实现红绿灯效果(面试常见),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持!
HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)相关推荐
- ABAP ALV红绿黄灯5步
1.TYPE-POOL引入ICON: TYPE-POOLS:SLIS,ICON. 2.定义一个指示灯字段: FLG TYPE CHAR4, 3.ALV FIELD_SET显示指示灯: US ...
- css实现闪烁的灯,纯CSS实现的闪烁霓虹灯文本动画特效
CSS 语言: CSSSCSS 确定 .text-effect { overflow: hidden; position: relative; -webkit-filter: contrast(110 ...
- dell服务器 指示灯_戴尔R710服务器硬盘出现告警(绿黄灯闪),解决方法
戴尔R710服务器硬盘出现告警(绿黄灯闪),解决方法 2015年11月7日机房打来电话说,一台服务器硬盘出现异常,去机房查看硬盘灯闪的情况,先闪绿灯,再闪黄灯. 戴尔R710服务器, 双300G硬盘做 ...
- 【raid5数据恢复】服务器RAID5中一块硬盘亮黄灯被踢出导致raid崩溃的数据恢复
服务器数据恢复环境: 3U戴尔机架式服务器 SAS接口硬盘 Windows操作系统 100个125GB硬盘组成的RAID5 故障: 一块盘亮黄灯,被raid卡踢出后,raid崩溃.联系北亚数据恢复中心 ...
- html中轮播图跳转,纯 CSS 实现轮播图
大家好,我是 Steven. 今集我们会尝试只用 HTML 和 CSS,实现基础的轮播图效果,当然会有一些功能的缺失,例如不能自动跳转,但我们来看看用 CSS 可以实现到多少. HTML 的部分 打开 ...
- 01超精美渐变色动态背景完整示例【CSS动效实战(纯CSS与JS动效)】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
- css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码,本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
- 纯css导航下拉_纯CSS标签导航
纯css导航下拉 The appearence of "tab" navigation is relatively easy to create, but making a tab ...
- css 跳跃动画,如何使用纯CSS实现方块跳跃的动画(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com/ ...
最新文章
- OSPF 协议中各种邻居状态的含义是什么?
- 某外包程序员炫耀:不用管绩效和代码质量,工作摸鱼,从不加班,没有pua,外包是真的舒服!...
- params(C# 参考)
- 下载anaconda前需要卸载python吗_anaconda安装与卸载
- 转载 foreach比递归效率低
- Oracle DBA的SQL编写技能提升宝典(含SQL资源)
- ajax同步和异步的区别_纯电动汽车搭载的交流异步电机与永磁同步电机有何区别?...
- python自学行吗-零基础如何学习Python?看Python视频就可以吗?
- java对excel加密_java 加密 excel
- 苹果手机录屏软件_手机录屏软件哪个好 好用的手机录屏软件推荐
- outlook邮箱邮件大小限制_如何解除OutLook邮件附件大小限制?成功发送大附件的邮件...
- element-ui el-descriptions取消冒号
- 在c语言的switch 语句中,的case后面的表达式,switch语句中case后面的值必须是什么?...
- Python判断一个词语是不是人名
- 每周工作总结-记录总结自己遇到问题及学习内容,及时分析,找到不足,让自己不断进步
- 6-4 使用函数求素数和 (20 分)
- 【网络工程】7、实操-万达酒店综合项目(一)
- 蓝牙室内定位UWB多技术融合趋势
- Mechatrolink III转EtherCAT网关模块解决方案
- GitChat · 安全 | 聊聊 「密码找回」