html
大东哦哦
这个作者很懒,什么都没留下…
展开
-
svg 跟随鼠标滚轮移动
一、先让svg自己沿坐标移动1画一条svg路径<!-- d : 是path的路径参数 fill : 是svg文字 线 的填充色 三次贝塞尔曲线 :cubic-bezier (x1,y1,x2,y2) 由起始点 , 终止点 , 两个中间点组成--><path d="M0 0,C800 1000,0 2000.32,800 2800" fill="none" class="line" id='line1' />2定义动画:让svg路径的长...原创 2021-02-26 11:37:06 · 1150 阅读 · 3 评论 -
长页面滚动动画(优化)
之前写的长页面滚屏动画回过头看发现有很多局限性比如:1.每次动画后都要加上opacity:1,元素过多时候代码冗余2.如果动画元素过多,js调用aniCom()方法时候,传入值过多,容易出错3.如果动画元素是类名有多个,调用aniCom()时候不起作用进行优化1:使用less封装 动画函数// 封装动画 简化每次动画操作.fill-mode { opacity: 0; animation-fill-mode: forwa...原创 2020-07-31 16:52:32 · 309 阅读 · 0 评论 -
css伪元素层级在父元素之下
目标:把心和点状图放在盒子下面,位置不变写页面时,有些装饰性元素在内容盒子下面,通常是给内容盒子再包裹一层父盒子,把层级小于内容盒子的装饰元素定位上去这样写很麻烦,结构上还多了一层的盒子,不利于代码维护解决 : 可以使用z轴的3d转换更换伪元素(子元素)的层级 .father { /* 让子元素 呈现3D转换 */ transform-style: preserve-3d; } .son { /* 使用Z轴进行3D 转换 */ trans..原创 2020-07-22 15:27:19 · 2540 阅读 · 0 评论 -
less封装函数动画
给若干 li 添加动画,问题1:怎么让每次写动画代码量减少问题2:想给多个li添加层次动画,但li过多,每个li添加 nth-child() , 代码冗余, 怎么减少代码量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2020-07-21 10:41:55 · 458 阅读 · 0 评论 -
css 鼠标hover 水流上升动画
实现原理1 . 子盒子撑满父盒子 , 设置水流颜色2 . 子盒子的 伪元素after 宽高 1:1 , 设置边框圆角 , 颜色和文档背景色相同3 . 带边框的圆角 , rotate(360deg) , 旋转360度 , 模拟水流动画4 . 鼠标hover , 子盒子的伪元素加旋转动画 , 在加上 translateY()向上平移动画5 . 给父盒子添加 overflow: hidden<!DOCTYPE html><html lang="en"><h...原创 2020-06-15 14:13:11 · 496 阅读 · 0 评论 -
css隐藏滚动条
.box { display: flex; overflow-x: auto; &::-webkit-scrollbar { display: none; }}给滚动的盒子加上-webkit-scrollbar原创 2020-05-07 09:24:36 · 206 阅读 · 0 评论 -
移动rem项目在pc端字体显示问题
在移动端使用rem写好的项目,在pc端显示,只要使用rem字体的文字,图片都会出现问题正常的移动端 ????:字体变大的pc端 ????:因为rem是根据 根字体大小 (html的字体大小) 来设置的,所以到pc端和移动端 html的font-size大小不同,导致展示有问题解决办法 :// 最大的容器 设置了 max-wi...原创 2019-11-27 17:18:18 · 501 阅读 · 0 评论 -
padding-top实现列表图片自适应
处理列表中响应式图片的时候,宽度可以设置百分比进行自适应,但是高度没办法控制 ,如果图片宽高不一致,宽度设置一样,高度会参差不齐这时就可以使用padding来控制图片的高度,让列表中的图片强制设置同一高度1 : 图片使用盒子包裹,案例为 .img-box2 : img-box的高度用padding-top/padding-bottom 撑开 padding-t...原创 2019-11-27 16:53:00 · 795 阅读 · 0 评论 -
异形卡片轮播
使用swiper轮播插件,遇到三个问题1 . 自带按钮,只能出现在轮播区域内 , 因为轮播盒子swiper-container设置了overflow:hidden2 . 同屏显示多个轮播页 , 在宽度不同的的情况下,会出现收尾轮播页溢出被覆盖的情况3 . (如果想留出空隙 , 给轮播加背景) , 无法给轮播盒子swiper-container设置padding , ...原创 2019-08-21 16:15:15 · 418 阅读 · 0 评论 -
滚动穿透
什么是滚动穿透:弹出层滚动时,弹出层下的body跟着滚动解决方法:方法一 :position:fixed 1.打开模态框时,给body加上类名preventScroll; - 2.关闭模态框时,移除body上的preventScroll类名。 问题 ! 当关闭弹出框 ,body的滚动位置会丢失还原为0,也就是body 的ScrollTop 属性值会变为 ...原创 2019-08-12 14:05:37 · 420 阅读 · 0 评论 -
tap栏切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2019-07-08 17:36:49 · 998 阅读 · 0 评论 -
jQuery 返回顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...原创 2019-07-08 15:22:45 · 68 阅读 · 0 评论