首页
AI Coding
沸点
课程
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
CSS
likewind2021
创建于2021-12-07
订阅专栏
一些css样式处理 及动画效果实现
等 4 人订阅
共7篇文章
创建于2021-12-07
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
css 点击实现内容正反面翻转效果
在实现小模块的tab标签页切换时,可以添加内容翻转动效,增加趣味性及视觉效果。这种点击翻转动画通常用于卡片类的展示,以下为卡片翻转示例。 通过css的一些属性:perspective、backface
css 实现百分比水波纹动画
场景:用水球展示数据百分占比,并添加动态水波纹效果。 实现 原理:将父元素设置为圆形,隐藏多余部分;根据波纹数添加子元素,并设置为圆形添然后加背景色;把子元素定位在父元素下方,并添加旋转动画,呈现效果
svg 详解
SVG 意为可缩放矢量图形,使用 XML 格式定义图像。SVG 代码写在根元素 <svg>标签中,表示图形容器的大小和属性。其中,width 和 height 属性指定画布的宽度和高度,viewBox
线性渐变:linear-gradient
1. linear-gradient基础 2. 重复线性渐变:repeating-linear-gradient 3. 记事本效果 4. 叠加效果 5. 进度条效果
BFC 实战应用:边距折叠、高度塌陷
1. 边距折叠 根据 BFC 布局规则,“box 在垂直方向上的间距由 margin 属性决定,但是同一个 BFC 的两个相邻 box 的 margin 会出现边距折叠现象”。 (1) 现象:.div
vh、vw、em、rem
1. height: 100% 和 height: 100vh 重点:当元素没有内容的时候,设置height:100%,该元素不会被撑开,此时高度为0; 但是设置height:100vh,该元素会被撑
鼠标放置实现内容缩放
样式分析:1)实现该效果需要通过鼠标触发,可以用 :hover 实现 2)运用 transform 实现放大缩小效果 3)利用 transition 增加动画自然过渡效果……