前端的同学们对 CSS 肯定不会陌生，这部分内容控制着网页的外观。今天我们给大家整理了一些有趣的 CSS 组件，这些组件能增强网页的排版、让网页实现多种风格，甚至可以检查页面的 Bug ！1、 赫蹏项目官网：https:sivan.github.ioheti开源协议：MIT赫蹏（hètí）是专为中文内容展示设计的排版样式增强，只需在页面的标签中引入 heti …
css 圆
作者：徐小夕 来源：趣谈前端本文主要介绍如何使用原生javascript和Css3来实现一个在各大移动应用中经常出现的转盘游戏，由于该实现可以有不同方式，如果熟悉canvas的话也可以用canvas实现，本文采用js和css实现主要考虑到复杂度较小性能较好，所以如果有更好的方案，也可以随时和我交流。前言本文技术路线采用和上篇文章教你用200行代码写一个爱豆拼 …
在我们通过canvs画图的时候经常会用到圆，且需要计算出圆上某点的坐标，由于我数学没学好，总是记不得怎么获取，这里记录下，加深记忆。这里面用到了我们以前学过的三角函数，可以通过三角函数来计算圆上的位置。如下：在直角坐标系中圆点O(0,0) ,半径为OP，求圆上点P的坐标x,y.我们可以通过sinθ = yr . cosθ = xr 两个公式来分别获得坐标x和 …
使用SVG绘制矩形、圆形和椭圆形。SVG有一些预定义的形状元素，可以供开发者使用。这些元素分别是矩形、圆形 circle 、椭圆 ellipse、线条 line、多线条 polyline、多边形 polygon、路径 path 。我们先来学习矩形的绘制。绘制矩形使用 rect 标签，它是 rectangle 的缩写，就是矩形的意思。它是一个单标签，基本语法为 …
本篇我们将着重介绍css的径向渐变，注意它和线性渐变的区别。径向渐变 —— radial-gradient径向渐变与线性渐变的不同之处在于它从一个点开始向外散发。CSS渐变通常用于模拟光源，我们知道它并不总是直的。这使得径向渐变中颜色之间的过渡看起来更加自然。为了创建一个径向渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以 …
相传，在世界各地，坐落着这样一个一个的“UFO”。它们不光拥有着神秘的外形，而且能让电子在磁场的魔力下转圈圈。它们能窥探物质内部的各种“魑魅魍魉”，让各种“妖魔鬼怪”无所遁形。江湖人称“火眼金睛”！我们先来一睹一下世界上比较有名的几个同步辐射中心。美国布鲁克海文国家光源中心美国先进光源英国钻石光源欧洲同步辐射中心日本SPring8同步辐射中心啥，这咋长得都像 …
这次来看一个带特殊圆角导航栏布局，如下谷歌浏览器的标签栏：这样一个布局如何实现呢？CSS 渐变几乎是无所不能的，什么的图形都能绘制，这里可以拆分一下，两个矩形，两个圆形，还有两个反向圆角，也就是 2 个 线性渐变，4 个径向渐变，示意如下：最终实时效果如下（上面是原理图）完整代码如下：CSS使用渐变实现Chrome标签栏效果body {margin: 0;p …
这里记录每周值得分享的科技内容，周五发布。本杂志开源（GitHub: ruanyfweekly[1]），欢迎提交 issue，投稿或推荐你的项目。周刊讨论区的帖子《谁在招人？》[2]，提供大量就业信息，欢迎访问或发布工作实习岗位。封面图：土星的卫星土卫二[3]，表面被厚厚的冰层覆盖，已经证实冰层之下有液态水的海洋。刊首语最近，我有一个猜想。我们知道，人眼有“ …
圆是图形中经常使用的元素，大部分图形学库中都提供画圆的api，本文介绍不使用任何图形库直接使用TypeScript语言实现在浏览器中画圆的方法。概述html页面使用canvas元素进行绘制，TypeScript对canvas操作进行了简单的封装，这里主要用到设置单个像素点的颜色，代码如下app.tsclass WebGL {canvas: HTMLCanva …
2021年第一个工作日休了三天，是否养足了能量了呢说到版权一直都是设计师的痛每次一到使用字体就纠结没事多囤点免费商用字体还是没错的给大家整理些2020年上线的免费商用字体 01 -------------------------庞门正道真贵楷体2020年末暖心之作由《庞门正道》公众号号主阿门的父亲76岁高龄庞真贵老先生书写制作而成特别适合中式设计搭配字体来源 …