前端第一阶段-16（box-shadow框架阴影、transform变换、transition过渡、animation动画）

BadVictory

已于 2022-08-11 14:05:38 修改

阅读量470

点赞数

分类专栏： # 前端开发第一阶段文章标签： css html5 css3 visual studio 前端

于 2022-08-06 20:18:54 首次发布

本文链接：https://blog.csdn.net/Victory_bad/article/details/126199726

版权

box-shadow框架阴影

在线框架阴影链接：

https://angrytools.com/css-generator/animation/

可以在同一个元素上设置多个阴影效果，用逗号隔开

box-shadow阴影属性
属性	说明
box-shadow	框架阴影效果 trabox-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><!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>
            body{
                background: #999;
            }
            .box-shadow {
                width: 100px;
                height: 100px;
                background:rgb(234, 149, 149);
                /*box-shadow: x 偏移量  y 偏移量  阴影模糊半径  阴影扩散半径  阴影颜色; */
                box-shadow: 5px 3px 30px 10px #dd2727;
            }
        </style>
    </head>
    
    <body>
        <div class="box-shadow">盒子阴影效果</div>
    </body>
    </html>
</head>
<body>
    
    
</body>
</html>

效果：

transform变换

transform属性向元素应用 2D 或 3D 转换

transform属性值
属性值	说明
translate(x,y)	平移 translate(x方向，y方向) 平移
scale(x,y)	放大缩小
rotate(角度)	旋转
skew(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 {

            margin-top: 20px;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background: #0f7fd8;
            /*  
                平移
            */
            transform: translate(10px, 10px);
        }

        .box2 {
            width: 100px;
            height: 100px;
            background: #c2a4a3;
            /* 
                旋转
            */
            transform: rotate(30deg);
        }

        .box3 {
            width: 100px;
            height: 100px;
            background: rgb(255, 155, 155);
            /* 
                放大缩小
            */
            transform: scale(0.5);
        }

        .box4 {
            width: 100px;
            height: 100px;
            background: r

最低0.47元/天解锁文章

BadVictory

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端第一阶段-16（box-shadow框架阴影、transform变换、transition过渡、animation动画）

transform属性向元素应用 2D 或 3D 转换。translate(x方向，y方向) 平移。只能转换由盒模型定位的元素。，则由盒模型定位元素。translate(x,y) 平移translate(x方向，y方向) 平移scale(x,y) 放大缩小rotate(角度) 旋转skew(x轴的角度,y轴的角度) 拉伸...........................
复制链接

扫一扫