轩钰

CSS3中的过渡与动画
CSS3添加了过渡和动画让在不使用flash或者JavaScript的情况下做出元素的规律运动的效果,可以使页面变...
扫描右侧二维码阅读全文
23
2019/09

CSS3中的过渡与动画

CSS3添加了过渡和动画让在不使用flash或者JavaScript的情况下做出元素的规律运动的效果,可以使页面变得非常丰富,表现力强。

什么是CSS3过渡(transition)?

CSS3过渡(transition)简单可理解为使元素由一种样式变成另一种样式,为变化添加过程与加效果,注意为元素添加transition样式(尽量不要写到伪类中)

CSS3过度(transition)是一个复合属性:
  • transition-property: 规定过渡作用在元素的哪条样式上,属性值为,none(没有过渡属性(清除))、all(对所有可能样式生效(默认值))、width/height/…(多个以逗号分隔,指定某个元素过度效果)
  • transition-duration:规定属性发生变化的过渡时间,默认值是0,不写时长等于看不到效果,单位秒(s)和毫秒(ms)
  • transition-delay:过渡开始前的等待时间, 不计入过渡时间中,注意: transition-delay在恢复也生效,属性单位秒(s)和毫秒(ms)
  • transition-timing-function:过渡效果的速率(速度变化),常见属性值为:ease先慢后快后慢(默认值)、linear匀速、ease-in匀加速、ease-out匀减速、ease-in-out快->慢->快
还有个特殊值(贝塞尔曲线):

一个带参数的曲线,用于描述运动速度的变化,可以非常精确自由方便的控制变化速率
cubic-bezier(x1,y1,x2,y2);

  1. x1起点在x轴的坐标 为0-1
  2. y1起点在y轴的坐标 不限
  3. x2终点在x轴的坐标 为0-1
  4. y2终点在y轴的坐标 为0-1

起点对应的 y=x 为匀速,y>x 为加速,y<x 为减速
终点对应的 y=x 为匀速,y>x 为减速,y<x 为加速
具体参考:http://cubic-bezier.com

过渡复合样式:

复合写法只写transition:
例如:
transition: 过渡属性 过渡时间 过渡延迟 过渡效果的速率; 注意:中间空格隔开
transition: property duration delay timing-function;
例如要给在一个元素width设置过度效果:

transition:width 2s ease;

注意:只有时长不可省略

什么是CSS3动画?

过度transition只能描述开始结束的变化过程,animation能精确控制各种时间进程的状态。注意:animation必须与@keyframes一起使用

animation也是一个复合属性

使用@keyframes定义动画
写法:

@keyframes  animationname{  
    keyframes-selector{css-style}
}
  • animationname:自定义动画名称
  • keyframes-selector:动画时长百分比(关键帧),0%-100%(在之间需要执行什么事件),from (0%) to (100%) 可以只有to
  • Css-style:一个或多个合法的css属性
动画示例:
@keyframes run{
       0%{width:0px,background:red;}
       100%{width:50px,background:green;}
}

我要设置当帧动画一样的时候:
例如:

@keyframes  run {
    0%{width:0px,background:red;}
    20%{width:0px,background:red;}
    80%{width:500px,background:greend;}
    100%{width:500px,background:greend;}
}

也可以写成:

@keyframes  run {
    0%,20%{width:0px,background:red;}
    80%,100{width:500px,background:greend;}
}
animation动画属性的分样式:
  • animation-name:动画的名称(自定义的),调用自定义动画,属性值为none则不引用任何动画名称,定义的动画名称和@keyframes绑定的名称要一致才能调用
  • animation-duration: 动画执行时间,单位秒(s)和毫秒(ms)
  • animation-delay: 延迟执行时间 ,动画延时(s/ms)(支持负数)
  • animation-timing-function: 动画速度曲线,常见值:ease先慢后快后慢(默认值)、linear匀速、ease-in匀加速、ease-out匀减速、ease-in-out快->慢->快、cubic-bezier()贝塞尔曲线 ,使用方法类似于transition-timing-function
  • animation-iteration-count:动画执行次数,属性值为n次数数值(默认一次),infinite(关键词,无限重复次数)
  • animation-direction:执行方向,多次运动才能出发此效果,属性值:normal正常播放,结束后会回到起点默认、reverse反向播放,和normal相反、alternate播放结束之后反向回到开头,偶数次反向、alternate-reverse先反后正,和alternate相反

1、CSS3实现页面加载loading动画
效果图:
页面加载loading动画
实现代码:

<!DOCTYPE html>
<html lang="zh-ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画一</title>
    <style type="text/css" media="screen">
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #000;
        }
        .container {
            width: 60px;
            margin: 150px auto;
            display: flex;
            justify-content: space-between;
        }
        .container .plilar {
            width: 8px;
            height: 40px;
            border-radius: 4px;
            background-color: lightgreen;
            animation: dh 1s infinite ease;
        }
        .container .plilar:nth-child(2) {
            animation-delay: .2s;
        }
        .container .plilar:nth-child(3) {
            animation-delay: .4s;
        }
        .container .plilar:nth-child(4) {
            animation-delay: .6s;
        }
        .container .plilar:nth-child(5) {
            animation-delay: .8s;
        }
        /* 动画 */
        @keyframes dh {
            0%,
            100% {
                background-color: lightgreen;
            }
            50% {
                transform: scaleY(1.75);
                background-color: lightblue;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="plilar"></span>
        <span class="plilar"></span>
        <span class="plilar"></span>
        <span class="plilar"></span>
        <span class="plilar"></span>
    </div>
</body>
</html>

2、 CSS3是怎么实现水波扩散的动画呢?
CSS3
实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css" media="screen">
        body{
            background-color:#1a2849;
        }
        .box{
            margin-left: auto;
            margin-right: auto;
            margin-top: 300px;
            width: 200px;
            height: 200px;
            border-radius:200px;
            border:2px solid #fff;
            text-align:center;
            line-height: 100px;
            color:#fff;
            background-color:#06c;
            animation: box 4s linear infinite;
        }
        @keyframes box {
            0%{
                box-shadow:0 0 0 0 rgba(245, 226, 266, 1),0 0 0 0 rgba(250, 189, 189, 1);
            }
            50%{
                box-shadow:0 0 0 20px rgba(245, 226, 226, .5),0 0 0 0 rgba(250, 189, 189, 1);
            }
            100%{
                box-shadow:0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3、实现对话框及对话框的不规则投影

知识点: filter和伪元素

这里涉及到css滤镜的知识,不过也很简单,大家在css3官网上看看就理解了,我们直接看效果:
伪元素
我们会通过filter的drop-shadow来实现不规则图形的阴影,然后利用伪元素和border来实现头部三角形:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<style>
.odd-shadow{
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    width: 200px;
    height: 80px;
    border-radius: 8px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 80px;
    background: #06c;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,.8))
}
.odd-shadow::before{
    content: '';
    position: absolute;
    display: block;
    margin-left: -20px;
    transform: translateY(20px);
    width:0;
    height: 0;
    border: 10px solid transparent;
    border-right-color: #06c;
}
</style>
<body>
<div class="odd-shadow">哎呦喂,轩钰</div>
</body>
</html>

模糊效果

知识点: filter

这个比较简单,这里我直接上图和代码:
filter

filter: blur(20px);

未完待更新。。。。

Last modification:October 10th, 2019 at 10:33 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment