css3动画属性

简介: css3动画属性


边框弧度

  • border-radius:value // 四角

  • border-radius:value value // 左上右下 右上左下

  • border-radius:value value value value // 左上 右上 右下 左下

  • text-shadow:value value value color; // 水平 垂直 模糊度 颜色

线性渐变:background-image:linear-gradient(red,green,blue,pink);

径性渐变:background-image: radial-gradient(red,green,pink,blue)
transform 2D:

水平移动:transform: translate(30px,50px); // 支持两个参数 (水平、垂直)

旋转:transform: rotate(60deg) // 单位 deg
缩放: transform:scale(value,value) // 水平 垂直

skew 翻转/倾斜 transform:skew(value,value) // 水平 倾斜
transform 3D

// 水平 倾斜

transform 3D:

transform:translate3d(value,value,value) // x轴 、y轴 、z轴

相关文章
|
18天前
|
机器学习/深度学习 前端开发 JavaScript
|
1月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
29天前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
27 0
|
29天前
|
前端开发
CSS属性
CSS属性
28 0
|
4天前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
12 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
1月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
21 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
12天前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
9天前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
8 0
|
9天前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
11 0
|
11天前
|
前端开发
哪些 CSS 属性可以继承?
哪些 CSS 属性可以继承?
26 0