0721 圆角及阴影过渡动画

最新推荐文章于 2023-02-07 21:07:04 发布

m0_56381561

最新推荐文章于 2023-02-07 21:07:04 发布

阅读量151

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_56381561/article/details/125915628

版权

圆角

border-radius: x x x x; 四个值分别对应：左上右上右下左下

border-radius: x x x; 三个值：坐上右上和左下右下

border-radius: x x; 两个值：左上和右下右上和左下

以椭圆为基础画出的圆角方式为： border-radius: x半径/y半径;

阴影

box-shadow: offset-x offset-y blur spread color inset;

ox-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

实例内阴影左上外阴影右下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div {
            width: 100px;
            height: 100px;
            /* border: 5px solid coral; */
            background-color: aqua;
            border-radius: 50%;
            /* 同时给元素设置内外阴影 */
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5) inset, 10px 10px 5px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div class="div"></div>
</body>

</html>

效果

border-image

1.stretch（拉伸）默认值

border-image:url() 27 27 stretch（水平和垂直方向都是拉伸）

2.round（平铺）

border-image:url() 27 round（水平和垂直都是平铺）

3.repeat（重复）

border-image:url() 27 repeat（水平和垂直都是重复）

这个地方就出现了上面说的那个问题，在重复的时候会发生有重叠的情况，也就是说不是每一个都完好。那为什么平铺可以做到呢？这是因为平铺会把每一个方块都等比例的缩小，使他们刚好可以完好的放置在中间，不会产生重叠，这也是平铺和重复的区别。

background-origin

1.padding-box(默认):指定背景图片由padding开始展示

/* padding-box:将图片放在内边距上 */

background-origin: padding-box;

2.content-box:指定背景图片在内容区域开始展示

/* padding-box:将图片放在内容上 */

background-origin: content-box;

3. border-box:指定背景图片在边框区域开始展示

/* padding-box:将图片放在边框上 */

background-origin: border-box;

Background-clip

作用：CSS3中的Background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域

1.border-box:此值为默认值，背景从border区域向外裁剪，也就是超出部分将被裁剪掉

2.padding-box：背景从padding区域向外裁剪，超过padding区域的背景将被裁剪掉

3.context-box：背景从content区域向外裁剪，超过context区域的背景将被裁剪掉

过渡动画

定义和用法:

transition 属性是一个简写属性，用于设置四个过渡属性：

1、transition-property 规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）

语法：

transition-property: none|all|property;

2、transition-duration 规定完成过渡效果需要花费的时间（以秒或毫秒计）

语法：

transition-duration: time;（默认值是 0，意味着不会有效果。）

3、transition-timing-function 规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。

语法：

4、transition-delay 属性规定过渡效果何时开始；值以秒或毫秒计。

语法：

transition-delay: time;

ransition的属性：

v-enter：显示/插入前的效果

v-active-enter：显示/插入的过渡时间和函数

v-enter-to：显示/插入后的效果

v-leave：隐藏/移除前的效果

v-active-leave：隐藏/移除的过渡时间和函数

v-leave-to：隐藏/移除后的效

动画 —— 动态时钟案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div-1 {
            height: 284px;
            width: 284px;
            background: url(img/clock.png);
            border-radius: 50%;
            position: relative;
        }
        
        .div-1::before {
            content: '';
            width: 15px;
            height: 15px;
            background-color: black;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .div-1::after {
            content: '';
            width: 2px;
            height: 30%;
            background-color: black;
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            transform-origin: bottom;
            /* 过渡时间 */
            transition-duration: 6s;
            /* transition-timing-function: steps(60, start); */
            transition-timing-function: cubic-bezier(.89, -0.59, 0, 1.9);
        }
        
        .div-1:hover::after {
            transform: translateX(-50%) rotate(360deg);
        }
    </style>
</head>

<body>
    <div class="div-1"></div>
</body>

</html>