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
CSS画各种图形(五角星、吃豆人、太极图等)
这里说的用css做图形,其实是使用一个html元素,结合它的伪元素::before&::after(不需要其他额外的非伪元素的html元素),然后定义样式来生成所需的图形。这里不是说不可以使用其它的html元素,只是这样的好处是在html方便引入,而不需要每次引入都需要添加大量的html片段(夸张说法)。可以先预览演示地址主要方法可以使用的样式属性如下:*border*border-radius*transform*box-shadow为了兼容性,使用pseudo-elements(::befor
558176
3941
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
妙用 CSS 构建花式透视背景效果
本文将介绍一种巧用background配合backdrop-filter来构建有趣的透视背景效果的方式。本技巧源自于一名群友的提问,如何构建如ElementUI文档的一种顶栏背景特效,看看效果:仔细看,在页面的的滚动过程中,顶栏的背景不是白色的,也不是毛玻璃效果,而是能够将背景颗粒化:准确而言,是一种基于颗粒化的毛玻璃效果,元素首先是被颗粒化,其次,元素的边缘也是在一定程度上被虚化了。那么,我们该如何实现这个效果呢?需求拆解上述效果看似神奇,其实原理也非常简单。主要就是颗粒化的背景background加上
545423
3325
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
有意思的鼠标指针交互探究
今天,来实现这样一个有意思的交互效果:将原本的鼠标指针样式,修改成自己想要的效果,并且添加上一些特殊的交互效果。修改鼠标样式首先,第一个问题,我们可以看到,上图中,鼠标指针的样式被修改成了一个圆点:正常而言应该是这样:当然,这里比较简单,在CSS中,我们可以通过cursor样式,对鼠标指针形状进行修改。利用cursor修改鼠标样式cursorCSS属性设置鼠标指针的类型,在鼠标指针悬停在元素上时显示相应样式。cursor:auto;cursor:pointer;...cursor:zoom-out;/*使
546242
3204
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
5年前
Css
CSS3 calc()详细介绍及使用
前言calc()对很多同学来说,或许很陌生。看其外表像个函数,既然是函数为什么又出现在CSS中呢?这一点也让我百思不得其解。在制作页面的时候,总会碰到有的元素是100%的宽度。众所周知,如果元素宽度为100%时,其自身不带其他盒模型属性设置还好,要是有别的,那将导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。我们换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,
556123
3714
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
高阶 CSS 技巧在复杂动效中的应用
最近我在CodePen上看到了这样一个有意思的动画:整个动画效果是在一个标签内,借助了SVGPATH实现。其核心在于对渐变(Gradient)的究极利用。完整的代码你可以看看这里--CodePenDEMO--tothefuture?ByJaneOri]源代码还是非常非常复杂的,并且叠加了复杂的SVGPATH路径。我尝试着将其稍微拆分成几小块,运用不同的CSS高阶技巧从另外一个方面方向重新实现了一遍。因为整个过程还是有非常多有意思的CSS技巧,本文就给大家分享一下。实现上半部分背景加落日首先,我们来实现上半
545060
3332
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
5年前
Css
VS Code中6个令人惊叹的CSS扩展
前言VisualStudioCode最令人印象深刻的部分之一是可定制性,尤其是通过扩展。随着大量开发人员创建扩展,功能实际上是无穷无尽的!作为一名程序猿,或多或少都会码一点点CSS,不管是简单的css颜色、字体设置,还是高级的css动画等。现在就为大家推荐一下VSCode中用于编写CSS的一些最佳扩展,让你编写CSS时更得心应手。1、HTMLCSSSupport2、IntellisenseforCSSClassNames3、Autoprefixer4、CSSPeek5、Prettier-CodeForma
563561
3512
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
3年前
Css
如何使用css完成视差滚动效果?
如何使用css完成视差滚动效果?一、是什么视差滚动(ParallaxScrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层、内容层、悬浮层当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果二、实现方式使用css形式实现视觉差滚动效果的方式有:background-attachmenttransform:translate3Dbackground-attachment作用是设置背景图像是否固定或者随着页面的其余部分滚动值分别有如
546286
3235
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
5年前
Css
利用CSS线性渐变、阴影、缩放实现动画下雨效果
前言好雨知时节,当春乃发生。随风潜入夜,润物细无声。春节已经过去,新的一年刚刚开始,小伙伴们,今年你的目标是什么?定个小目标,挣他一个亿?分享一下我的目标,是让大家的web前端能力,更上一层楼。下面进入主题,看下图:这个动画效果,如果让你来做,你会选择什么方式?相信很多小伙伴都会用gif图片。其实用css实现也很简单。如果文章中有不懂的知识点,请点击文章最下方,推荐文章哦动画解析很明显这个动画效果,是上中下结构,所以我们分3部分实现。1、云:由多个圆拼接而成,并且有上下浮动的动画效果2、雨滴:多个,从上而
558680
3903
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
2年前
Css
神奇的滤镜!巧妙实现内凹的平滑圆角
背景某日,群友们在群里抛出这样一个问题,如何使用CSS实现如下的布局:在CSS世界中,如果只是下述这种效果,还是非常容易实现的:一旦涉及到圆角或者波浪效果,难度就会提升很多。实现这种连续平滑的曲线其实是比较麻烦的,当然,也不是完全没有办法。本文,就会带大家看看,使用CSS实现上述内凹平滑圆角效果的一些可能的方式。利用圆的衔接实现第一种方法比较笨。我们可以使用多个圆的衔接实现。首先,我们会实现一个内部挖出一个矩形的矩形:<div></div>复制代码核心CSS代码如下:div{hei
545157
3290
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
3年前
Css
如何实现单行/多行文本溢出的省略样式?
如何实现单行/多行文本溢出的省略样式?一、前言在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号对于文本的溢出,我们可以分成两种形式:单行文本溢出多行文本溢出二、实现方式单行文本溢出省略理解也很简单,即文本在一行内显示,超出部分以省略号的形式展现实现方式也很简单,涉及的css属性有:text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本white-space:设置文字在一行显示,不能
545121
3242
0
下拉加载更多
您好
去签到
你已经连续签到
0
天
猜你喜欢
换一换
最新文章
更多