Web秀
首页
专栏
文章
问答
热点
导航
实例
文章
登录
首页
前端
JavaScript
Vue.js
CSS
Uni-App
专栏
问答
工具
全网热点
导航
前端
设计
实例
写文章
登录
综合
小程序
服务器
面试
工具类
ThreeJs
比特币
JavaScript
Css
Vue
Uni-App
NodeJs
TypeScript
Vue-Nuxt
Electron
Electron-Vue
Html
React
Webpack
其他
展开
推荐
最新
热榜
javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
javan
1年前
Css
CSS ::marker 让文字序号更有意思
本文将介绍CSS中一个比较有意思的伪元素::marker,利用它,我们可以让我们的文字序号变得更加的有意思!什么是::markerCSS伪元素::marker是从CSSPseudo-ElementsLevel3开始新增,CSSPseudo-ElementsLevel4中完善的一个比较新的伪元素,从Chrome86+开始得到浏览器的支持。利用它,我们可以给元素添加一个伪元素,用于生成一个项目符号或者数字。正常而言,我们有如下结构:<ul><li>Contagious</li&g
336
1
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
4月前
Css
使用 mask 实现视频弹幕人物遮罩过滤
经常看一些LOL比赛直播的小伙伴,肯定都知道,在一些弹幕网站(Bilibili、虎牙)中,当人物与弹幕出现在一起的时候,弹幕会“巧妙”的躲到人物的下面,看着非常的智能。简单的一个截图例子:其实,这里是运用了CSS中的MASK属性实现的。mask简单用法介绍之前在多篇文章都提到了mask,比较详细的一篇是--奇妙的CSSMASK,本文不对mask的基本概念做过多讲解,向下阅读时,如果对一些mask的用法感到疑惑,可以再去看看。这里只简单介绍下mask的基本用法:最基本,使用mask的方式是借助图片,类似这样
23
0
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
4月前
Css
一行 CSS 代码的魅力
之前在知乎看到一个很有意思的讨论一行代码可以做什么?那么,一行CSS代码又能不能搞点事情呢?CSSBattle首先,这让我想到了,年初的时候沉迷的一个网站CSSBattle。这个网站是核心玩法就是:官方给出一张图形,在给定的400x300的画布上,能够用越短的代码实现它,分数就越高。注意是,完全一模一样还原。其中,第一题就非常有趣,看看题目:嗯,想一想,如果给定这样一张图形,告诉你HTML的大小是400pxx300px,图片中使用到的颜色是#5D3A3A,#B5E0BA,你会怎么用CSS去实现它呢?因为要
37
0
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
4月前
Css
CSS 小技巧 | 一行代码实现头像与国旗的融合
到国庆了,大家都急着给祖国母亲庆生。每年每到此时,微信朋友圈就会流行起给头像装饰上国旗,而今年又流行这款:emm,很不错。那么,将一张国旗图片与我们的头像,快速得到想要的头像,使用CSS如何简单实现呢?有人认为是改变其中一张图的透明度,实际上不是的。仔细观察合成后的头像,最左边的基本上只能看到红旗看不到原本的头像内容,而最右边基本只能看到头像而不再显示红旗的红色背景。在CSS中使用mask遮罩,一行代码实现头像与国旗的融合在CSS中,我们仅仅需要将两张图片叠加在一起,对上层的图片使用mask属性,一行代码
32
1
0
前端小智
Lv
0
关注
0
关注者
关注
前端小智
22天前
Css
新提案,初识CSS的object-view-box属性
有梦想,有干货,微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文GitHubgithub.com/qq449245884…已收录,有一线大厂面试完整考点、资料以及我的系列文章。在开发时,一直希望有一种原生的CSS方式来裁剪图片,并将其定位在我需要的任何方向。这可以通过使用一个额外的HTML元素和不同的CSS属性来实现,后面解释。在这篇文章中,将带领大家了解JakeArchibald在今年年初提出的新的CSS属性object-view-box。它允许我们裁剪或调整被替换的HTML元素,就像一个<
24
0
0
前端小智
Lv
0
关注
0
关注者
关注
前端小智
2月前
Css
27个精美的时间线(含源代码)
有梦想,有干货,微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文GitHubgithub.com/qq449245884…已收录,有一线大厂面试完整考点、资料以及我的系列文章。今天,让我们来学习如何使用HTML、CSS、Javascript为网站开发和设计创建时间线。1.垂直时间线HTMLCSS源码:codepen.io/itbruno/pen…2.垂直时间轴HTML模板源码:codepen.io/P233/pen/nb…3.垂直时间线网站事例地址:codepen.io/z-/pen/bwPB…4
25
0
0
chokcoco
Lv0
iCSS前端趣闻
0
关注
0
关注者
关注
chokcoco
4月前
Css
奇思妙想 CSS 文字动画
之前有些过两篇关于字体的文章,是关于如何定义字体的:你该知道的字体font-familyWeb字体font-family再探秘本文将会和这篇--CSS奇思妙想边框动画类似,讲一些文字效果,利用不同的属性搭配,实现各式各样的文字动效。GoogleFont在写各种DEMO的时候,有的时候一些特殊的字体能更好的体现动画的效果。这里讲一个快速引入不同格式字体的小技巧。就是GoogleFont这个网站,上面有非常多的不同的开源字体:当我们相中了一个我们喜欢的字体,它也提供了非常快速的便捷的引入方式。选中对应的字体,
26
0
0
javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
javan
2年前
Css
页面导入样式时,使用link和@import有什么区别?
先回答区别,再扩展一下。link和@import有什么区别区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。区别4:link支持使用Javascript控制D
8564
424
0
javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
javan
3年前
Css
CSS制作可爱的小猪,祝大家2019“猪”事顺心
前言时间过得真快,2019年也是说来就来,时间是真的不等人啊。新的一年小伙伴们都有什么目标呢?赶紧向着目标努力吧,2020也会眨眼即到。2019,祝大家“猪”事顺利,事事顺心!接下来进入今天的课题。用CSS制作一个小小的、可爱的小猪。主要用到的技术有border-radius、transform:rotate等等。预览图:主体结构<divclass="pig"><divclass="body"><divclass="ear"></div><divcla
9910
526
0
javan
Lv6
专注于前端知识分享
0
关注
0
关注者
关注
javan
1年前
Css
CSS简笔画:纯CSS绘制一顶帽子
夏天,人人都希望有一顶漂亮的帽子吧?来,我送给你。看图解构帽子结构很简单,分为帽檐、帽冠、饰带、饰带上面有花朵html帽子结构<divclass="cap"><!--帽冠--><divclass="top"><!--饰带--><divclass="lace"><!--花朵--><divclass="flower"><!--花瓣--><divclass="petal"></div><
1967
8
0
下拉加载更多
您好
去签到
你已经连续签到
0
天
最新文章
更多