魔法世界 | CSS渐变和动画的魔法世界

最新推荐文章于 2024-09-26 17:57:52 发布

代码星辰阁

最新推荐文章于 2024-09-26 17:57:52 发布

阅读量622

点赞数 13

分类专栏：编程文章标签： css 前端 css3

本文链接：https://blog.csdn.net/2401_83358720/article/details/140622737

版权

编程专栏收录该内容

7 篇文章 0 订阅

订阅专栏

你是否有过这样的经历，在网页设计中，想要实现一些非常酷炫的效果，比如颜色的平滑过渡、图标的动态变化等等。这时候，CSS渐变和动画就派上了用场。今天，我们就来一起探索这个神奇的领域吧！

渐变——色彩的流动

想象一下，夕阳下的天空，从橙色逐渐过渡到紫色，这就是渐变。在CSS中，我们用linear-gradient和radial-gradient来模拟这种自然的色彩流动。

1线性渐变

线性渐变是指颜色沿着一条直线发生变化，可以使用linear-gradient()函数来实现。

.box2 {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(red,yellow);
}

线性渐变的开头，我们可以指定一个渐变的方向

to left

to right

to bottom

to top

deg deg表示度数

turn 表示圈

.box2 {
  width: 200px;
  height: 200px;
  background-image:        linear-gradient(to right,red,yellow);
}

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况

.box2 {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(red,yellow,green,pink,black,blue);
}

repeating-linear-gradient()可以平铺的线性渐变

.box2 {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(red,yellow,green,pink,black,blue);
}

2径向渐变

radial-gradient() 径向渐变(放射性的效果)

默认情况下径向渐变的形状根据元素的形状来计算的

正方形的径向渐变为圆形

长方形的径向渐变为椭圆形

我们也可以手动指定径向渐变的大小

circle 圆形

ellipse 椭圆

closest-side 近边

closest-corner 近角

farthest-side 远边

farthest-corner 远角

也可以指定渐变的位置

语法：radial-gradient(大小 at 位置, 颜色位置 ,颜色位置 ,颜色位置)

位置：top right left center bottom

.box1{
  width: 300px;
  height: 300px;
  background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)
}

动画——元素的舞蹈

CSS动画可以让元素移动、变形、过渡，就像跳舞一样。通过transition属性，我们可以控制这场舞蹈。

1过渡

通过过渡可以创建一些非常好的效果，提升用户的体验

transition-property:指定要执行过渡的属性

多个属性间使用逗号隔开，如果所有属性都需要过渡，则使用all关键字

大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡

transition-property: height,width
transition-property: all

transition-duration:指定过渡效果的持续时间

时间单位：s 和ms 1s = 1000ms

transition-duration: 2s

transition-timing-function:过渡的时序函数，指定过渡的执行方式

ease:默认值，慢速开始，先加速，后减速

linear:匀速运动

ease-in:加速运动

ease-out:减速运动

ease-in-out：先加速，后减速

cubic-bezier():https://cubic-bezier.com

transition-timing-function: 
cubic-bezier(.43,-0.8,.95,.88);

steps():分步执行过渡效果，可以设置两个值

end：在时间结束时执行过渡

start：在时间开始时执行过渡

transition-delay：过渡效果的延迟，等待一段时间后在执行过渡

transition-delay: 2s

transirion可以同事设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个时持续时间，第二个延迟

/* 第一个是持续时间，第二个是延迟 */
transition: 2s margin-left 1s cubic-bezier(.24, .95, .82, -0.88);

2关键帧

关键帧是指在一段时间内按照一定规律变化的多个状态，可以使用@keyframes规则来实现。

@keyframes myfirst {
  from {background-color: red;}
  to {background-color: yellow;}
}
.box2 {
  animation-name: myfirst;
  animation-duration: 2s;
}

这会让.box2这个元素在2秒内按照`myfirst`关键帧指定的规律变化，从红色渐变到黄色。我们可以通过指定多个关键帧来实现更加复杂的变化效果。

结语

CSS渐变和动画是一个非常有趣、实用的领域，它可以让我们的设计更加生动、有趣。希望这篇文章能够帮助你更好地理解它们的使用方法，并且在实际工作中更加得心应手。

—END—

文字丨代码星辰阁

图片丨代码星辰阁