css画一个圈带一条线
发表于|更新于
|浏览量:
深窥自己的心,而后发觉一切的奇迹在你自己。——培根
用到的是css的background属性和radial-gradient
1 | /** 淡蓝渲染到20px |
效果:
相关推荐
2022-03-01
在单html页面中使用react并配置jsx
天空更适合仰望,而不是居住。——杜鲁门·卡波特 《蒂凡尼的早餐》 首先按照官方文档一分钟用上React以及快速尝试JSX,如果你不需要JSX,可以按照这个Demo去实现 我们在页面上放入这三个cdn: 123<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 然后新建一个script标签并指定type="text/babel",例如: 1<script s...
2021-06-30
wow.js
青春是一个普通的名称,它是幸福美好的,但它也充满着艰苦的磨炼。——高乐基 今天学到一个wow.js 可以实现很棒的效果 我们去这里下载 https://www.dowebok.com/131.html 使用方法1、引入文件1<link rel="stylesheet" href="css/animate.min.css"> 2、HTML12<div class="wow slideInLeft"></div><div class="wow slideInRight"></div> 可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟播放时间)属性,如: 12<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="0.1s">左淡入<...
2021-09-04
echarts入门
社会犹如一条船,每个人都要有掌舵的准备——易卜生 根据官方文档入门echarts: 首先我们先引入cdn 1<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script> 然后为 ECharts 准备一个具备大小(宽高)的 DOM 12<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM --><div id="main" style="width: 600px;height:400px;"></div> 然后就是JavaScript代码了 先基于准备好的dom,初始化echarts实例 1var myChart = echarts.init(document.getElementById('main')); 接下来指定图表的配置项和数据 12345678910111213141516171819// 指定图表的...
2020-10-01
关于alert
笨蛋自以为聪明,聪明人才知道自己是笨蛋 ——莎士比亚 JavaScript 弹窗 可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。 警告框警告框经常用于确保用户可以得到某些信息。 当警告框出现后,用户需要点击确定按钮才能继续进行操作。 语法window.alert(“sometext“); window.alert() 方法可以不带上window对象,直接使用**alert()**方法。 确认框确认框通常用于验证是否接受用户操作。 当确认卡弹出时,用户可以点击 “确认” 或者 “取消” 来确定用户操作。 当你点击 “确认”, 确认框返回 true, 如果点击 “取消”, 确认框返回 false。 语法window.confirm(“sometext“); window.confirm() 方法可以不带上window对象,直接使用**confirm()**方法。 提示框提示框经常用于提示用户在进入页面前输入某个值。 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返...
2023-04-15
vueuse
多数人在心底蔑视德,但很少有人轻视荣誉。——沃夫拿格 分享一个vue的组合式api封装库vueuse github:https://github.com/vueuse/vueuse 官档:https://vueuse.org/ 大致用法: 12345678910111213141516171819202122import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'export default { setup() { // tracks mouse position const { x, y } = useMouse() // is user prefers dark theme const isDark = usePreferredDark() // persist state in localStorage const store = useLocalStorag...
2025-07-24
docxtemplater
读书多了,容颜自然改变,很多时候,自己可能以为许多看过的书籍都成了过眼云烟,不复记忆,其实他们仍是潜在的。在气质里,在谈吐上,在胸襟的无涯,当然也可能显露在生活和文字里。——三毛《送你一匹马》 用 @open-xml-templating/docxtemplater 打造你的“文档工厂”——让 Word/PPT 自动生成嗨起来!你是否还在手动复制粘贴合同、发票、项目报告,一遍遍改名字、换日期,搞得筋疲力尽?有没有想过,让电脑帮你批量生成那些枯燥的 Word 或 PPT 文档,让你轻松变身“文档魔法师”?今天就来聊聊超实用、超好玩的神器——@open-xml-templating/docxtemplater,一行代码让你的文档自动化飞起! 什么是 docxtemplater?一键变身文档魔术师!docxtemplater 是什么?一句话总结:它能让你的 Word(docx)和 PPT(pptx)模板“长出脑子”,自动帮你填数据、批量造文档,而且模板还可以直接用 Word 编辑,妈妈再也不用担心我不会写 XML! 它支持各种花式玩法: {na...
