前端
Bonjours
这个作者很懒,什么都没留下…
展开
-
纯css滚动logo组图左右遮罩
2、前端是list显示,两个box分为两行去承载显示,无论需求如何变化,都是麻烦第一次后面超级好维护。对于比较少的logo图片,可以直接用两张特别宽的图去无缝滚动,左右两侧用两个css写的遮罩层,看数据量和是否经常变化来选定实现技术。利用上面那种形式,还可以让每一行滚动的速度不同,显示出错落的效果;还可以让两行一个往左滚,一个往右滚都是可以的。左右遮罩层用的是css,适合单色背景情况,100px宽的白色渐变到透明,超级好用,再也不用麻烦设计小姐姐了。如果是3行 4行,也是差不多的原理。原创 2024-01-04 16:45:14 · 422 阅读 · 0 评论 -
VS CODE 页面没暂存/提交就放弃更改了怎么还原
VS CODE 页面没暂存/提交就放弃更改了怎么还原?找到页面直接ctrl+z就还原了原创 2022-07-28 16:00:33 · 1758 阅读 · 0 评论 -
ant react修改tooltip的组件样式
如上图,有的时候根据业务需要,一定要修改一下tooltip的背景色或者样式,就需要用到以下代码来修改了。.ant-tooltip-inner是文字框的背景色,.ant-tooltip-arrow-content是文字框下面的小三角形,如果不需要三角形,display none就好了。我们可以利用原生的改出来一些我们想要的效果。...原创 2022-07-28 14:37:57 · 2295 阅读 · 0 评论 -
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 · 510 阅读 · 0 评论 -
若依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 · 2238 阅读 · 0 评论 -
.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 · 285 阅读 · 0 评论 -
网页字体集锦
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 · 770 阅读 · 0 评论 -
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 · 1201 阅读 · 0 评论 -
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 · 1229 阅读 · 0 评论 -
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 · 1635 阅读 · 0 评论 -
jquery配合css实现滚动页面弹层的绝对居中
功能是页面上下滚动不影响弹层的垂直绝对居中,他会跟着滚动的页面自动调整位置以达到垂直居中效果。效果如下(由于文件大小限制,滚动速度快进了2倍,实际鼠标滚动速度更缓慢平滑):HTML:<body class="page-body"> <a href="javascript:void(0)" class=" dt-lk12" name="view">点击弹...原创 2019-12-26 11:33:58 · 301 阅读 · 0 评论 -
echarts自定义省份地图及map上的内容
先来看效果,太原市的地图,显示市下面的区,区下面的商户,默认显示3个商户信息,其余商户信息鼠标移动上去显示商户信息:我是怎么做的呢?因为网上找的地图都不符合需求,所以从设计开始就按非常规方法:大致就是先代码模拟出市的轮廓->截图保存,ps处理,每个区保存为一个图层->需要的区加上颜色和区名->页面中使用整张地图作为背景图->其他文字信息一律代码写上去。第一步:...原创 2019-12-25 22:48:36 · 4172 阅读 · 0 评论 -
css引入本地电脑、服务器字体
@font-face { font-family: 'DINProRegular'; src: url('../fonts/DINProRegular/DINProRegular.eot'); src: url('../fonts/fonts/DINProRegular/DINProRegular.eot') format('embedded-opentype'), ...原创 2019-12-24 12:04:28 · 2355 阅读 · 0 评论 -
js获取电脑当前时间
效果:<div class="hd-time fl_l"> <span id="curt-time" class="DINProMedium font-24 curt-time"></span> <div class="mg_t_x2"> <span id...原创 2019-12-24 11:46:33 · 1643 阅读 · 0 评论 -
echarts自定义折线图-堆叠区域图
效果如下:这里使用了官方文档中的堆叠区域图来改造的。有几个注意的地方:series下的【stack: '总量' 】要去掉,否则y轴数值就会相加,与正确数值不符 改变折线区域的线条颜色和区域渐变色 指针不想是十字指示,可将tooltip下的axisPointer的type: 'cross'改为'line' 如果不想折线那么尖锐,可以在series里加上smooth: true变为柔...原创 2019-12-24 11:30:10 · 2551 阅读 · 0 评论 -
echarts自定义饼状图
成品效果如下:这就是根据官方实例修改而来,改变了颜色值,去掉了图例。代码如下:<div id="part4" style="width: 100%;height:240px;"></div>js:<script src="js/jquery.min.js"></script><script src="echarts/...原创 2019-12-24 10:42:59 · 911 阅读 · 2 评论 -
echarts自定义折线图
先看效果:这里的难点可能出了常规的参数修改以外,就是折线回执区域的渐变色是怎么设置的,其实就是series下面的areaStyle设置。areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, ...原创 2019-12-24 10:24:36 · 1541 阅读 · 0 评论 -
echarts自定义多根柱子在一起柱状图/条形图
先看效果:与单一柱状图相比,多柱子的多定义了几个series的值,legend值。注意的是:这东西叫图例标记。是legend下面的参数。看代码:<div id="part5" style="width: 100%;height:240px;"></div><script src="js/jquery.min.js"></sc...原创 2019-12-24 09:56:39 · 6161 阅读 · 0 评论 -
e-charts自定义柱状图
先看完成效果,是这样子的:可以说把默认的e-charts柱状图改的7788了。 罗列出来以下几点:1、去掉y轴(刻度值的)刻度线2、去掉y轴(刻度值的)边框3、改变柱状图颜色为渐变色4、tooltip显示横坐标的值(数字)+横坐标单位(月)5、自定义tooltip左侧小圆点6、xy轴文字属性设置7、y轴分割线颜色(与x轴等长的横向刻度线颜色)8、修改x轴(...原创 2019-12-24 09:32:45 · 1676 阅读 · 0 评论 -
css 按钮hover有光影效果
html:<!-- 带背景纹理的区域 --> <div class="bgpattern"> <div class="bgpattern_bg"></div> <div class="">https://gravit.io/</div> </div> <!-- 光影划过 --> ...原创 2019-12-23 13:20:29 · 780 阅读 · 0 评论 -
css鼠标划过文字出现往两边延伸的下划线
HTML: <div class="nav"> <ul> <li><a href="#">Gravit Designer</a></li> <li><a href="#">Gravit Klex</a></li> </ul>...原创 2019-12-23 13:09:57 · 795 阅读 · 0 评论 -
css hover特效
css hover2:<!-- 按钮特效 --><a class="video-btn" href="###"> <span class="video-ico">Video icon</span> <span>Watch Video<span>What and how we work</spa...原创 2019-12-23 12:59:56 · 296 阅读 · 0 评论 -
css hover效果
特效1:<div class="pulseicon"><span class="facts-ico establish-ico"></span></div><style type="text/css"> ::placeholder{ opacity: 0.5 } .facts-ico{ display: i...原创 2019-12-23 12:56:23 · 158 阅读 · 0 评论 -
全屏背景图片动画插件 vegas.min.js
<!DOCTYPE html><html><head><title>全屏背景插件</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head&g...原创 2019-12-23 12:29:29 · 655 阅读 · 0 评论 -
css实现鼠标移动 按钮平滑过渡效果
HTML代码:<a class="subcribe-btn" href="#">鼠标移到我身上</a>CSS代码:a{ text-decoration: none; } .subcribe-btn { padding: 15px 35px; display: inline-block; font-family: "Montserrat", s...原创 2019-12-23 12:06:18 · 1689 阅读 · 0 评论 -
粒子特效
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>particles.js</title> <meta name="description" content="particles.js is a lightw...原创 2019-12-23 11:32:48 · 317 阅读 · 0 评论 -
纯CSS加载中代码示例
<!DOCTYPE html><html lang="en"><head> <title>加载中示例</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&g...原创 2019-12-23 11:06:23 · 294 阅读 · 0 评论