前端长度与位移transform变换圆角与阴影水滴动画五环

最新推荐文章于 2024-07-15 22:17:25 发布

yamotl

最新推荐文章于 2024-07-15 22:17:25 发布

阅读量71

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/yamotl/article/details/134212221

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

/* css长度单位
一、绝对长度单位
px（像素）
in（英寸）
cm（厘米）
mm（毫米）
pt（点） 
*/
body{
    height:300px;
}
.container{
    width:300px;
    height:100px;
    background: red;
}
.box{
    width:80%;
    height:100px;
    background: blue;
} 

/*

二、相对长度单位 
%(以父元素为参考）、em(以父级元素字体大小为参考元素）
vm以视图窗口的宽度为参考单位,视图视作100vm。
vh以视图窗口的高度为参考单位
vmin以视图窗口的宽度高度最小值为参考维度
vmax以视图窗口的宽度高度最大值为参考维度

*/

body{
    width:300px;
    background: red;/* 这样虽然整个页面都红色，但是实际高度可以在检查里看，只有300px; */
}
.container{
    width:300px;
    height:300px;
    background: red;
    font-size: 20px;
}
.box{
    width:95vw;
    height:50vh;
    font-size: 3em;/* 爷爷元素是否对其造成影响要看父元素是否使用爷爷元素为参考 */
    background: blue;
} 
/* 变形相关的属性 transform
位移相关 translate(tx,[ty])沿着x轴移动，同时沿着y轴移动。
        translateX(40px); 沿着x轴
        translateY(40px); 沿着y轴
        translateZ(40px); 沿着z轴
    
 缩放 scale(sx,[sy]) 沿着x轴缩放，同时沿着y轴缩放。值小于1是缩，值大于1是放。
        scaleX
        scaleY
        scaleZ
        scale3d 沿着xyz同时缩放
 旋转 rotate() 沿着z轴旋转
        rotateX
        rotateY
        rotateZ
        rotate3d 沿着xyz同时旋转
 倾斜 skew() 沿着x轴倾斜，同时沿着x轴倾斜
        skewX
        skewY
配套属性
 1.同时使用多种变形，把变形函数以空格隔开即可
 2.设置变形中心点 transform-origin  可以设置其值 left right center top bottom以及长度
 3.设置3d效果 perspective其值越小，3d效果越明显，注意一定要作用到父元素上
 4.设置3d嵌套效果 transform-style 其值有flat（显示3d嵌套效果），perserve-3d
 5.设置3d背面是否可见 backface-visibility，其值visible（可见的） hidden（不可见的）
 */
 body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    perspective:30px;
 }
 .container{
    width: 200px;
    height: 200px;
    background: red;
    transform: rotateY(30deg);
    /* 父亲旋转子旋转 */
    transform-style: preserve-3d;
    transition: 2s;
    /* transform-origin:right bottom;
    设置中心点 */
    
 }
 /* .container:hover{
    /* transform: scale(0.5,1.5); */
    /* transform: rotateX(89deg); 
     transform:translateZ(-10px);
 } */
 .box{
    width:200px;
    height:200px;
    transform:translate(30px,30px) rotateY(0deg);
    background: blue;
 }

长度和位移的实践项目五环挂环
html

<!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>
    <link rel="stylesheet" href="/css/show11.css">
</head>
<body>
    <div class="container">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 外边界不算在盒子里，不换行 */
}

body{
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
}
.container{
    width: 700px;
    display: flex;
    flex-wrap: wrap;/* 设置换行 */
    justify-content: center;
    transform-style: preserve-3d; /* 显示3d效果，要设置在父元素上 */
}
.items{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 5px;
   
}
/* 通过调整元素z轴位置，和x轴旋转达到挂环的效果 */
.container .items:nth-child(1){
    border:15px solid blue;
    transform: translateZ(6px) rotateX(356deg);
}


.container .items:nth-child(2){
    border:15px solid black;
    transform: translateZ(-2px) rotateX(2deg);
}
.container .items:nth-child(3){
    border:15px solid red;
    transform: translateZ(-6px) rotateX(6deg);
}

.container .items:nth-child(4){
    border:15px solid yellow;
    transform-origin:center ;
    transform: translateY(-100px) rotateX(358deg);
}
.container .items:nth-child(5){
    border:15px solid green;
    transform: translateY(-100px) translateZ(3px) rotateX(3deg);

}

圆角和阴影与项目水滴动画
html

<!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>
    <link rel="stylesheet" href="/css/show10.css">
</head>
<body>
    <div class="container">
        
    </div>
</body>
</html>

css

/* 圆角
圆角半径长度，比如将其设置为100px则图形为圆形 ,设置的时候以左上为原点顺时针旋转
但其实可以设置八个值，圆可能是椭圆
圆角：border-radius：30px 100px 60px 10px/ 30px 100px 60px 10px  以/分割，前四个代表横向半径，后四个代表纵向半径
fancy border radius网址可以制作https://9elements.github.io/fancy-border-radius/
flatuicolors是颜色网站
阴影
box-shadow: 10px 20px 30px red inset;
 第一个越大越往右 第二个越大越靠下 第三个越大越模糊 inset代表内阴影,内阴影是相反的
*/

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #74b9ff;
}
.container{
    width: 200px;;
    height: 200px;
    border-radius:30% 70% 48% 52% / 30% 64% 36% 70% ;
    /* 圆角半径长度，比如将其设置为100px则图形为圆形 ,设置的时候以左上为原点顺时针旋转*/
    box-shadow: 10px 20px 30px rgba(0,0,0,0.5) inset,10px 10px 30px  rgba(0,0,0,0.03),10px 10px 30px  rgba(0,0,0,0.3),-10px -20px 30px rgba(255,255,255,0.4) inset;
    /* 第一个越大越往右 第二个越大越靠下 第三个越大越模糊inset代表内阴影 */
    animation: water 2s linear infinite alternate;
    /* 设置帧动画，名称，时间，速度，无限，交替 */
    position: relative;

}
/* 高光点使用伪类元素选择器，通过position定位结合设置位置 */
.container::after{
    content: "";
    background:rgba(255,255,255,0.7);
    /* rgba与rgb相比多了透明度的设置 */
    width: 20px;
    height: 20px;
    position: absolute;
    top:32%;
    left:20%;
    border-radius: 38% 62% 42% 58% / 47% 62% 38% 53%  ;


}
.container::before{
    content: "";
    background: rgba(255,255,255,0.7);
    width: 10px;
    height: 10px;
    position: absolute;
    left:20%;
    top: 20%;
    border-radius: 50%;
}
/* 帧动画的设置 */
@keyframes water{
    25%{
        border-radius: 55% 45% 38% 62% / 30% 71% 29% 70%;
    }
    50%{
        border-radius: 69% 31% 79% 21% / 30% 53% 47% 70% ;
    }
}