lucson css3 代码笔记
时间: 2024-04-13 14:30:36 浏览: 26
你好!以下是一些常见的 CSS3 代码笔记:
1. CSS3 过渡效果:
```css
.element {
transition: property duration timing-function delay;
}
```
其中,`property` 是要过渡的 CSS 属性,`duration` 是过渡的持续时间,`timing-function` 是过渡的时间函数,`delay` 是延迟开始过渡的时间。
2. CSS3 动画效果:
```css
@keyframes animation-name {
0% { /* 初始状态 */ }
50% { /* 中间状态 */ }
100% { /* 结束状态 */ }
}
.element {
animation: animation-name duration timing-function delay iteration-count direction;
}
```
其中,`animation-name` 是动画名称,`duration` 是动画的持续时间,`timing-function` 是动画的时间函数,`delay` 是延迟开始动画的时间,`iteration-count` 是动画重复的次数,`direction` 是动画播放的方向。
3. CSS3 边框阴影效果:
```css
.element {
box-shadow: h-shadow v-shadow blur spread color inset;
}
```
其中,`h-shadow` 是水平阴影的位置,`v-shadow` 是垂直阴影的位置,`blur` 是阴影的模糊程度,`spread` 是阴影的扩展大小,`color` 是阴影的颜色,`inset` 可选参数表示阴影是否为内阴影。
这些是 CSS3 中常用的一些代码笔记,希望对你有帮助!如有其他问题,请随时提问。
相关推荐
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)