CSS3 学习笔记 DAY5

这篇博客详细介绍了CSS3中的过渡和动画效果。过渡主要用于元素从一种样式平滑地转变到另一种,包括指定过渡的CSS属性和持续时间。而CSS3动画则通过@keyframes规则创建,允许元素在不同时间点应用不同的样式,实现丰富的动态效果。文章通过实例展示了如何定义和应用这些效果。

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

十.CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。

1.应用于宽度属性的过渡效果,时长为 2 秒:

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

注意: 如果未指定的期限,transition将没有任何效果,因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时

2.规定当鼠标指针悬浮(:hover)于 <div>元素上时:

div:hover
{
    width:300px;
}

注意: 当鼠标光标移动到该元素时,它逐渐改变它原有样式

3.多项改变

要添加多个样式的变换效果,添加的属性由逗号分隔:

添加了宽度,高度和转换效果:

div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

4.过渡属性
在这里插入图片描述
5.使用简写的 transition 属性

div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

6.简单的鼠标悬浮过渡效果

div{
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: all 2s;
}

div:hover{
  background-color: #00f;
  transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
}

十一.CSS3 动画

CSS3 可以创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

1.CSS3 @keyframes 规则

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
CSS3 动画

当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器:

  • 规定动画的名称
  • 规定动画的时长

把 “myfirst” 动画捆绑到 div 元素,时长:5 秒:

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间,动画将无法运行,因为默认值是0。

2.CSS3动画是什么?

  • 动画是使元素从一种样式逐渐变化为另一种样式的效果。
  • 可以改变任意多的样式任意多的次数。
  • 用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
  • 0% 是动画的开始,100% 是动画的完成。
  • 为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

改变背景色和位置:

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

3.CSS3的动画属性

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值