CSS3整理

最新推荐文章于 2021-11-21 16:22:25 发布

wyh-000000

最新推荐文章于 2021-11-21 16:22:25 发布

阅读量130

点赞数

本文链接：https://blog.csdn.net/weixin_41082623/article/details/81349160

版权

一.css3渐变(gradients)：

CSS3 渐变（gradients）可以让两个或多个指定的颜色之间显示平稳的过渡。

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下（to bottom）/向上(to top)/向左(to left)/向右(to right)/对角方向(to bottom right…)

语法：background: linear-gradient(direction, color1, color2, ...);

径向渐变（Radial Gradients）- 由它们的中心定义

语法：background: radial-gradient(center, shape size, start-color, ..., last-color)

二.css3过渡（transition）：

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

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

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

transition属性是一个合成属性，它有四个属性：

transition-property是指定CSS属性的name
transition-duration, 是指定该效果需要指定多少秒或毫秒才能完成
transition-timing-function, 是指定切换效果的速度。其值常用有五种类型：

linear：匀速；
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果；
ease-in：以慢速开始；
ease-out：以慢速结束；
ease-in-out: 以慢速开始和结束。

transition-delay指定属性指定何时将开始切换效果，transition-delay值是指以秒为单位（S）或毫秒（ms）。

注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

三．CSS3 转换（transform）

transform属性应用于元素的2D或3D转换。这个属性允许将元素旋转，缩放，移动，倾斜等.

Translate（）平移动画
Rotate（）旋转
Skew（）变形
Scale（）伸缩

transform--style属性指定嵌套元素是怎样在三维空间中呈现。

transform—style: preserve-3d;

transform-Origin属性允许您更改转换元素在x,y,z三轴的位置。

注意： 使用此属性必须先使用 transform 属性.

四.css3动画：

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。

可用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%，0% 是动画的开始，100% 是动画的完成。

 0%{}

 20%{}

 50%{}

 100%{}

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

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

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

语法：

animation: animation-name，animation-duration， animation-timing-function， animation-delay，animation-iteration-count， animation-direction ， animation-play-state;;

animation-name：指定要绑定到选择器的关键帧的名称；
animation-duration：动画指定需要多少秒或毫秒完成；
animation-timing-function：指定动画将如何完成一个周期，其值同transition-timing-function;
animation-delay：设置动画在启动前的延迟间隔；
animation-iteration-count: 定义动画应该播放多少次，其值为n或infinite（无限循环）；
animation-iteration-count：指定是否应该轮流反向播放动画。常用值：
- - normal:默认，正常播放；
  - reverse：反向播放
  - alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
  - alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放

例子：弹球动画



<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background:linear-gradient(180deg,pink,blue);
            margin: 0 auto;
            animation: animatetan 1s ease-in infinite alternate;
        }
        @keyframes animatetan {
            0%{margin-top: 0px;}
            40%{margin-top: 600px;}
            50%{margin-top: 300px;}
            60%{margin-top: 600px;}
            70%{margin-top: 450px;}
            80%{margin-top: 600px;}
            90%{margin-top: 550px;}
            100%{margin-top: 600px;}
        }
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

[点击并拖拽以移动]

wyh-000000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3整理

一.css3渐变(gradients)：CSS3 渐变（gradients）可以让两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：线性渐变（Linear Gradients）- 向下（to bottom）/向上(to top)/向左(to left)/向右(to right)/对角方向(to bottom right…)语法：backgr...
复制链接

扫一扫