- 博客(56)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 纯干货：css3单边倾斜-异形tab切换的实现方法
在第一个tab上面，叠加两个背景，一个背景不倾斜，一个背景倾斜，这样就能完美实现效果了。高度要高于其他选项，这样就能遮住下面的内容。其他的选项就直接用transform: skewX(15deg)就可以了。这里主打的就是一个灵活运用，并没有实现难度。
2024-06-13 19:18:14
411
原创 分享一些实用的工具
很多都是我们平时看到的能实现的效果，比如航线图、业务分布图、数据分析、股票k线图等等。注意这不是标准地图，无法在国际论坛、峰会等宣传上使用，如果是国际性的必须使用中国标准地图服务系统的地图【由阿里云DataV数据可视化团队出品，多年深耕数据可视化领域，数据大屏业务开拓者和领航者。致力用震撼而清晰的视觉语言，让更多人读懂大数据，受惠数据驱动的决策方式。Apache ECharts，一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
2024-04-26 16:20:41
1392
原创 Bing地图改变地图的显示颜色参数
可以改陆地颜色、海洋颜色、道路颜色、高速路颜色、街道颜色、铁路颜色、地名文字颜色、投影颜色、国界颜色等，还可以自定义添加点、线段等。
2024-04-26 10:16:54
1043
原创 标题带引号图片，展开也带引号图片的怎么实现
平时遇到一些设计效果，其实越小块，实现起来越复杂，这上面展示的只是一个小小的demo，真实设计上还挺多功能的。实现也很简单，文字跟两张引号图片，一前一后即可。感觉简单的不能再简单了。。。
2024-01-19 11:14:53
402
原创 纯css滚动logo组图左右遮罩
2、前端是list显示，两个box分为两行去承载显示，无论需求如何变化，都是麻烦第一次后面超级好维护。对于比较少的logo图片，可以直接用两张特别宽的图去无缝滚动，左右两侧用两个css写的遮罩层，看数据量和是否经常变化来选定实现技术。利用上面那种形式，还可以让每一行滚动的速度不同，显示出错落的效果；还可以让两行一个往左滚，一个往右滚都是可以的。左右遮罩层用的是css，适合单色背景情况，100px宽的白色渐变到透明，超级好用，再也不用麻烦设计小姐姐了。如果是3行 4行，也是差不多的原理。
2024-01-04 16:45:14
461
原创 ps2023如何导出svg
在“文件”文件-“导出首选项”里勾选“使用旧版导出为”，就可以在图层里右键导出svg啦，否则切图也导不出svg，右键导出为里面的格式也没有svg选项。
2023-02-24 11:36:40
3985
原创 java-iText html转pdf的问题
最近在平台开发的时候，需要将一个word文档转成html嵌入vue和java项目中，需要设计-前后端配合开发，设计设计好版式，然后前端写静态html页面，然后交给后端嵌入项目。
2023-02-21 16:49:40
1805
1
原创 PS文字创建工作路径矢量化后变细，导出的svg也变细的解决方案
PS文字创建工作路径矢量化后变细，导出的svg也变细的解决方案：颜色叠加，合并形状组件
2022-09-08 11:58:48
682
原创 ant react修改tooltip的组件样式
如上图，有的时候根据业务需要，一定要修改一下tooltip的背景色或者样式，就需要用到以下代码来修改了。.ant-tooltip-inner是文字框的背景色，.ant-tooltip-arrow-content是文字框下面的小三角形，如果不需要三角形，display none就好了。我们可以利用原生的改出来一些我们想要的效果。...
2022-07-28 14:37:57
2499
原创 拿来主义-点select复选框显示隐藏div
点select复选框显示隐藏div，HTML代码是基于bootstrap v5.1框架来的，主要是注意data-related-item="carrierAlliance"和id="carrierAlliance"的使用。1、效果：2、HTML<div class="d-flex align-items-center"> <div class=""> <input type="checkBox" class="form-check-i
2022-05-24 15:58:24
371
1
原创 css改造bootstrap v5.1的radios
1.效果展示因为要做B端产品的demo，用了bootstrap v5.1。说实话，如果需要集成很多的控件的话，还不如找一套现成的后台系统去改造，免得自己再去一个个找各种插件进来浪费时间。当然有好处有坏处，看项目。效果1：单独框效果1css代码：.check_outline label { position: relative; z-index: 1;}.check_outline { margin-right: 0.8rem; position: re
2022-05-24 15:33:56
381
原创 css改造浏览器横向竖向滚动条-适用于google内核
1、css代码/* 改造滚动条-适用于google内核 */::-webkit-scrollbar { /* 控制竖向滚动条的宽度 */ width: 6px; /* 控制横向滚动条的高度 */ height: 6px; background-color: #fff;}::-webkit-scrollbar-thumb { /* box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); */ back.
2022-05-24 14:53:10
875
原创 css设置图标跳动
css：// im图标跳动 @keyframes im_icon{ 0%{ opacity: 0.8; transform: translate(0,0); } 50%{ opacity: 1; transform: translate(0,3px); }
2022-04-24 15:08:32
1979
原创 CSS右箭头的写法
css：width: 6px;height: 6px;border-top: 1px solid #cccccc;border-right: 1px solid #cccccc;transform: rotate(45deg); span { padding-left: 5px; padding-right: 7px; color: @primary-color;
2022-04-24 14:40:19
3509
原创 vue+ant 多语言切换实现单独小范围修改样式
antclassName={!getLang().ISZHCN ? styles.english : ''}className={`${styles.swiper_item} ${styles[getLang().lang]}`}className={`${styles.textMedium} ${!getLang().ISZHCN ? styles.english : ''}`}<div className={`${styles.logo} ${!getLang().ISZHCN
2022-03-02 10:06:02
522
原创 svg图标四周有空隙
网上下载的svg图标应用到实际项目中的时候，发现某一个图标明显比其他图标小很多，解决办法很简单：将SVG图标用AI打开，然后将画布大小拖到和图标一样大即可解决。原图四周带空隙去掉后最终效果：调整前调整后...
2021-12-24 11:37:46
1296
原创 Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0.
node-sass 6.0.1版本与^4.0.0 || ^5.0.0不兼容1、先卸载之前版本的node-sassnpm uninstall node-sass2、卸载后安装5.0.0版本npm install node-sass@5.0.0这里可能会失败，原因是你安装的淘宝镜像的问题。如果失败了就重装淘宝镜像，如果淘宝镜像停止支持就只能外网下载npm install -g cnpm --registry=https://registry.npm.taobao.org重装后重新执行：np
2021-10-12 13:18:45
2907
1
原创 动画-文字横屏滚动
@keyframes scrowll { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); }}div{display: flex;animation-duration: 30s;animation-name: scrowll ;animation-iteration-count: infinite;animation-timing-func.
2021-09-15 16:04:18
163
原创 css动画
transition: opacity .7s cubic-bezier(.165,.84,.44,1) var(--reveal-delay),transform .7s cubic-bezier(.165,.84,.44,1) var(--reveal-delay),-webkit-transform .7s cubic-bezier(.165,.84,.44,1) var(--reveal-delay);transition:rotateX(0deg) rotateY(0deg) rotateZ(
2021-09-14 10:40:59
259
原创 vue 播放器视频插件 之 vue-video-player 铺满全屏自动播放
.video-js .vjs-tech{ object-fit: cover;}
2021-08-23 15:52:04
8148
2
原创 多倍图在google内核浏览器下模糊
img{ //image-rendering: -moz-crisp-edges; //image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; //image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor;}
2021-08-19 15:23:56
170
原创 css3 justify-content兼容性问题
火狐支持justify-content:right写法，但是google不支持。将justify-content:right写成 justify-content:flex-end 即可。
2021-08-19 15:08:47
3342
原创 若依ruoyi改皮肤-主题（二）
一、风格等基础设置有深色和浅色风格两种，根据设计图考虑是否需要。如果不需要，去掉一种风格。这里以浅色风格为主。在“布局设置”里，可以设置主题风格（深浅）、主题颜色（直接下拉修改主色）、隐藏菜单/顶部标签等等。如果想在css里修改：1、主题风格？2、四种主题颜色+button文字粗细+边框颜色+表格边框色+字体路径：assets->styles->element-variables.scss3、全局样式body字体+main-container全局样式（.
2021-08-18 15:00:59
10063
1
原创 若依ruoyi改皮肤（一）
一、启动npm installnpm run dev二、项目结构三、新增页面在views文件夹下新增vue页面文件或者【文件夹order->在文件夹内新增vue页面】，如index.vue，模板代码如下<template> <div class="app-container a"> 全部订单 </div></template><script>export..
2021-08-12 11:38:22
2428
原创 .jsx+ant项目前端页面总结
一、基础部分1、项目启动npm installnpm run start（看配置？）图1-访问地址2、页面结构图2 项目结构3、新增页面图3 文件夹及路由配置4、访问复制图1的地址，加上项目文件夹名，如图3的页面访问地址为：http://localhost:8000/account-review二、页面部分1、.jsx基础页面2、实现class="a b"的效果<span className={`${styles.bl_type} ...
2021-08-12 10:46:47
301
原创 APPIcon生成
有两种生成方法，比较常用。一种是设计师常用的，在线生成图标：https://icon.wuruihong.com/① 支持 jpg, png, psd 文件② 可以生成圆角③ 可以自定义大小④ 生成后可以预览，模拟手机屏幕的效果预览网站截图第二种就是终端生成，利用icon-generator工具【iOS APP，20px-1024px】。https://github.com/its404/icon-generator链接: https://pan.baid
2020-11-01 13:23:52
641
原创 对有多种语言且要适配移动端的网站如何布局？
需求：1、语言版本：中文、英文或者其他两种及两种以上语言；2、对PC端 移动端都要适配；看似简单的需求，需要考虑的不少。但其实总结下来也就这几点：1、拿到设计稿，确认有几个版本？如果页面设计复杂，需跟设计师确认在不同大小的情况下，各部分如何展示；中文版和其他语言版有何不同，配图 文案 页面大小等方面；2、其他语言版 移动端 甚至是不同宽度下的展示是否都有设计稿？这点很重要，英文版绝不是你想象的把中文换成英文的事情哦。3、页面动效要沟通好，关系到页面实现和提前规划4、只
2020-07-23 17:38:48
389
原创 网页字体集锦
1、华为官网：font-family："Manrope",Arial,Helvetica Neue,Helvetica,sans-serif;manrope字体各方面都表现良好2、苹果官网：font-family："SF Pro Text","Myriad Set Pro","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;body:lang(zh-CN){ font-family："SF Pro SC","SF P
2020-07-20 23:57:59
834
原创 网页中英文长短不一的几种解决办法
其实只要我们仔细观察国外的网站，发现他们无论是在banner还是内容处，并不会刻意将英文段落每行结尾处强制对齐。对齐是中文的做法，工作中发现很多国内的网站在处理英文版的时候总是会要求英文跟中文一样，结尾处要对齐。对齐后看下来就是一整版，于是就诞生了hyphens:auto等这样的解决方案。然而在专业看来，并不符合外国用户的认知和审美。那如果因为文案原因实在参差不齐得太难看怎么办呢？分析发现外文网站用了这些方法来控制：1、用段落宽度（width/max-width）如果是文案居中对齐的段落，最
2020-07-18 06:46:15
1472
原创 swiper.js垂直滚动并放大当前项效果
效果：1. HTML：<div class="gpr_rankingArea" id="gpr_rankingArea"> <!-- Swiper --> <div class="swiper-container swiper-no-swiping" id="swiper_container"> <div class="swiper-wrapper" > <div class="swi
2020-07-17 12:55:18
1262
原创 wow.js 结合 animate.css - 实现页面往下滑动加载内容效果
第一步：引入animate.css和wow.js并初始化<link rel="stylesheet" href="css/animate.min.css"><script src="js/jquery.min.js"></script><script src="js/wow.min.js"></script><script type="text/javascript"> if (!(/msie [6|7|8|9]
2020-07-16 16:04:50
1292
原创 rem.js移动端适配
1. js文件：function recalc(x,bol) { var clientWidth = document.body.clientWidth; if (bol && (!clientWidth || clientWidth > x)) { document.documentElement.style.fontSize = ""; return; }; document.documentElement.style.fontSize = 100 * (c
2020-07-16 15:30:09
159
原创 swiper.js实现区域轮播-两边小中间大的缓动效果
效果展示（已加速） 第一步：在页面引入css和js<link rel="stylesheet" href="css/swiper.min.css"><script src="js/swiper.min.js"></script>第二步：页面HTML<div class="s...
2020-07-16 13:03:11
1672
原创 mac下安装homebrew-nginx及系列问题
新买回来的mac【mac系统环境是最新版本10.13.2或更新】需要使用nginx，那么需要做以下事情：第一步：在appstore里面搜索xcode，先安装下载xcode，有8g多，比较大，下载完成后点开xcode应用继续安装直到完成出现这个界面；第二步：安装homebrew工具（必须要安装的）：打开mac自带的iterm2终端，ctrl+v粘贴运行下面的自动脚本，这是国内...
2020-05-07 13:35:09
536
1
原创 css3渐变透明文字遮盖解决文字只显示一部分的问题
当在网站有大段文字显示的时候, 还有语言切换, 文章默认只显示一半, 点击加载更多的时候才会显示完整内容, 这时候就很容易出现文字显示不完整的情况. 这时候的解决方案不是慢慢调试找到一个高度能完整显示中英文文字, 而是加入一个半透明遮盖层在文章最下方. 显得更加合理且体验更好.代码如下:.about-gongsi-info{height:400px;overflow: hidden; ...
2020-01-15 16:53:59
2317
原创 css3属性将单词换行并添加中划线（连字符）
1、HTML页面，必须为英文语言<html lang="en-US">2、CSS页面：.product-desc{ width:520px; max-height:160px; overflow:hidden; hyphens:auto}效果：这样就把单词performance换行并添加连字符了。如果不添加hyphens:auto，后面就空出一截不好看：...
2020-01-03 22:34:46
5154
原创 jquery配合css实现滚动页面弹层的绝对居中
功能是页面上下滚动不影响弹层的垂直绝对居中，他会跟着滚动的页面自动调整位置以达到垂直居中效果。效果如下（由于文件大小限制，滚动速度快进了2倍，实际鼠标滚动速度更缓慢平滑）：HTML：<body class="page-body"> <a href="javascript:void(0)" class=" dt-lk12" name="view">点击弹...
2019-12-26 11:33:58
325
原创 echarts自定义省份地图及map上的内容
先来看效果，太原市的地图，显示市下面的区，区下面的商户，默认显示3个商户信息，其余商户信息鼠标移动上去显示商户信息：我是怎么做的呢？因为网上找的地图都不符合需求，所以从设计开始就按非常规方法：大致就是先代码模拟出市的轮廓->截图保存，ps处理，每个区保存为一个图层->需要的区加上颜色和区名->页面中使用整张地图作为背景图->其他文字信息一律代码写上去。第一步：...
2019-12-25 22:48:36
4334
jquery控制弹层随页面滚动.zip
2019-12-26
全屏背景图片动画插件vegas.zip
2019-12-23
particles test.zip
2019-12-23
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人