transition、transform、flex、textshadow、多背景、盒子半透明

时间：2020-09-08 21:47:26 阅读：49 评论：0 收藏：0 [点我收藏+]

文字对齐问题

文字无法与背景图标居中对齐

使用inline-block 与vertrical-align配合使用

然后使用margin就可以进行移动了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 30px;
        border: 1px solid red;
        line-height: 30px;
    }
    span {
        display: inline-block;
        vertical-align: middle;
        width: 10px;
        height: 10px;
        background-color: pink;
    /*  margin-top: 10px;*/
    }
?
    </style>
</head>
<body>
    <div>
        <span></span>  文字
    </div>
</body>
</html>

transition(过度)

过度建议写在本体上

若没有写在本体上，则部分操作可能没有过度效果

transition-property

要过度的CSS属性名称

transition-duration

定义过度花费的时间，默认是0

transition-timing-function

规定过度效果的曲线，默认是ease

linear: 匀速

ease: 逐渐慢下来

ease-in: 加速

ease-out: 减速

transition-delay

规定过度效果何时开始，默认是0

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        /*transition: width 0.5s ease 0s, height 0.3s; 多组属性用逗号分隔*/
        transition: all 0.5s; /*  过渡写到本身上 谁做过渡动画，写到谁身上*/
    }
    div:hover {
        width: 800px;
        height: 300px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

transform（2D变形CSS3）

translate(x,y)：移动

translateX(X)：仅水平方向移动

transitionY(Y)：仅垂直方向移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*transition 过渡 */
        /*transform: translate(100px, 0);  x 100 y 是  0*/
        transition: all 0.4s;
    }
    div:hover {
        transform: translate(100px, 100px);
        /*translate 如果x -50% 跟父亲没关系，是走自己盒子宽度的一半*/
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

scale(x,y)：缩放

值>1:放大效果

值< 1:缩小效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    div:hover {
         /*transform: scale(0.8, 1); 0 0%   1  100%   宽度变为了原来的 80%  高度不变 */
        /*transform: scale(1, 0.8);  0 0%   1  100%   宽度变为了原来的 80%  高度不变 */
        transform: scale(0.8); /* 高度省略 默认  和 宽度一起缩放 都是 0.8 */
    }
    </style>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

roate(deg)：旋转

正数：顺时针旋转

负数：逆时针旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 0.6s;
    }
    div:hover {
        transform: rotate(360deg); 
    }
    img {
        transition: all 0.6s;
    }
?
    img:hover {
        transform: rotate(360deg); 
    }
    </style>
</head>
<body>
    <div>123</div>
    <img src="images/fengche.png" height="585" width="585" alt="">
</body>
</html>

transform-origin：调整元素转换变形的原点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 0.6s;
        transform-origin: right bottom;  /*设置 旋转中心点为 右下角*/
    }
    div:hover {
        transform: rotate(360deg); 
    }
?
    </style>
</head>
<body>
    <div>123</div>
    
</body>
</html>

skew(deg,deg)：倾斜(用的较少）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: skew(30deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

animation(动画CSS3)

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

语法格式：

animation:动画名称花费时间运动曲线何时开始播放次数是否反方向;

CSS3动画属性

属性	描述
`@keyframes`	规定动画
`animation`	所有动画属性的简写属性，除了 animation-play-state 属性
`animation-name`	规定 @keyframes 动画的名称
`animation-duration`	规定动画完成一个周期所花费的秒或毫秒。默认是 0
`animation-time-function`	规定动画的速度曲线。默认是 "ease"
`animation-delay`	规定动画何时开始。默认是 0
`animation-iteration-count`	规定动画被播放的次数。默认是 1
`animation-direction`	规定动画是否在下一周期逆向地播放。默认是 "normal"
`animation-play-state`	规定动画是否正在运行或暂停。默认是 "running"

案例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
?
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        left: 0;
        /*调用动画*/
        /*animation:动画名称 花费时间 运动曲线  何时开始  播放次数  是否反方向;*/
        animation: move 2s ease 0s infinite alternate;
        -webkit-animation: move 2s ease 0s infinite alternate;
    }
?
    /*声明动画  关键帧  @keyframes 动画名称 {  }  */
    @keyframes move  {
        from {
            left: 0;
            background-color: pink;
        }
?
        to {
            left: 1000px;
            background-color: yellow;
        }
    }
    @-webkit-keyframes move  {
        from {
            left: 0;
            background-color: pink;
        }
?
        to {
            left: 1000px;
            background-color: yellow;
        }
    }
    @-ms-keyframes move  {
        from {
            left: 0;
            background-color: pink;
        }
?
        to {
            left: 1000px;
            background-color: yellow;
        }
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

案例二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
        width: 400px;
        height: auto;
        /*animation:动画名称 花费时间 运动曲线  何时开始  播放次数  是否反方向;*/
        animation: heart 0.5s  infinite;  /*一个叫heart 的动画  每隔0.5s 执行动画 无限次*/
    }

    div {
        width: 100px;
        height: 100px;
        background-color: pink;
        margin: 100px auto;
        animation: heart 0.5s  infinite;  /*一个叫heart 的动画  每隔0.5s 执行动画 无限次*/
    }

    @keyframes heart {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1);
        }
    }
    </style>
