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
4年前
Css
CSS 3D世界,3D 透视照片墙
有了前面2章内容,大家应该对CSS3D的构建,都有了一定认知了,动手能力强的小伙伴可能已经开始自己做好看的效果了。今天我们就来滚固一下前面学的知识,下面有一个"3D照片墙"示例来加深一下我们所学的知识。结构用一个容器div.photo,装六个面<divclass="photo"><divclass="example"></div><divclass="example"></div><divclass="example"></di
547524
3381
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
2年前
Css
神奇的 CSS,让文字智能适配背景颜色
最近几天,有好几个同学都问了同样一个问题。页面上有一段文本,能否实现这段文本在不同背景色下展示不同的颜色?也就是俗称的智能变色。像是下面这样:文本在黑色底色上表现为白色,在白色底色上表现为黑色。看似很复杂的一个效果,但是其实在CSS中非常好实现,今天就介绍这样一个小技巧,在CSS中,利用混合模式mix-blend-mode:difference,让文字智能适配背景颜色。混合模式mix-blend-mode:differenceCSS3新增了一个很有意思的属性--mix-blend-mode,其中mix和b
545813
3263
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
2年前
Css
3D 穿梭效果?使用 CSS 轻松搞定
背景周末在家习惯性登陆Apex,准备玩几盘。在登陆加速器的过程中,发现加速器到期了。我一直用的腾讯网游加速器,然而点击充值按钮,提示最近客户端升级改造,暂不支持充值(这个操作把我震惊了~)。只能转头下载网易UU加速器。打开UU加速器首页,映入眼帘的是这样一幅画面:瞬间,被它这个背景图吸引。出于对CSS的敏感,盲猜了一波这个用CSS实现的,至少也应该是Canvas。打开控制台,稍微有点点失望,居然是一个.mp4文件:再看看Network面板,这个.mp4文件居然需要3.5M?emm,瞬间不想打游戏了。这么个
546766
3298
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
1年前
Css
【动画进阶】有意思的 Emoji 3D 表情切换效果
最近,群里面的同学发了这么一个非常有意思是动画效果:原效果地址--CodePenDemo--LetterHop当然,原效果,主要使用了GSAP动画库以及一个3D文字JavaScript库:import{Those3DTexts}from"https://cdn.skypack.dev/that-3d-text-library";import{gsap}from"https://cdn.skypack.dev/gsap";import{MotionPathPlugin}from"https://cdn.skypack.dev/gsap/MotionPathPlugin";gsa...
452488
1959
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
3年前
Css
如何实现单行/多行文本溢出的省略样式?
如何实现单行/多行文本溢出的省略样式?一、前言在日常开发展示页面,如果一段文本的数量过长,受制于元素宽度的因素,有可能不能完全显示,为了提高用户的使用体验,这个时候就需要我们把溢出的文本显示成省略号对于文本的溢出,我们可以分成两种形式:单行文本溢出多行文本溢出二、实现方式单行文本溢出省略理解也很简单,即文本在一行内显示,超出部分以省略号的形式展现实现方式也很简单,涉及的css属性有:text-overflow:规定当文本溢出时,显示省略符号来代表被修剪的文本white-space:设置文字在一行显示,不能
545147
3242
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
6年前
Css
Jquery和CSS3轻松实现放大镜效果
前言每当打开淘宝,天猫等pc端时,看到心仪的物品时,点击图片时,便呈现出放大的效果。有没有去理解分析它的原理?是不是感觉非常的神奇?当真正地去接触,其实非常好理解。下面一起来学习!在线演示地址[codepen_embedheight="350"theme_id="1"slug_hash="VoaxvK"data-default-tab='result'user="javanf"]SeethePenDcHupbyEltonMesquita(@eltonmesquita)onCodePen.[/codepen
558598
6269
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
2年前
Css
见微知著,从两道有意思的 CSS 面试题,考察你的基础
今天在论坛,有看到这样一道非常有意思的题目,简单的代码如下:<div><pid="a">FirstParagraph</p></div>样式如下:p#a{color:green;}div::first-line{color:blue;}试问,标签<p>内的文字的颜色,是green还是blue呢?有趣的是,这里的最终结果是蓝色,也就是color:blue生效了。不对,正常而言,ID选择器的优先级不应该比伪类选择器高么?为什么这里反而是伪类选择器的优
546319
3342
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
2年前
Css
你可能不知道的 transition 技巧与细节
CSS中,transition属性用于指定为一个或多个CSS属性添加过渡效果。最为常见的用法,也就是给元素添加一个transition,让其某个属性从状态A变化到状态B时,不再是非常直接突兀,而是带有一个补间动画。举个例子:<div></div>复制代码div{width:140px;height:64px;transition:.8stransformlinear;}div:hover{transform:translate(120px,0);}复制代码当然,除了上述基本的用法,
546281
3312
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
2年前
Css
一种巧妙的使用 CSS 制作波浪效果的思路
在之前,我介绍过几种使用纯CSS实现波浪效果的方式,关于它们有两篇相关的文章:纯CSS实现波浪效果!巧用CSS实现酷炫的充电动画本文将会再介绍另外一种使用CSS实现的波浪效果,思路非常有意思。从定积分实现曲边三角形面积说起在进入主题之前,先看看这个,在高等数学中,我们可以通过定积分求二次函数曲边图形面积。我们可以将曲线下的面积分割成n个的细高的矩形,当n无限趋近于无穷时,所有矩形的面积就等于曲边图形的面积。两张简单的示意图,图取自为什么定积分可以求面积?:当n无限趋近于无穷时,所有矩形的面积就等于曲边图形
545241
3248
0
Javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
Javan
5年前
Css
CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面
前言日子总是像从指尖流过的细沙,在不经意间悄然的滑落。转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦)。先来看看今天要实现的效果原图:玩过王者的应该都熟悉,这个页面的效果。为什么要实现这个效果了?第一:王者这么火,电竞这么火。第二:主要还是来学习CSS3的线性、径向渐变、旋转、缩放以及动画。图形解析1、背景(径向渐变)2、玩家(player)加载动画(线性渐变)3、背景镂空旋转正方形4、正方形文字放大动画5、文字按钮制作下面我们按上述步骤实现背景制作back
556516
3857
0
下拉加载更多
您好
去签到
你已经连续签到
0
天
猜你喜欢
换一换
最新文章
更多