![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
舞空~
一只普通的程序猿,记录自己的点点滴滴,希望博客能帮助到你们哈!努力加油!喜欢的麻烦给个赞,谢谢!
展开
-
小程序固定定位没生效原因
小程序固定定位没生效的解决办法原创 2022-07-13 16:46:30 · 662 阅读 · 1 评论 -
推荐四种好看的加载动画,需要的自取
好看的四种加载动画,效果如图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2021-08-11 17:47:42 · 618 阅读 · 0 评论 -
vue中实现购物页面侧栏分类随滚动自动激活侧栏分类,商品页面侧栏分类和页面滚动联动demo
1.效果如图页面滚动,吸顶区吸顶(注释了,根据需要修改),下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片3.下面附上源码:创建一个虚拟数据文件mydata.js1.效果如图页面滚动,吸顶区吸顶,下面侧栏左栏点击,右栏自动滚动到当前分类;右栏滚动左栏自动激活当前分类按钮2.demo主要包括三部分虚拟数据js文件,页面vue,本地图片3.下面附上源码:mydata.jsconst原创 2021-07-21 15:17:48 · 1052 阅读 · 0 评论 -
vue中常用的吸顶操作,滚动时菜单吸顶
希望文章能对你有所帮助,创作不易在此求个赞,谢谢哈~~1.应用场景应用场景如图:**未吸顶时滚动到底部时显示:当滚动时,侧栏吸顶,这样滚到最底部也能展示菜单:**2.解决方案首先思路就是监听见面的滚动事件,当页面滚动距离超过头部区域时(操作侧栏吸顶),小于头部区域高度时恢复(操作侧栏不吸顶),吸顶和不吸顶利用的是样式类来控制监听滚动代码(注意在mounted钩子函数执行监听,因为这时候dom都加载完了):mounted() { window.addEventListener("原创 2020-07-28 18:10:49 · 1476 阅读 · 0 评论 -
transform和animation同时作用于同一个元素
如图,对下面方格进行了倾斜和旋转的动画,会发现动画执行时,元素又变回了正方形,而没有倾斜,如何保持倾斜状态下旋转呢?<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>转换加动画&l原创 2020-07-21 16:16:13 · 434 阅读 · 0 评论 -
css3动画animation基础详解,给元素添加多个动画时动画不分先后同时执行
效果如图:上面添加了两个动画,一为旋转,二为变色,当给section元素添加这两个动画时,两个动画不分先后同时执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D基础动画</title> <style> html{ height: 100%;原创 2020-07-21 14:53:39 · 5755 阅读 · 1 评论 -
css3动画的过渡
效果图:右边是动画,左边是过渡,过渡需要提前设置好过渡的样式,时间,速率等等属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D的过渡</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></scrip原创 2020-07-21 14:43:25 · 200 阅读 · 0 评论 -
css3动画的转换transform详解
注意transform转换要实现多个效果时,不能分开写,否则后面的transform效果会覆盖前面的transform效果,要达到多个效果时,需要使用混合写法,可参考下面两种混合写法效果如图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2D动画的转换</title> <style>原创 2020-07-21 10:57:59 · 260 阅读 · 0 评论 -
css设置模糊背景
在设置背景的类样式中设置filter: blur(模糊值),如:filter: blur(5px)/* 模糊背景图片 */#workShow .imgItem {width: 100%;height: 270px;position: relative;/* border-bottom: 1px solid red; */}#workShow .imgItem::before {width: 100%;height: 270px;filter: blur(5px);content: "原创 2020-07-20 17:26:52 · 473 阅读 · 0 评论 -
包括滚动条高度水平垂直居中和相对于浏览器窗口水平垂直居中的方法
包括滚动条高度水平垂直居中效果如图:包括滚动条高度水平垂直居中代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>垂直居中</title> <原创 2020-07-20 17:01:00 · 481 阅读 · 0 评论