CSS3的动画效果与过渡、边框、圆角

CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

了解动画效果的属性:

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

要创建 CSS3 动画，你需要了解 @keyframes 规则。

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

引用动画:

动态效果图:

 

 

 1.2、过渡:

首先要知道它是如何工作的？

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

要实现这一点，必须规定两项内容：

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

 要知道过渡的一些属性:
 

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

实例: 

css部分，设置触发时间与触发效果:

.one{
            width: 10px;
            height: 20px;
            margin: 0 auto;
            background-color: greenyellow;
            border-radius: 5px;
            transition: all 25s  ;
            /* 间隔时间触发steps() */
            transition-timing-function: steps(25);
        }
        .one:hover{
            background-color: rgb(206, 170, 170);
            height: 2000px;
            width: 400px;
        }

 设置一个div：

 <div class="one"></div>

过渡效果图:

 

 边框(圆角边框 border-radius、阴影边框 box-shadow 、图片边框 border-image):

圆角:

<div class='one'></html>

.one {
				border: 2px solid black;
				/* 左上  右上、左下  右下*/
				border-radius: 10px 50px;
				/*两个值:*/
				/* border-radius: 10px40px;*/
				/*以椭圆为基础画出的圆角，方式为:border-radius :x半径/y半径	*/
				border-radius: 30px/60px;
			}

阴影边框:

.one{           //设置边框为1像素，实线，黑色
				border: 1px solid black;
				background-color: #00AE72;
                //实现圆角
				border-radius: 50%;
                //边框阴影;inset 插入，在里面阴影
				box-shadow: 15px 15px 10px #8C63A4 inset;
			}

 效果图:

 图片边框:

有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：
border-image 属性允许你指定一个图片作为边框！ 用于创建上文边框的原始图像：
在 div 中使用图片创建边框:

border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

/* 图片边框 */
			.three{
				border: 15px solid black;
				border-image: url(./images/border.png)27 27 round;
			}

子曰：“学而不思则罔,思而不学则殆。”  《为政》