css:css3新特性(过渡)

1、过渡的理解

(1)概念

  • 过渡是css3中的新特性之一,可以让我们在不使用flash动画和js的情况下,当元素从一种样式转换为另外一种样式的的时候为元素添加效果
  • 过渡动画:从一个状态渐渐地过渡到另一个状态的过程

(2)属性

  • 花费时间:单位s,必须写
  • 运动曲线:默认是ease,可省略
  • 何时开始:单位s,必须写;可以设置延时触发事件,默认是0,可省略

 

2、过渡的应用

(1)不添加过渡效果

DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
        <script>script>
        <style>
            div {
                width: 300px;
                height: 300px;
                background-color: aqua;
            }
            
            div:hover {
                width: 340px;
                background-color: blue;
            }
        style>
    head>

    <body>
        <div>

        div>

    body>

html>

css:css3新特性(过渡)_第1张图片

(2)添加过渡效果:

    <style>
            div {
                width: 300px;
                height: 300px;
                background-color:aqua;
                transition: width   1.5s;
            }
            div:hover{
                width: 340px;
                background-color: blue;
            }
        style>

在鼠标经过的时候是一个渐变的过程:

css:css3新特性(过渡)_第2张图片

(3)同时更改两个属性:

    <style>
            div {
                width: 300px;
                height: 300px;
                background-color:aqua;
                transition: width  1.5s 1s,height  1.5s 1s;
            }
            div:hover{
                width: 340px;
                height: 340px;
                background-color: blue;
            }
        style>

效果展示:

css:css3新特性(过渡)_第3张图片

简化写法:表示变化所有的属性

    <style>
            div {
                width: 300px;
                height: 300px;
                background-color:aqua;
                transition: all  1.5s 1s;
            }
            div:hover{
                width: 340px;
                height: 340px;
                background-color: blue;
            }
        style>

 

 

3、html5

广义的html5是html5本身和css3和js组成的

 

你可能感兴趣的:(css:css3新特性(过渡))