css3边框、背景、过渡以及动画

一、边框

border-radius：

        原理以值为半径在四角画圆或椭圆

        椭圆角：x轴半径/y轴半径

        四个值时从左上、右上、右下、左下顺时针开始；

        三个值时左上、右下和左下、右下；

四个值：

border-radius: 10px 20px 20px 40px;

三个值：

border-radius: 10px 20px 40px;

两个值：

border-radius: 10px 40px;

 

box-shadow：

        值：水平位置 垂直位置 模糊距离 阴影尺寸大小 阴影颜色 内(inset)/外阴影

        说明：前俩个值必须写，模糊距离不能为负值

 

边框图片border-image:

        可以使图像创建一个边框

        border-image-source：边框背景图片路径

        border-image-slice：图片边框向内偏移(切片)

        border-image-width：图片边框宽度

        border-image-outset：边框图像区域超出边框的量

        border-image-repeat：边框图片是否应该平铺(repeat)/铺满(round)/拉伸(stretch)

 铺满、平铺及拉伸的区别效果图：

 

 

 

二、背景background

background-image多个背景图

background: url(img/flower.gif), url(img/paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;

 

background-size图片大小

contain：宽度等比拉伸铺满

cover：高度等比拉伸铺满

background-origin背景图片位置

值：

• border-box：将背景图片放在边框里

• padding-box：将背景图片放在内边距里

• content-box：将背景图片放在内容区

 

background-clip背景剪切

        cSS3中 background-c1ip背景剪裁属性是从指定位置开始线制。

• border-box：默认值，从边框处开始显示

• padding-box：从内边距开始绘制背景

• content-box：从内容区开始绘制背景

三、过渡

        CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。 要添加多个样式的变换效果，添加的属性由逗号分隔。

指定过度的速度曲线

        transition-timing-function属性规定过渡效果的速度曲线。

        transition-timing-function属性可接受以下值:

• ease-规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束(默认)

• linear-规定从开始到结束具有相同速度的过渡效果

• ease-in-规定缓慢开始的过渡效果

• ease-out-规定缓慢结束的过渡效果

• ease-in-out-规定开始和结束较慢的过渡效果

• cubic-bezier(n,n,n,n)-允许您在三次贝塞尔函数中定义自己的值

贝塞尔函数网站： cubic-bezier.com

四、动画

        cSS3可以创建动画，它可以取代许多网页动画图像、Flash 动画和JavaScript 实现的效果。

什么是css动画

        动画使元素逐渐从一种样式变为另一种样式工您可以随意更改任意数量的CSS属性。

        如需使用CSS动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。

@keyframes规则

        如果你在@keyframes规则中指定了CSS样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素。

 div {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: pink;
            /* 应用动画 */
            animation-duration: 3s;
            /* 动画时间 */
            animation-fill-mode: forwards;
            /* 停止在动画结束的效果 */
            animation-name: div-name;
            /* 应用动画名称 */
        }
        
        @keyframes div-name {
            25% {
                background-color: aqua;
            }
            50% {
                background-color: green;
            }
            100% {
                background-color: yellow;
            }
        }

反向或交替运行动画

        animation-diredtion属性指定是向前播放、向后播放还是交替播放动画。

animation-direction属性可接受以下值:

• normal - 动画正常播放（向前)。默认值
• reverse - 动画以反方向播放(向后)
• alternate - 动画先向前播放，然后向后
• alternate-reverse - 动画先向后播放。然后向前

指定动画的填充模式

        CSS动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fil1-mode属性能够覆盖这种行为。

        在不播放动画时（在开始之前，结束之后，或两者都结束时)，animation-fill-mode属性规定目标元素的样式。

animation-fill-mode 属性可接受以下值:

• none,-默认值。动画在执行之前或之后不会对元素应用任何样式。
• forwards -元素将保留由最后一个关键帧设置的样式值（依赖animation-direction和animation-iteration-count) .
• backwards -元素将获取由第一个关键帧设置的样式值（取决于animation-direction)，并在动画延迟期间保留该值。
• both -动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

延迟动画

        animation-delay：属性规定动画开始的延迟时间(负值也是允许的。如果使用负值，则动画将开始播放，如同已播放N秒。)animation-

        iteration-count属性指定动画应运行的次数。

时钟案例：

鼠标移动至表盘指针转动

 

<style>
    .y {
        width: 284px;
        height: 284px;
        background: url(img/clock.png);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .y::before {
        content: "";
        width: 5px;
        height: 90px;
        background-color: black;
        border-radius: 50% 50% 2px 2px;
        position: absolute;
        top: 19%;
        left: 50%;
        transform: translate(-50%, 0);
        transition-duration: 60s;
        transition-timing-function: steps(60, start);
        transform-origin: bottom;
    }
    
    .y:hover::before {
        transform: translate(-50%, 0) rotate(360deg);
    }
    
    .yz {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 3px 3px 2px rgba(255, 255, 255, 0.549) inset;
    }
</style>

<body>
    <div class="y">
        <div class="yz">

        </div>
    </div>
</body>