fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

CSS-Inspiration
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://chokcoco.github.io/CSS-Inspiration/#/./init
GitHub:https://github.com/chokcoco/CSS-Inspiration
网站描述:在这里找到写 CSS 的灵感

css-Inspiration涵盖了css的许多常见的特效,例如布局方式、border、伪元素、滤镜、背景3d等。这些都是css里面十分重要的知识点,当我们学习完css基础之后,可以利用此项目来制作一些常用的特效,也可以巩固基础知识。

希望这里可以让你寻找到使用或者是学习 CSS 的灵感,以分类的形式,展示不同 CSS 属性或者不同的课题使用 CSS 来解决的各种方法。  


布局(Layout)

  • 实现水平垂直居中最便捷的方法
  • 双飞翼布局
  • grid 布局配合 clip-path 实现 GTA5 封面
  • flex 实现圣杯布局
  • 圣杯布局
  • CSS实现瀑布流布局(column-count)
  • CSS 实现瀑布流布局(display: flex)
  • CSS实现瀑布流布局(display: grid)
  • 6种实现多列等高的方法
  • 多方案实现跨行或跨列布局
  • 多种方案实现单列等宽,其他多列自适应均匀布局
  • 使用 margin auto 实现 flex 下的 align-self: flex-end
  • 使用 margin auto 实现 flex 下的 justify-content: space-between

阴影(box-shadow、drop-shadow)

  • Box-shadow实现圆环进度条动画
  • 使用box-shadow/渐变实现内切角
  • Neon Effect 3D TEXT
  • box-shadow实现霓虹氖灯文字效果
  • 使用 box-shadow 实现半透明遮罩
  • 线性渐变模拟长阴影
  • 单侧投影
  • 立体投影
  • 线性渐变配合阴影实现条纹立体阴影条纹字
  • 立体文字阴影
  • 浮雕风格按钮
  • box-shadow实现背景动画 2
  • box-shadow实现背景动画
  • 单标签实现抖音LOGO
  • 单标签实现叉子图形
  • 单标签借助 inset shadow 实现IE LOGO

伪类/伪元素

  • 伪元素 hover 实现纯 CSS 方式控制动画的暂停与播放
  • 伪元素 target 实现纯 CSS 方式控制动画的暂停与播放
  • 伪元素 checked 实现纯 CSS 方式控制动画的暂停与播放
  • 伪元素实现边界智能判断移动
  • 伪元素+border实现气泡对话框
  • 使用 checked 伪类实现纯 CSS Tab 切换
  • 使用 target 伪类实现纯 CSS Tab 切换
  • placeholder-shown 配合 focus-within 实现 input 输入交互
  • focus-within switch tab
  • 伪元素 focus-within 纯 CSS 方式实现掘金登陆特效
  • 伪元素实现打点 loading 效果
  • 伪元素遮罩实现线条 loading 效果
  • 使用:not()伪类控制特殊边框样式
  • 使用:not()伪类实现弹窗背景元素模糊

滤镜(fliter)

  • 小球穿梭放大loading动画
  • 小球穿梭效果
  • 使用 filter:blur | filter:constrast 生成特殊融合效果
  • 使用 filter:blur | filter:constrast 生成火焰效果2
  • 使用 filter:blur | filter:constrast 生成火焰效果
  • 单标签纯CSS实现幽灵动画
  • 使用 hue-rotate 实现渐变背景动画
  • 滤镜及混合模式混搭特效
  • 使用 drop-shadow 配合 clip-path 生成规则阴影
  • 使用 filter:blur 生成彩色阴影
  • 单标签实现滴水效果

边框

  • 活用 border-radius, 实现充电动画
  • 利用 border-image 实现动态边框
  • 活用 border-radius, 单标签线条动画
  • 使用 border-radius 的变化模拟绳子下坠
  • border-radius变换实现loading效果
  • 活用 outline 巧妙实现加号符号
  • 巧用 overflow 及实现边框线条动画
  • border-color 变换实现文字输入效果
  • 活用 border-radius, 实现波浪百分比图
  • 活用 border-radius, 实现波浪动画

背景/渐变(linear-gradient/radial-gradient/conic-gradient)

  • 利用渐变及 CSS Property 实现 TV 噪音动画
  • 使用 background-attachment 实现毛玻璃效果
  • 使用 background-attachment 实现滚动阴影
  • background-clip 实现流光文字效果
  • 角向渐变线条 border 效果
  • 角向渐变实现光影 border 效果
  • 角向渐变实现纯 CSS 圆环进度图
  • 角向渐变配合混合模式实现炫酷光影效果
  • 一行代码重复角向渐变代码实现酷炫图案
  • 线性渐变实现箭头符号
  • 线性渐变线条 border 效果
  • 线性渐变实现类迷宫图形
  • 线性渐变实现内切角
  • 线性渐变模拟进度条运动
  • 线性渐变实现滚动进度条
  • 线性渐变背景实现条纹字
  • 线性渐变实现下划线
  • mask-image 实现图片变幻
  • mask-image 实现文字的渐现
  • mask-image 实现图片转场变换
  • 使用多重背景单标签实现气泡按钮点击效果
  • 径向渐变实现优惠券波浪造型
  • 径向渐变实现舞台灯光聚焦效果
  • 渐变实现波浪边框
  • 渐变实现波浪下划线
  • 渐变实现波浪效果/波浪进度框
  • 多重径向渐变实现美妙的艺术背景

