深圳幻海软件技术有限公司 欢迎您!

  • 教你用JavaScript获取大转盘

    案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!我们来用JavaScript编程实战案例,做一个大转盘。当你难以抉择的时候不妨用这个案例来帮你做选择。通过编程实战我们可以学到按钮的点击事件onclick()以及定时器的使用.案例演示每个选择都展示在不同的盒子里,通过点击中间的开始选

  • 现代 CSS 高阶技巧,不规则边框解决方案

    本文是CSSHoudini之CSSPaintingAPI系列第四篇。现代CSS之高阶图片渐隐消失术现代CSS高阶技巧,像Canvas一样自由绘图构建样式!现代CSS高阶技巧,完美的波浪进度条效果!在上三篇中,我们详细介绍了CSSPaintingAPI是如何一步一步,实现自定义图案甚至实现动画效果的!

  • 用HTML CSS 实现简洁美观的时间线(历史年表)

    前几天在B站刷到尼尔后突发奇想,就想给尼尔做一个简单的小网站,在思考如何体现尼尔的世界观的时候想到了使用时间线的方式,将所有时间的事件罗列起来。所以就试着做了一下,这种方式可以很直观的表现一些历史上发生的事情,历史相关主题的一些网站应该可以参考一下首先来看效果以上都是游戏里的一些历史,简单的设计了一

  • 学前端到了CSS阶段,你一定要掌握这9大防御式开发技能

     一、什么是防御式编程防御性编程是一种细致、谨慎的编程方法(习惯)。我们在写代码时常会有“以防万一”的心态,把以防万一有可能出现的情况提前考虑进去,规避以免以防万一出现带来的问题。应用防御性编程技术,你可以侦测到可能被忽略的错误,防止可能会导致灾难性后果的“小毛病”的出现,在时间的运行过程

  • HTML教程②-HTML元素大全(1)

    HTML系列:人人都懂的HTML基础知识-HTML教程HTML元素大全(1)HTML元素大全(2)-表单CSS系列:CSS基础知识筑基常用CSS样式属性CSS选择器大全48式CSS布局秘籍(1)-任督二脉BFC/IFCCSS布局秘籍(2)-6脉神剑CSS动画-transition/animation

  • 05#Web 实战:可拖拽的侧边栏

    效果演示图可拖拽的左、右侧边栏的使用情况还是挺多的,博客园后台管理的左侧边栏就可以拖拽哟!效果演示如下图:HTML代码<divclass="container"><divclass="left"><divclass="resize-bar"></div&gt

  • 设置Radio button 和Checkbox 在disabled 状态的样式

     有时需要在view页面设置标签的状态为disabled,但是客户反映radiobutton和checkbox的颜色很浅,难以识别,尤其是打印后,如下:  可以使用下面的css更改原有的样式input[type="radio"]:checked:disabled{?12

  • react使用sass

    1.安装sass较新的版本不需要配置sass-loader等一系列插件,安装即用。npminstall--save-devsass2.编写App.tsx中的基本DOM更改app.css为app.scss,并删除其中全部内容使用如下代码替换app.tsx中的内容import"./App.scss";f

  • 纯CSS实现“流星赶月”,祝大家中秋节快乐

    中秋节到了,就想着用CSS画一个月亮送给园友们吧。但是就画一个月亮也太简单了些,于是便加了一些星星点缀以及流星坠落的效果。这篇文章就用纯CSS为大家实现一个“流星赶月”的效果。实现效果点击运行查看画个月亮首先我们先让全屏背景变成黑色,然后实现一个大月亮🌕,并加点"渐变",“光晕"等效果html&l

  • 移动端常见适配方案

    做移动端页面有一段时间了,总结下工作中常用的几种移动端适配方案。基础网上已经有非常多的基础知识总结,其中容易搞混的概念是视口。meta 标签中的 viewport 属性,就是 视图 的含义视口分为布局视口视觉视口理想视口布局视口也就是 &l

  • 研究微软 Fluent 图标规范后,我总结了这九个知识点!

    最近我在学习使用Figma,会在社区查找一些大厂的设计系统文件学习,看到一篇微软Fluent系统图标规范文档,还挺详细的。其中,我发现有些小点自己平时很少注意到,并且感觉对设计师定义图标规范也有一定的帮助,所以结合个人图标经验挑选部分内容来翻译成一篇文章,便于扩展自己的图标思维。(备注:以下的规范是

  • CSS 奇思妙想之酷炫倒影

    在CSS中,倒影是一种比较常见的效果。今天,我们就将尝试,使用CSS完成各类不同的倒影效果,话不多说,直接进入主题。实现倒影的两种方式首先,快速过一下在CSS中,实现倒影的2种方式。使用-webkit-box-reflect正常而言,-webkit-box-reflect 是一种非常便捷及

  • 20 个超级实用的 CSS 技巧,帮助你成为更好的开发者

    在开发项目中,修改输入占位符样式,多行文本溢出,隐藏滚动条,修改光标颜色,水平和垂直居中等等,这些都是我们非常熟悉的开发场景!前端开发者几乎每天都会和它们打交道,因此,我在这里给大家总结了20个超级实用的CSS技巧,一起来看看吧。1.解决图片5px间距问题你是否经常遇到图片底部多出5px间距的问题?

  • 手写Flexible.js的原理实现,我终于明白移动端多端适配

    今天在看阿里的面试题时,看到这样一道面试题,问flexible.js的原理是什么?然而我也不知道,但是刚好我又在我公司的项目上遇到过,于是研究一番,遂作此文。核心原理简单的一句概括就是:flexible.js帮我们计算出1rem等于多少px。怎么计算的?很简单,就是1rem=屏幕宽度的1/10.复制

  • 十个CSS实现元素居中的方法汇总

    在前端开发工程师的日常生活中,使用CSS使元素居中是很常见的,这也是面试中经常被问到的问题。也许你已经使用flex或absolute+transform来实现它,但你知道至少有10种方法可以做到元素居中吗?因此,在今天的文章中,我为大家整理了10个关于实现元素居中的CSS技巧,希望可以帮助你提升CS

  • 妙用 CSS 构建花式透视背景效果

    本文将介绍一种巧用 background​ 配合 backdrop-filter 来构建有趣的透视背景效果的方式。本技巧源自于一名群友的提问,如何构建如 ElementUI[1] 文档的一种顶栏背景特效,看看效果:仔细看,在页面的的滚动过程

  • JS结合Canvas制作水印添加器小工具

    ​​想了解更多关于开源的内容,请访问:​​​​51CTO 开源基础软件社区​​​​https://ost.51cto.com​​前言随着搬运工的逐渐增加,原创作者的利益收到了极大的影响.所以给图片或视频加上水印显得极其重要,他可以有效的维护原创作者的版权防止盗版.本文分享一个由canvas

  • 如何使用 CSS 自定义无序列表样式

    大家好,我是前端西瓜哥。前段时间实现了个自定义无序列表样式,踩了一些坑,和大家说说。设计师说我们这个,列表项样式要优化一下,太丑了,这个原点要大一点。默认的无序列表样式是这样的。复制<style>ul{width:200px;border:1pxsolid#555;font-size:1

  • 20个让你效率更高的CSS代码技巧

     在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的,有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。好了,我们开始。1.注意外边距折叠与其他大多数属性不同,上下的垂直外边距margin在同时存在时会发生

  • Web性能优化:21种优化CSS和加快网站速度的方法

     这是Web性能优化的第4篇,上一篇在下面看点击查看: Web性能优化:使用Webpack分离数据的正确方法 Web性能优化:图片优化让网站大小减少62% Web性能优化:缓存React事件来提高性能CSS必须通过一个相对复杂的管道,就像HTML和JavaSc

推荐阅读