首页 > 其他分享> 文章详细

css笔记（六）

2022-02-05 22:32:44 阅读：143 来源： 互联网

标签：动画 transform 笔记 height width background margin css

笔记基于尚硅谷

1.过渡与动画

1.1过渡

过渡

transition

通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果，提升用户的体验
属性值

transition-property：指定要执行过渡的属性

多个属性间使用,隔开；
如果所有属性都需要过渡，则使用all关键字；
大部分属性都支持过渡效果；
注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡；（不能使用auto）

transition-duration：指定过渡效果的持续时间

时间单位：s和ms（1s=1000ms）

transition-delay：过渡效果的延迟，等待一段时间后在执行过渡

transition-timing-function：过渡的时序函数

linear匀速运动
ease 默认值，慢速开始，先加速后减速
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier()来指定时序函数 https://cubic-bezier.com
steps()分步执行过渡，时间平均分配

可以设置第二个值：

end，在时间结束时执行过渡（默认值）
start，在时间开始时执行过渡

transition：可以同时设置过渡相关的所有属性

注意，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟时间

1.2动画

动画和过渡类似，都是可以实现一些动态的效果，不同的是

过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

@keyframes test {
    from {
        margin-left: 0;
    }

    to {
        margin-left: 700px;
    }
}

animation-name 指定动画的关键帧名称

animation-duration：指定动画效果的持续时间

animation-delay：动画效果的延迟，等待一段时间后在执行动画

animation-timing-function：动画的时序函数与过渡一样

animation-iteration-count 动画执行的次数

整数
infinite 无限执行

animation-direction 指定动画运行的方向

normal 从from向to运行，每次都是这样，默认值
reverse 从to向from运行，每次都是这样
alternate 从from向to运行，重复执行动画时反向执行
alternate-reverse 从to向from运行，重复执行动画时反向执行

animation-play-state 设置动画的执行状态

running 动画执行，默认值
paused 动画暂停

animation-fill-mode 动画的填充模式

none 动画执行完毕，元素回到原来位置，默认值
forwards 动画执行完毕，元素会停止在动画结束的位置
backwards 动画延时等待时，在动画开始的等待期间元素就处于from关键帧状态否则不提前进入关键帧
both 结合了forwards和backwards

animation也可以简写

注意问题与过渡一样

animation: test 2s 2s linear infinite alternate both;

2.变形

2.1平移

translateX() 沿着由方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移平移元素

百分比是相对于自身计算的

几种水平垂直方向都居中的方式

利用绝对定位

只能对于设置好宽度和高度的元素


position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

平移的方式

position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);

2.2 Z轴平移

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距

perspective 设置视距

html {
         /* 设置视距 */
    perspective: 800px;
}

2.3 旋转

通过旋转可以使元素沿着x、y或z旋转指定的角度

rotateX()
rotateY()
rotateZ()
backface-visibility: hidden; 是否显示元素的背面

xx deg (度数)/turn（圈数）

transform: rotateY(0.5turn); 
transform: rotateY(180deg);

2.4缩放

对元素进行缩放的函数

scalex() 水平方向缩放
scaleY() 垂直方向缩放
scale() 双方向的缩放
transform-origin 0 0 设置变形的原点

.box {
    height: 200px;
    width: 200px;
    background-color: #bfa;
    margin: 200px auto;
    transition: 2s;
}

.box:hover {
     transform: scaleX(2); 
     transform: scaleY(2); 
    transform: scale(2);
  transform: scale(10%);
   
}

2.5设置3D效果

transform-style: preserve-3d;

3练习

3.1过渡练习

css

.huabu{
            width: 600px;
            height: 600px;
            background-color: silver;
            margin: 40px auto;
        }
        .box1 {
            width: 100px;
            height: 100px;
          
           background-color: pink;
           margin-bottom: 50px;
           transition: all 1s 2s ;
        }
        .box2{
            width: 100px;
            height: 100px;
       
           background-color: #bfa;
           margin-bottom: 50px;
           transition: all 3s linear;
        }
        .box3{
            width: 100px;
            height: 100px;
          
           background-color:yellow;
           transition: all 3s steps(3) ;
         
        }
        .huabu:hover div{
            margin-left: 500px;
        }

html

 <div class="huabu">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

    </div>

3.2动画练习

 .donghua {

            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;

            width: 67.71px;
            height: 90px;
            background-image: url(img/4.jpeg);
            /* background-repeat: no-repeat; */
            animation: run .8s steps(7) infinite ;
          
           
        }
        @keyframes run{
            0%{
                background-position: 0 0;
            }
            100%{
                background-position: -474px 0;
            }
       
        }

  <div class="donghua">

    </div>

3.3浮出效果

css代码



 .warp{
    perspective: 800px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
overflow: hidden;
 height: 340px;
 width: 1000px;
    background-color:#f5f5f5;
}
.warp div{
   height: 253px;
   width: 471px;
    margin-left: 20px;
    float: left;
    
    margin-top: 50px;
   
   transition: all .3s;
}
.img1{
    
    background-image: url(img/xm1.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}
.img2{
   
    background-image: url(img/xm2.png);
    background-size: contain;
    background-repeat: no-repeat;
}
.warp>div:hover{
    box-shadow: 0 0  10px rgba(0, 0, 0, .6);
    transform:     translateY(-6px);
    /* translateZ(15px) */

}

<div class="warp">

        <div class="img1">
            
        </div>

        <div class="img2">
           
        </div>

    </div>

3.4时钟

表盘

   .biaopan {
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-image: url(img/表盘.jpeg);
            background-size: cover;
            border-radius: 50%;
            /* background-color: #bfa; */

            position: relative;

        }

        .biaopan>div {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            border-radius: 50%;

        }

        .s {
            width: 80%;
            height: 80%;
            animation: run 60s steps(60) infinite;
        }

        .s>div {
            width: 2px;
            height: 50%;
            background: red;
            margin: 0 auto;
        }

        .min {
            width: 70%;
            height: 70%;
            animation: run 3600s steps(60) infinite;
        }

        .min>div {
            width: 4px;
            height: 50%;
            background: black;
            margin: 0 auto;
        }

        .h {
            width: 50%;
            height: 50%;
            animation: run 216000s infinite;
        }

        .h>div {
            width: 8px;
            height: 50%;
            background: black;
            margin: 0 auto;
        }

        @keyframes run {
            0% {
                transform: rotateZ(0);
            }

            100% {
                transform: rotateZ(360deg);
            }
        }

 <div class="biaopan">
        <div class="s">
            <div>

            </div>
        </div>
        <div class="min">
            <div>

            </div>
        </div>
        <div class="h">
            <div>

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

3.5立方体3d

html {
            perspective: 800px;
        }

        .warp {

            width: 200px;
            height: 200px;
            margin: 300px auto;

            position: relative;
            transform-style: preserve-3d;
            animation: text 15s infinite linear;

        }

        .warp>div {
            position: absolute;
            width: 200px;
            height: 200px;

            background-size: cover;
            /* 为元素设置透明效果 */
            opacity: .85;

        }

        .box1 {
            background-image: url(3D/1.jpeg);
            transform: rotateY(90deg) translateZ(100px);

        }

        .box2 {
            transform: rotateY(-90deg) translateZ(100px);

            background-image: url(3D/2.jpeg);

        }

        .box3 {
            transform: rotateX(90deg) translateZ(100px);

            background-image: url(3D/3.jpeg);

        }

        .box4 {
            transform: rotateX(-90deg) translateZ(100px);

            background-image: url(3D/4.jpeg);

        }

        .box5 {

            transform: rotateY(180deg) translateZ(100px);
            background-image: url(3D/7.jpeg);

        }

        .box6 {

            transform: rotateY(0deg) translateZ(100px);
            background-image: url(3D/6.jpeg);

        }

        @keyframes text {
            from {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }

            to {
                transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn);
            }

        }

 <div class="warp">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
    </div>

标签：动画,transform,笔记,height,width,background,margin,css
来源： https://blog.csdn.net/qq_60587956/article/details/122695918

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css笔记（六）

1.过渡与动画

1.1过渡

1.2动画

2.变形

2.1平移

2.2 Z轴平移

2.3 旋转

2.4缩放

2.5设置3D效果

3练习

3.1过渡练习

3.2动画练习

3.3浮出效果

3.4时钟

3.5立方体3d