css
关注
分享
扫一扫
Bonjours
这个作者很懒，什么都没留下…
展开
-
纯css滚动logo组图左右遮罩
2、前端是list显示，两个box分为两行去承载显示，无论需求如何变化，都是麻烦第一次后面超级好维护。对于比较少的logo图片，可以直接用两张特别宽的图去无缝滚动，左右两侧用两个css写的遮罩层，看数据量和是否经常变化来选定实现技术。利用上面那种形式，还可以让每一行滚动的速度不同，显示出错落的效果；还可以让两行一个往左滚，一个往右滚都是可以的。左右遮罩层用的是css，适合单色背景情况，100px宽的白色渐变到透明，超级好用，再也不用麻烦设计小姐姐了。如果是3行 4行，也是差不多的原理。原创 2024-01-04 16:45:14 · 505 阅读 · 0 评论 -
拿来主义-点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 · 409 阅读 · 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 · 403 阅读 · 0 评论 -
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 · 902 阅读 · 0 评论 -
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 · 3535 阅读 · 0 评论 -
svg图标四周有空隙
网上下载的svg图标应用到实际项目中的时候，发现某一个图标明显比其他图标小很多，解决办法很简单：将SVG图标用AI打开，然后将画布大小拖到和图标一样大即可解决。原图四周带空隙去掉后最终效果：调整前调整后...原创 2021-12-24 11:37:46 · 1360 阅读 · 0 评论 -
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 · 274 阅读 · 0 评论 -
对有多种语言且要适配移动端的网站如何布局？
需求：1、语言版本：中文、英文或者其他两种及两种以上语言；2、对PC端 移动端都要适配；看似简单的需求，需要考虑的不少。但其实总结下来也就这几点：1、拿到设计稿，确认有几个版本？如果页面设计复杂，需跟设计师确认在不同大小的情况下，各部分如何展示；中文版和其他语言版有何不同，配图 文案 页面大小等方面；2、其他语言版 移动端 甚至是不同宽度下的展示是否都有设计稿？这点很重要，英文版绝不是你想象的把中文换成英文的事情哦。3、页面动效要沟通好，关系到页面实现和提前规划4、只原创 2020-07-23 17:38:48 · 417 阅读 · 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 · 881 阅读 · 0 评论 -
网页中英文长短不一的几种解决办法
其实只要我们仔细观察国外的网站，发现他们无论是在banner还是内容处，并不会刻意将英文段落每行结尾处强制对齐。对齐是中文的做法，工作中发现很多国内的网站在处理英文版的时候总是会要求英文跟中文一样，结尾处要对齐。对齐后看下来就是一整版，于是就诞生了hyphens:auto等这样的解决方案。然而在专业看来，并不符合外国用户的认知和审美。那如果因为文案原因实在参差不齐得太难看怎么办呢？分析发现外文网站用了这些方法来控制：1、用段落宽度（width/max-width）如果是文案居中对齐的段落，最原创 2020-07-18 06:46:15 · 1562 阅读 · 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 · 1329 阅读 · 0 评论 -
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 · 173 阅读 · 0 评论 -
css3渐变透明文字遮盖解决文字只显示一部分的问题
当在网站有大段文字显示的时候, 还有语言切换, 文章默认只显示一半, 点击加载更多的时候才会显示完整内容, 这时候就很容易出现文字显示不完整的情况. 这时候的解决方案不是慢慢调试找到一个高度能完整显示中英文文字, 而是加入一个半透明遮盖层在文章最下方. 显得更加合理且体验更好.代码如下:.about-gongsi-info{height:400px;overflow: hidden; ...原创 2020-01-15 16:53:59 · 2341 阅读 · 0 评论 -
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 · 5356 阅读 · 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 · 339 阅读 · 0 评论 -
css实现循环扩散光圈的效果
效果：<div class="icon-warnCom"><icon class="icon-warns"><i class="dot"></i><i class="pulse"></i></icon></div>@keyframes warn { 0% { tr...原创 2019-12-24 12:19:58 · 3589 阅读 · 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 · 2468 阅读 · 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 · 861 阅读 · 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 · 835 阅读 · 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 · 332 阅读 · 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 · 190 阅读 · 0 评论