</head>
<body>
    <img src="images/1.jpg" height="744" width="800" alt="">
    <div></div>
</body>
</html>

flex伸缩布局

方向：默认主轴从左向右，侧轴默认从上到下

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

flex-direction: 控制主轴方向

调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列

flex-direction: row 水平排列

案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
?
    section {
        width: 80%;
        height: 150px;
        /**/
        margin: 100px auto;
?
        /*父亲添加 伸缩布局*/
        display: flex;    
    }
    section div {   
        height: 100%;
        flex: 1;   /* 孩子的份数*/
?
    }
    section div:nth-child(1) {
        background-color: pink;
        flex:  2;
    }
    section div:nth-child(2) {
        background-color: purple;
        margin: 0 10px;
    }
    section div:nth-child(3) {
        background-color: blue;
        flex: 3;
    }
?
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

案例二

其中一个盒子固定宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
?
    section {
        width: 80%;
        height: 150px;
        /**/
        margin: 100px auto;
?
        /*父亲添加 伸缩布局*/
        display: flex;  
        min-width: 500px;   /*section最小的宽度就是 500*/
    }
    section div {   
        height: 100%;
        /*flex: 1;    孩子的份数*/
?
    }
    section div:nth-child(1) {
        background-color: pink;
        width: 200px;
    
    }
    section div:nth-child(2) {
        background-color: purple;
        margin: 0 10px;
        flex: 2;
    }
    section div:nth-child(3) {
        background-color: blue;
        flex: 1;
    
    }
?
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
</html>

text-shadow文字阴影

语法格式

text-shadow:水平位置垂直位置模糊距离阴影颜色;

值	描述
h-shadow	必需。水平阴影的位置，允许负值
v-shadow	必需。垂直阴影的位置，允许负值
blur	可选。模糊阴影的距离
color	可选。阴影的颜色

背景渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 300px;
        height: 100px;
        /*background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；*/
        /*background: -webkit-linear-gradient(top, red, green);*/
        /*background: -webkit-linear-gradient(left, red, green);*/
        /*background: -webkit-linear-gradient(left top, red, green);*/
        
        /*background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色 位置....)*/
        background: -webkit-linear-gradient(top, red 0%, green 50%, blue 100%);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

多背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        border: 1px solid #000;
        width: 600px;
        height: 600px;
        background: url(images/2.jpg) no-repeat top left , url(images/3.jpg) no-repeat bottom right;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

盒子半透明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        /*background: rgba(255, 0, 0, .2); 盒子的背景透明*/
        opacity: 0.2;  /*盒子半透明*/
        /*filter: alpha(opacity=20); ie 6 写法*/
    }

    </style>
</head>
<body>
<div>
    <div></div>
    <p>12312312</p>
</div>
    
</body>
</html>

transform 3D边形(CSS3)

roateX：沿X轴立体旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    img {
        transition: all 2s;
    }
    img:hover {
        transform: rotateX(360deg);
    }
    </style>
</head>
<body>
    <img src="images/x.jpg" height="226" width="300" alt="">
</body>
</html>

roateY：沿Y轴旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        perspective: 500px;
    }
    img {
        transition: all 5s;
    }
    img:hover {
        transform: rotateY(360deg);
    }
    </style>
</head>
<body>
    <img src="images/1498446043198.png" alt="">
</body>
</html>

perspective

相对于眼睛的距离，越小感觉越明显

一般给父亲加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       * {
        margin: 0;
        padding: 0;
       }
       body {
        /*perspective: 500px;*/
       }
        div {
            width: 224px;
            height: 224px;
            
?
        }
        
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 2s; 
?
        }
?
        div:hover img {
            transform: rotateY(180deg);
        }
        div img:last-child {
            backface-visibility: hidden;    /*定义当图片不面向屏幕时是否可见*/
        }
    </style>
</head>
<body>
    <div>
        <img src="images/hou.svg" alt="">
        <img src="images/qian.svg" alt="">
    </div>
</body>
</html>

transition、transform、flex、textshadow、多背景、盒子半透明

原文：https://www.cnblogs.com/minnersun/p/13633995.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)