css层叠排版,请收下这72个炫酷的CSS技巧
前言
CSS是一门很特殊的语言,不像一般的编程语言那样需要抽象的思维和严密的逻辑,它真正需要的是想象力——将你脑中所想的意象用代码来表现出来。那么意象又是如何产生的呢?最常用的方法就是探索和观察。举个例子,笔者平时热爱看番,每看到有意思的场景画面总会下意识地记录下来,这对动画创作会非常有帮助;同样地,一旦笔者发现一个制作精良的网站,也会将网站上那些吸引人的元素仔细审查一遍,灵感也自然就有了。
演示网址2:shiroi
本文的技巧将不会止步于72个。灵感不息,创作不止。
注意
兼容性
本文的所有技巧都未考虑兼容性,因为个人认为兼容性是一种束缚,它会妨碍你写出优秀的作品。如果硬是要考虑的话请自行解决,这个网站或许能帮到你。
框架
本文所用到的技巧皆是SCSS+TypeScript。如果想移植到React或Vue上的话请根据框架本身的特点自行适配。笔者不用这类框架的原因很简单:框架很容易就会过时,原生CSS+JS才是王道。
教程
笔者实在是不擅长写这类东西,不过倒是可以把常用的属性和模式列出来,供大家参考参考。
常用属性:猛戳这里
常用模式:猛戳这里
动画
利用不同的delay实现交错动画
文本
利用background-clip:text配合color实现渐变文字效果
利用动态hsl颜色实现彩虹文字效果
利用text-shadow实现发光文字效果
利用text-shadow实现伪3D文字效果
利用web animation实现冒泡文字效果
利用动态max-width实现文本展开效果
利用绝对定位、3D变换和JS实现翻转文字
视觉
利用backdrop-filter实现毛玻璃背景效果
利用背景、绝对定位和filter实现毛玻璃景深效果
利用blur和contrast滤镜实现融合效果
利用元素叠加blur滤镜实现日光效果
利用mix-blend-mode:screen实现文本遮罩效果
利用-webkit-box-reflect实现倒影效果
页面
利用3D变换实现视差效果
利用position:sticky实现粘性滚动效果
利用绝对定位和交错动画实现镜头拉伸背景效果
利用伪元素、绝对定位和动画实现滑动幻灯片
组件
利用border-radius实现曲边导航栏
利用动画和绝对定位实现汉堡菜单
利用伪元素和动画实现动态划线效果
利用伪元素和overflow:hidden实现交错分割文本菜单
利用伪元素和overflow:hidden实现填充按钮
利用伪元素、渐变和overflow:hidden实现闪光按钮
利用绝对定位、动画、渐变和overflow:hidden实现蛇形边框按钮
利用伪元素、渐变、背景运动实现动态渐变边框
利用oveflow:hidden、max-height和:target实现手风琴菜单
利用overflow:hidden和scroll相关属性实现无缝轮播图
利用兄弟选择器配合伪元素自定义单复选框
利用各种属性实现各种按钮特效
利用多重box-shadow阴影实现发光按钮菜单
利用counter在伪元素的content中显示var的值
利用-webkit-slider-thumb定制滑块
利用伪类校验表单
利用动画实现卡片展开
利用clip-path实现卡片多方向展开
利用没有perspective的transform-style:preserve-3d实现等距3D效果
利用3D变换实现3D下拉菜单
利用动画和JS实现简单的分页栏
利用伪元素、overflow:hidden、动画、JS实现标签页
利用伪元素、:checked、~兄弟选择器实现5星评分
运用伪元素、层叠关系、3D变换、JS实现翻牌时钟
利用鼠标事件监听和web animation实现图片悬浮菜单
利用conic-gradient,伪元素和CSS变量实现圆盘度量计
css层叠排版,请收下这72个炫酷的CSS技巧相关推荐
- 请收下这 72 个炫酷的 CSS 技巧
来源:alphardex https://juejin.cn/post/6844904031513477128 前言 CSS是一门很特殊的语言,不像一般的编程语言那样需要抽象的思维和严密的逻辑,它真正 ...
- 软件测试公司折扣政策,@软件企业看,这些税收优惠政策请收下
原标题:@软件企业看,这些税收优惠政策请收下 软件是信息技术之魂.网络安全之盾.经济转型之辙.数字社会之基,软件产业正以其强大的技术创新力日益成为数字经济发展的"领跑团".记者从苏 ...
- 羊皮纸背景计算机,整天面对屏幕的你,请收下这几个护眼小技巧
原标题:整天面对屏幕的你,请收下这几个护眼小技巧 现代办公,电脑已经成为必不可少的工具 "眼睛干涩""看东西模糊""腰酸背痛脖子疼" 很多人 ...
- KeyError: [] not found in axis_最IN黄浦 | 万圣狂欢倒计时!露台派对、变装游、沉浸式密室...请收下这份黄浦活动指南~_电竞...
原标题:最IN黄浦 | 万圣狂欢倒计时!露台派对.变装游.沉浸式密室...请收下这份黄浦活动指南~ Ttick or Treat 一年一度的万圣节就要来了, 黄浦不少商圈都策划了多场精彩活动: BFC ...
- 花一千多学python值吗_Python爬虫应该怎么学?程序猿花了一周整理的学习技巧,请收下...
原标题:Python爬虫应该怎么学?程序猿花了一周整理的学习技巧,请收下 Python爬虫为什么受欢迎 如果你仔细观察,就不难发现,懂爬虫.学习爬虫的人越来越多,一方面,互联网可以获取的数据越来越多, ...
- 知名演员从北大毕业!学位论文让网友直呼:请收下我的膝盖!
来源:广州日报 编辑:双一流高校 近日,49岁香港男艺人马浚伟发布微博称,自己已通过北京大学光华管理学院硕士研究生学位论文答辩,顺利毕业. 相关的一则话题达到了1200万的阅读量,超7000名网友参与 ...
- 请收下!春节聚会装B指南!附研习社工作汇报(2020)
导语 大家好,我是智能仓储物流技术研习社的社长,老K. 除夕快乐 今天是除夕,老K在这里祝大家新年快乐,牛年新大运.春节聚会又要搞起来了,给大家带来这份装逼指南.老K只能帮大家到这里了. 2020年, ...
- 凌恩生物资讯|细菌完成图,坑多专家少——请收下这份避坑指南
尝试做细菌完成图的你是不是有很多疑问 这份避坑指南请收好! 小坑1."1 +X Contig,0 Gap"代表什么? 答:"1 Contig,0 Gap"的承诺 ...
- [女神节] 请收下为您精选的节日礼物
节日将至,架构师技术联盟微信公众号为广大读者精选技术文章,作为女神佳节的精美礼物,略表寸心,请果断收下吧.2017年我们一起携手共进,继续努力,希望无论在工作还是生活上都再创新高,希望每位都能赢取白富 ...
最新文章
- C#中组件与控件的主要区别是什么?
- 洛谷P2068 统计和题解
- 天天用Synchronized,底层原理是个啥?
- 查看linux系统属性
- orm jdbc_Spring Data JDBC通用DAO实现–迄今为止最轻量的ORM
- OBTW的完整形式是什么?
- matlab如何找出最小的数据,读取数据并找出全部数据的最大值和最小值
- 在consul上注册web服务
- python打开word内对象_Python操作Word:常用对象介绍
- php获取客户端信息(浏览器/IP/操作系统)代码
- PCS7 Step7块破解 解锁 FC FB s7canopener S7 Blocks Unlock
- 怎么降低照片大小kb?
- 数据库查询数据去除重复
- php中column函数,PHP array_column() 函数用法及示例
- 电商路演投资计划融资报告PPT模板
- 解决迅雷极速版强制升级-20190715
- html5游戏防止作弊,html5 canvas模拟的小球躲避小游戏
- Proteus仿真STM32F103R6输出正弦波
- 【软件测试教程】手机号码归属地开发文档
- 使用NDWI提取水体详细流程