混合模式(mix-blend-mode/background-blend-mode)

  • 使用 mix-blend-mode 实现图片任意颜色赋值技术
  • 使用 mix-blend-mode 实现抖音 LOGO
  • mix-blend-mode 实现 loading 效果
  • 图片的类抖音 LOGO 晕眩效果
  • mix-blend-mode MIX
  • mix-blend-mode 实现颜色叠加旋转动画
  • 类抖音 LOGO 文字故障效果
  • 使用 mix-blend-mode 实现光影文字效果
  • CSS WAVE MOVE(惊艳的水波效果)
  • mix-blend-mode 叠加多重渐变背景

3D

  • 3D 球动画
  • 3D 数字计数动画
  • 3D 宇宙时空穿梭效果
  • 3D 立方体滚动 404 效果
  • 3D 立方体进度条
  • 3D 光影变换文字效果
  • 3D 无限延伸视角动画
  • 3D 线条动画
  • 3D 迷宫线条特效
  • 3D 绳动画
  • 3D 螺旋数字动画
  • 3D 文字出场动画
  • 借助 translate3d\perspective 实现 3D 视差效果
  • 借助 translate3d\perspective 实现 3D 视差效果2
  • 使用 translateZ 实现滚动视差

动画/过渡(transition/animation)

  • 借助transition-delay实现按钮border动画效果
  • CSS实现曲线运动
  • 利用动画延迟实现波浪动画
  • scale 配合 transfrom-origin 精准控制动画方向
  • CSS 巧妙控制动画行进
  • 正负旋转相消动画

clip-path

  • 使用 clip-path 和 border-image 实现圆角渐变边框
  • clip-path 实现边框线条动画 2
  • clip-path 实现边框线条动画
  • clip-path 实现图片的故障艺术风格动画
  • clip-path 实现文字断裂效果

文本类

  • 使用text-decoration实现波浪效果

综合

  • retina屏下的1px线的实现
  • fieldset 与 legend 实现边框嵌套文字
  • 利用 resize 实现图片切换预览功能
  • 暗黑字符雨动画
  • chrome Tab 分栏实现
  • 等角螺线
  • 华为充电动画
  • 夜晚居室图
  • 纯CSS实现360°饼图
  • PURE CSS 实现鼠标跟随2
  • PURE CSS 实现鼠标跟随3
  • PURE CSS 实现鼠标跟随
  • 利用 box-reflect 实现艺术图形
  • 利用 box-reflect 实现光影按钮
  • 利用 box-reflect 实现 3D 照片墙倒影效果
  • CSS文字分裂移动特效
  • CSS文字分裂特效
  • CSS文字故障效果

CSS-Doodle

  • CSS-Doodle clip-path & drop-shadow 实现图案艺术
  • CSS-Doodle 利用不同图形线条实现图案艺术 2
  • CSS-Doodle 利用不同图形线条实现图案艺术
  • CSS-Doodle background + mask 实现万花筒效果
  • CSS-Doodle background + mask 实现条纹艺术背景
  • CSS-Doodle fish & seaweed 
  • CSS-Doodle spotlight
  • 夏日城市夕阳图

svg

  • 支付宝AR扫福动画
  • SVG绘制弧形文字
  • SVG 按钮 hover 线条动画
  • SVG feTurbulence 滤镜实现故障按钮点击效果
  • SVG feTurbulence 滤镜实现云彩效果
  • SVG 文字 hover 线条动画 2
  • SVG 文字 hover 线条动画


链接: https://fly63.com/nav/1684

more>>
相关栏目
sass
成熟、稳定和强大的CSS扩展语言
官网GitHub
postcss
PostCSS是一个使用JavaScript插件来转换CSS的工具。
官网GitHub
stylus
Stylus是一个高效、动态以及丰富的CSS预处理器
官网GitHub
animate.css
齐全的CSS3动画库
官网GitHub
Metro UI
基于平板界面设计CSS库是一种界面展示技术
官网GitHub
Spectre.css
轻量响应式 CSS 框架
官网GitHub
water.css
只需添加CSS框架即可应用样式,无需定义元素类
官网GitHub
DropCSS
一个用来清理无用 CSS 的小工具
点击进入GitHub
Pattern.css
一个CSS库,使用美丽的图案填充空的背景。
官网GitHub
three-dots
一组CSS加载动画,它由三个点组成,而这些点仅由单个元素组成
官网GitHub
CSSeffectsSnippets
提供了漂亮的CSS动画
官网GitHub
Angrytools
多样定制,实用,支持单个动画代码复制的网站
官网
magic
带多种动画效果的CSS3动画库
官网GitHub
topcoat
一款为简洁高速Web应用提供CSS开发的工具
官网GitHub
Biomatic UI
简单,灵活的CSS框架
官网GitHub
css-animation-101
从零开始介绍 CSS 动画开源电子书
官网GitHub

手机预览