![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css3
文章平均质量分 58
黄治文个人博客
这个作者很懒,什么都没留下…
展开
-
关于css hover动效边缘触发频繁闪动的解决方案
问题描述最近做一个官网,里面的动效比较多,也遇到了很多问题。便一点点的收录下来。今天遇到的问题如下图当鼠标触发到边缘时,就会频繁切换hover 和 非hover状态,就出现了如图的一上一下的局面问题解决既然知道了是怎样出现了,那就好解决了。因为直接在需要改变位置的元素加hover属性,在触发边缘时,元素就发生向上的的位置变化,然后鼠标就和元素没有接触了,就时非hover属性,元素位置要还原,然后又接触到鼠标,变成了hover属性。如此循环就会不停闪动,用户体验很差。解决方案就是将hover属性放原创 2020-09-10 10:02:52 · 6303 阅读 · 3 评论 -
关于betterscroll 默认向上滚动一段距离 解决方式
最近一直用betterscroll 来做页面的滚动 下拉刷新 上拉加载 等。也遇到一些很头疼的问题,今天先解决一个我实际遇到的问题问题描述下图是我未加better scroll之前的页面可以看出每一条顶上都会有10px的间距。而加上betterscroll之后。再看一下页面我的第一条10px的被吞掉了,直接从内容开始的。检查元素一看如下它给我向上移动了10px,这就有点费解了。问...原创 2020-03-06 15:53:01 · 1358 阅读 · 0 评论 -
css3常见效果设置
css3新增了很多新的模块,在很大程度上便利了样式设计,如果没有经历过全用css2开发页面过程,这种便利程度很难亲自体会,就拿以前的圆角边框来说,css2是这样实现的 把div分成了三部分,每部分用不同背景图片 上部分 : 中间部分: 下部分: 到了css3 就是一行代码 border-radius:--- ...原创 2018-05-28 09:38:53 · 182 阅读 · 0 评论 -
css3 border制作的聊天框
话不多说先上效果图主要也就是左右小三角比较麻烦一点,实现小三角用的是css3里的border将其他三个边的border颜色设为透明先用border画一个小三角吧,把其他三个边的颜色设为透明transparent 正方形:.square{ display: inline-block; background-color: #00d1b2; border:...原创 2018-06-05 17:26:36 · 652 阅读 · 0 评论 -
css3玻璃质感简单实现
最近做一个工业看板,自己设计的一款透明玻璃效果,做完之后在网上搜了一下css玻璃效果,看到了很多毛玻璃效果的制作,这一款很不错,也试着做了一下毛玻璃效果,最终也实现了一款毛玻璃效果,下面为两个中效果显示图。对于实现原理,透明玻璃要简单好多,直接是给body加一张背景图,对里面的div设置它的box-shade 和background-color即可主要css body { ...原创 2018-06-07 11:14:42 · 8465 阅读 · 0 评论 -
使用CSS实现抛物线运动效果
一个物体实现抛物线运动,物理上是将物体分为水平运动(匀速)和竖直运动(加速);用css3实现原理也如此,用该元素需要两层,一层控制水平,一层控制竖直;在css3中可以通过过渡或者动画-timing-function的贝塞尔曲线设置速度,贝塞尔曲线的斜率就是物体运动的速度因此对竖直方向运动设置不同的贝塞尔公式便可以得到上抛、平抛、扭曲等各样曲线运动 本文也是看了张鑫旭老...原创 2018-08-29 15:23:26 · 3587 阅读 · 0 评论 -
css图片的自适应排版
不知道大家有没有在做多个图片排布的时候感觉会有些吃力,尤其是那些图片的长宽都是不规范的时候,直接填充图片容易拉伸,定宽或者定高,最后都会有些超出边界,下面就是我总结的解决方法。方法一 :css的background属性来设置背景图知识点总结background的属性有以下这些:background-colorbackground-positionbackground-size...原创 2019-03-14 15:00:09 · 3816 阅读 · 0 评论 -
vue cli3 创建vw移动端适配项目
一直用rem做移动端的适配,其原理就是根据html的font-size为100单位rem的大小,flexible的解决方案大致是根据设计稿的大小动态改变不同屏幕下html的font-size的值,得到一个设计稿和rem的转化比例。具体实现可以看一下大漠老师的《使用Flexible实现手淘H5页面的终端适配》这篇文章之后在vw的兼容性得到解决,大漠老师又出了新的移动端适配方案并和vue cli2...原创 2019-05-28 09:58:15 · 3238 阅读 · 2 评论