返回顶部
首页 > 资讯 > 精选 >纯CSS如何实现红绿灯效果
  • 594
分享到

纯CSS如何实现红绿灯效果

2023-06-08 09:06:24 594人浏览 泡泡鱼
摘要

这篇文章主要介绍纯CSS如何实现红绿灯效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、下面的代码输出的内容是什么?function O(name){    th

这篇文章主要介绍纯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

给你一个div,用纯css写出一个红绿灯效果,按照红黄绿顺序依次循环点亮(无限循环)

当时没写出来,现场手写这么多代码是有难度的,下面是我后面实现代码(省略了浏览器兼容性前缀)

<div id="lamp"></div>@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如何实现红绿灯效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网精选频道!

--结束END--

本文标题: 纯CSS如何实现红绿灯效果

本文链接: https://www.lsjlt.com/news/253392.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 纯CSS如何实现红绿灯效果
    这篇文章主要介绍纯CSS如何实现红绿灯效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、下面的代码输出的内容是什么?function O(name){    th...
    99+
    2023-06-08
  • javascript如何实现红绿灯
    本篇内容介绍了“javascript如何实现红绿灯”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • react如何实现红绿灯
    本篇内容介绍了“react如何实现红绿灯”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!react实现红绿灯的方法:1、引入“import R...
    99+
    2023-07-05
  • Vue 实现新国标红绿灯效果实例详解
    目录引言1 组件分析1.1 lamp1.2 lamp-group1.3 traffic-lamp2 全局文件定义2.1 样式变量2.2 常量定义2.3 导入资源3 组件开发3.1 实...
    99+
    2024-04-02
  • C++ OpenCV实现之实现红绿灯识别
    目录前言一、轮廓识别相关原理什么是轮廓检测轮廓提取函数findContours二、案例实现Step1:初始化配置Step2:进行帧处理Step3:膨胀腐蚀处理Step4:红绿灯提示判...
    99+
    2022-11-13
    C++ OpenCV红绿灯识别 OpenCV红绿灯识别 C++ OpenCV 识别
  • css如何实现聚光灯效果
    这篇文章将为大家详细讲解有关css如何实现聚光灯效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   简介   CSSVariables,一个并不是那么新的东西,但...
    99+
    2024-04-02
  • 纯css3怎么实现走马灯效果
    小编给大家分享一下纯css3怎么实现走马灯效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!主要用到的css3技术有:keyfr...
    99+
    2024-04-02
  • 如何使用纯css实现开关效果
    这篇文章将为大家详细讲解有关如何使用纯css实现开关效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。首先是构思我们使用<input type="checkbox">标签来...
    99+
    2023-06-08
  • 纯css如何实现照片墙3D效果
    小编给大家分享一下纯css如何实现照片墙3D效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!准备材料:准备材料就是没什么材料,自己麻溜赶快的去:百度找几张美女的照片来测试即可。html代码:<!DOCTYPE&nb...
    99+
    2023-06-08
  • JS面试异步模拟红绿灯实现详解
    目录引言问题拆解代码设计引言 异步的问题是程序员绕不开的话题,无论在实际开发上还是在面试中,我们总会遇到各种头疼的问题,但是细细品味,其实这些问题总能拓展我们的思路,激发我们的思维能...
    99+
    2023-01-10
    JS面试异步模拟红绿灯 JS 异步面试
  • 使用纯CSS如何实现3D旋转效果
    小编给大家分享一下使用纯CSS如何实现3D旋转效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!主要使用CSS中的 preserve-3d 、perspective 属性实现3D效果效果HTML代码<body>...
    99+
    2023-06-08
  • 如何使用纯CSS实现3D按钮效果
    小编给大家分享一下如何使用纯CSS实现3D按钮效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css巧妙利用了box-shadow来实现3D物体的立体感,当按钮...
    99+
    2023-06-08
  • 如何使用纯CSS实现表头固定效果
    这篇文章给大家分享的是有关如何使用纯CSS实现表头固定效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   纯CSS实现表头固定之所以难,主要在两点:   1、占有最大市场...
    99+
    2024-04-02
  • 纯HTML和CSS如何实现JD轮播图效果
    小编给大家分享一下纯HTML和CSS如何实现JD轮播图效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!使用了纯HTML和CSS实现了JD的轮播图,没有加动态效果,主要是使用了定位的知识。    ,如图为两个侧边箭头图片。...
    99+
    2023-06-08
  • 纯css如何实现立体摆放图片效果
    这篇文章主要介绍纯css如何实现立体摆放图片效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.元素的 width/height/padding/margin 的百分比基准设置 一个元素 width/he...
    99+
    2023-06-08
  • JS如何实现跑马灯效果
    这篇文章将为大家详细讲解有关JS如何实现跑马灯效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果如下:(动态效果可复制代码查看,案例中的图片可自行选择添加)代码如下:...
    99+
    2024-04-02
  • Vue如何实现跑马灯效果
    这篇文章主要介绍Vue如何实现跑马灯效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!跑马灯效果说明:单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动完整代码 (注...
    99+
    2023-06-25
  • 如何使用CSS实现图片走马灯动态效果
    小编给大家分享一下如何使用CSS实现图片走马灯动态效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!由于项目需要实现一个图片的走马灯效果。查看了大部份通用vue的组件库,比较少看到这类组件...
    99+
    2024-04-02
  • 如何使用纯CSS实现底层毛玻璃效果
    这篇“如何使用纯CSS实现底层毛玻璃效果”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“如何使用纯CSS实现底层毛玻璃效果”,小编整理了以下知识点,请大家跟着小...
    99+
    2024-04-02
  • 如何使用纯CSS实现滚动进度条效果
    这篇文章将为大家详细讲解有关如何使用纯CSS实现滚动进度条效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作