Web秀
首页
专栏
文章
问答
热点
导航
实例
文章
登录
首页
前端
JavaScript
Vue.js
CSS
Uni-App
专栏
问答
工具
全网热点
导航
前端
设计
实例
登录
综合
Uni-App
Webpack
React
Html
Electron-Vue
Electron
Vue-Nuxt
TypeScript
NodeJs
web前端
Vue
Css
JavaScript
比特币
ThreeJs
工具类
面试
服务器
小程序
其他
展开
推荐
最新
热榜
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
5年前
Css
CSS3中用background-image实现粒子动画效果
前言继续前几天的文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来,你信吗?》,添加按钮、背景粒子动画效果。其实在码代码的时候会发现,很多东西都是殊途同归的,方法千千万,能解决问题的都是好办法,不一定非要把代码写的特别高深,这样反而后来的人看不懂,维护根据头疼。所以用最简单通俗的代码,更能利于后期的维护开发。ok!先来看看背景粒子动画效果预览图:以下代码都是基于前一篇文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来,你信吗?》的,所以没有了解的可以先去看看这篇文章。按钮点击粒子动画<divclas
557031
3698
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
4年前
Css
CSS 3D世界,360°旋转水晶魔方
你家有类似的水晶魔方吗?我第一次见到它的时候,就觉得这个东西真不错,所以我家现在有2个。不过一个已经坏掉了,坐车放在箱子里面,颠簸导致水晶的四个角都破损了,大家如果要携带一定要小心哦。现在我们来制作一个永远不会破损的水晶魔方,用代码实现,要不代码出bug,永远不坏。CSS3实现水晶魔方效果。结构水晶是一个正方体,所以有6个面,用html表示如下:<ulclass="cube-inner"><liclass="top"></li><liclass="bottom"&
548841
3276
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画
本文将介绍一种基于CSS变量技巧,通过合理使用CSS变量,实现CSS动画@keyframes的复用。CSS变量CSS变量大家应该都比较熟悉了,已经不能算是新知识了,快速过一遍。CSS变量(CSSVariable),在之前也叫做CSS自定义属性,其使用方式如下://声明一个变量::root{--bgColor:#000;}这里我们借助了上面#12、结构性伪类中的:root{}伪类,在全局:root{}伪类中定义了一个CSS变量,取名为--bgColor。定义完了之后则是使用,假设我要设置一个div的背景色为黑色:.main{background:var(--bgCo...
544958
3320
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
3年前
Css
说说flexbox(弹性盒布局模型),以及适用场景?
说说flexbox(弹性盒布局模型),以及适用场景?一、是什么FlexibleBox简称flex,意为”弹性布局”,可以简便、完整、响应式地实现各种页面布局采用Flex布局的元素,称为flex容器container它的所有子元素自动成为容器成员,称为flex项目item容器中默认存在两条轴,主轴和交叉轴,呈90度关系。项目默认沿主轴排列,通过flex-direction来决定主轴的方向每根轴都有起点和终点,这对于元素的对齐非常重要二、属性关于flex常用的属性,我们可以划分为容器属性和容器成员属性容器属性
546727
3297
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
3年前
Css
如果要做优化,CSS提高性能的方法有哪些?
一、前言每一个网页都离不开css,但是很多人又认为,css主要是用来完成页面布局的,像一些细节或者优化,就不需要怎么考虑,实际上这种想法是不正确的作为页面渲染和内容展现的重要环节,css影响着用户对整个网站的第一体验因此,在整个产品研发过程中,css性能优化同样需要贯穿全程二、实现方式实现方式有很多种,主要有如下:内联首屏关键CSS异步加载CSS资源压缩合理使用选择器减少使用昂贵的属性不要使用@import内联首屏关键CSS在打开一个页面,页面首要内容出现在屏幕的时间影响着用户的体验,而通过内联css关键
546070
3342
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
5年前
Css
CSS3实现瀑布流布局(display: flex/column-count/display: grid)
前言在css3到来之前,都是用js来操作dom元素,计算位置,大小,形成瀑布流布局。但是有了css3之后,一切实现起来就太简单了,没有复杂的逻辑,轻松的几行样式代码就可以搞定。回顾以前(js瀑布流)基于waterfall.js(11.8kb),还得写入基础的样式,初始化等等,对比其他js,已经是很简单了。varwaterfall=newWaterFall({container:'#waterfall',pins:".pin",loader:'#loader',gapHeight:20,gapWidth:2
562811
4375
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
5年前
Css
css3简易的天气图标动画特效
前言前面文章《CSS3线性渐变、阴影、缩放实现动画下雨效果》实现了下雨的动画效果,现在我们来绘制更多天气相关的动态图标。上图6种天气,我们就分开一一展示给小伙伴们,希望能给大家带来帮助。晴朗<divclass="iconsunny"><divclass="sun"><divclass="rays"></div></div></div>sun标签绘制圆环,rays及其伪类绘制射线,然后添加动画,其实旋转。body{background-
556695
3855
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
2年前
Css
巧用 CSS 实现动态线条 Loading 动画
有群友问我,使用CSS如何实现如下Loading效果:这是一个非常有意思的问题。我们知道,使用CSS,我们可以非常轻松的实现这样一个动画效果:<div></div>复制代码div{width:100px;height:100px;border-radius:50%;border:2pxsolidtransparent;border-top:2pxsolid#000;border-left:2pxsolid#000;animation:rotate3sinfinitelinear;}
545364
3286
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
5年前
Css
CSS3中Flex布局(弹性布局)
Flex布局是什么?Flex是FlexibleBox的缩写,就是灵活的弹性页面布局。作用是为盒子模型提供强大的灵活性功能;兼容性:也被所有主流浏览器所支持任何一个容器都可以指定为Flex布局,包括块级元素和行内元素。块级元素的Flex布局声明方式为.box{display:flex;}行内元素的Flex布局声明方式为.box{display:inline-flex;}Webkit内核的浏览器,必须加上-webkit前缀.box{display:-webkit-flex;/*Safari*/display:
556997
3223
0
前端小智
Lv
0
关注
0
关注者
关注
前端小智
1年前
Css
完美掌握多行文本修剪技巧:CSS中的实用指南
这篇文章深入讨论了在CSS中裁剪多行文本的方法,以提高网页的外观和用户体验。作者首先介绍了常见的CSS文本裁剪技术,例如使用text-overflow和overflow属性。然后,他引入了新的CSS属...
534498
2847
0
下拉加载更多
您好
去签到
你已经连续签到
0
天
猜你喜欢
换一换
最新文章
更多