css3 过渡转换阴影

最新推荐文章于 2022-08-23 22:12:13 发布

中平签

最新推荐文章于 2022-08-23 22:12:13 发布

阅读量671

点赞数 1

CC 4.0 BY-SA版权

文章标签：寒鸦飞数点

本文链接：https://blog.youkuaiyun.com/weixin_43392545/article/details/88892523

本文介绍了CSS中transition属性的使用方法，包括transition-property、transition-duration、transition-timing-function和transition-delay等子属性，以及transform和shadow的相关操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

transition：当元素从一种样式变换为另一种样式时为元素添加效果。
必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, transform 2s; /* Safari 和 Chrome */
}
transition-property：规定应用过渡的 CSS 属性的名称。
transition-duration：定义过渡效果花费的时间。默认是 0。
transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”。
linear：匀速，ease：慢-快-慢，ease-in：慢速开始，ease-out：慢速结束，ease-in-out：慢-慢-慢
transition-delay：规定过渡效果何时开始。默认是 0。

transform: translate() rotate() scale() skew() matrix()
translate(x,y)移动数字像素或百分百等 translateX(n) translateY(n)
rotate（xx）旋转 deg
scale（x,y）缩放数字 scaleX(n) scaleY(n)
skew(x,y) 倾斜 deg skewX(angle) skewY(angle)

text-shadow 可向文本应用阴影。
水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
h1
{
text-shadow: 5px 5px 5px #FF0000;
}

box-shadow：
水平垂直模糊距离颜色
div
{
box-shadow: 10px 10px 5px #888888;
}

遇见问题，留作参考。