动态——CSS3过渡、动画

孤༼Evil ༽止辞

于 2019-11-17 22:54:10 发布

阅读量153

点赞数

分类专栏： css3 文章标签：动态——CSS3过渡、动画

本文链接：https://blog.csdn.net/qq_45649374/article/details/103112080

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前都是一些静态的东西，今天给大家带来一点动态的编码（也是最简单的)。

首先我们要了解到什么是CSS3过渡：
在CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。——（而需用到CSS3过渡）。
然后我们要了解到要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
        div
        {
            width:100px;
            height:100px;
            background:red;
            transition:width 2s;
        }
        div:hover
        {
	        width:300px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

(hover)规定当鼠标指针悬浮于 (div)元素上(动态效果不好展示，请见谅，可以自己试试)而当鼠标光标移动到该元素时，它逐渐改变它原有样式。
如果未指定的期限（如width 2s），transition将没有任何效果，(也就是会直接改变，不会有缓慢变化而形成动态效果)因为它默认值是0。

transform: rotate(180deg);

这个是添加在div:hover 里的，表示动态的旋转效果，（）里的是图形旋转的角度
注意：要添加多个样式的变换效果，添加的属性由逗号分隔。

A 要创建 CSS3 动画，你需要了解== @keyframes 规则==。@keyframes 规则是创建动画。
B @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式
C 当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
D 指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称；
规定动画的时长

 <style> 
        div
        {
            width:100px;
            height:100px;
            background:red;
            animation:a 5s;
            transition:width 2s, height 2s, transform 2s;
        }
        div:hover
        {
            width:300px;
            transform: rotate(180deg);
        }
        @keyframes a
        {
	        from {background:red;}
	        to {background:yellow;}
        }
    </style>

其中，使用animation元素，把 “a” 动画捆绑到 div 元素，时长：5 秒，意为从红色转变到黄色
注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。

接下来就是改变背景色和位置：

<style> 
        div
        {
            width:100px;
            height:100px;
            background:red;
            animation:a 5s;
            position:relative;
            transition:width 2s, height 2s, transform 2s;
        }
        div:hover
        {
            width:300px;
            transform: rotate(180deg);
        }
        @keyframes a
        {
	        from {background:red;}
	        to {background:yellow;}
        }
        @keyframes a
        {
	        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;}
        }
    </style>

其中，使用position元素,relative限制，用百分比来规定变化发生的时间，0% 是动画的开始，100% 是动画的完成，然后在大括号里加上该时刻所变的背景颜色和位置

下面的表格列出了 @keyframes 规则和所有动画属性：
在这里插入图片描述
巧妙运用后即可绘制太阳系各大行星运行轨迹，如：
添加链接描述

That’s all,goodbye.

孤༼Evil ༽止辞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态——CSS3过渡、动画

之前都是一些静态的东西，今天给大家带来一点动态的编码（也是最简单的)。首先我们要了解到什么是CSS3过渡：在CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。——（而需用到CSS3过渡）。然后我们要了解到要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间<head> <m...
复制链接

扫一扫