CSS各种变换

最新推荐文章于 2024-08-29 14:32:34 发布
最新推荐文章于 2024-08-29 14:32:34 发布
阅读量150 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42285148/article/details/129060275
版权
本文介绍了CSS3中的各种动画效果，包括线性和径向渐变的使用，以及如何创建过渡动画。此外，还详细讲解了2D变换如缩放、旋转和倾斜，以及3D变换中的立方体效果。文章还提到了关键帧动画和Animate.css这样的CSS3动画库的使用。
摘要由CSDN通过智能技术生成

渐变

线性渐变

div{
        height: 300px;
        width: 300px;
        border: 10px solid gray;
        /* background: linear-gradient(red,yellow); */
        /* background: linear-gradient(to top,red,yellow); */
        background: linear-gradient(90deg,red,yellow);
        /*
        支持多颜色渐变
        支持方向 to left....to bottom right...
        支持角度的写法
        */
    }

径向渐变

重复渐变

太极案例

实现方法

div{
   width: 200px;
   height: 200px;
   border: 1px solid gray;
   background: linear-gradient(white 50%,black 50%);
   margin: auto;
   display: flex;
   align-items: center;
   border-radius: 50%;
}
div::before{
    content:"";
    width:100px;
    display: block;
    height: 100px;
    background:radial-gradient(white 25%,black 25%);
    border-radius: 50%;
}
div::after{
    content:"";
    width:100px;
    display: block;
    height: 100px;
    background:radial-gradient(black 25%,white 25%);
    border-radius: 50%;
}

过渡动画

 div{
   width: 200px;
   height: 200px;
   background:yellow;
   transition: all 2s linear 1s;
}

/* all 所有属性
2s 动画时间
linear 匀速
1s 延迟
除了 display:none/block属性不行
*/
div:hover{
    width: 400px;
    height: 600px;
    background: red;
}

在菜单中的过渡动画

2D属性-transfrom

缩放

改变中心点的位置移动

旋转

rotate中心，正值顺时针，负值逆时针=====rotateZ

opacity: 0;//透明度

扇子打开案例

<style>
*{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
ul{
    margin: 10px auto;
    width: 600px;
    height: 400px;
    border:5px solid gray;
    position: relative;
}
li{
    position: absolute;
    width: 60px;
    height: 200px;
    left:50%;
    text-align:center;
    margin-left: -30px;
    bottom: 30px;
    transform-origin: bottom center;
    border-radius: 10px;
    transition: all 2s;
}
ul li:not(:nth-child(7)){
    opacity: 0;
}
ul:hover li{
    opacity: 1;
}
ul li:nth-child(1),ul li:nth-child(13){
background: purple;
}
ul li:nth-child(2),ul li:nth-child(12){
background: darkblue;
}
ul li:nth-child(3),ul li:nth-child(11){
background: deeppink;
}
ul li:nth-child(4),ul li:nth-child(10){
background: deepskyblue
}
ul li:nth-child(5),ul li:nth-child(9){
background: green;
}
ul li:nth-child(6),ul li:nth-child(8){
background: yellow;
}
ul li:nth-child(7){
background: red;
}
ul:hover li:nth-child(1){
    transform: rotate(90deg);
}
ul:hover li:nth-child(13){
    transform: rotate(-90deg);
}
ul:hover li:nth-child(2){
    transform: rotate(75deg);
}
ul:hover li:nth-child(12){
    transform: rotate(-75deg);
}
ul:hover li:nth-child(3){
    transform: rotate(60deg);
}
ul:hover li:nth-child(11){
    transform: rotate(-60deg);
}
ul:hover li:nth-child(4){
    transform: rotate(45deg);
}
ul:hover li:nth-child(10){
    transform: rotate(-45deg);
}
ul:hover li:nth-child(5){
    transform: rotate(30deg);
}
ul:hover li:nth-child(9){
    transform: rotate(-30deg);
}
ul:hover li:nth-child(6){
    transform: rotate(15deg);
}
ul:hover li:nth-child(8){
    transform: rotate(-15deg);
}
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
</body>

 多属性

 倾斜

关键帧动画

 div{
        width: 200px;
        height: 200px;
        background: red;
        animation: cxl2 6s linear infinite;
        /* infinite 无限次执行 */
    }
    /* 声明动画 */
    @keyframes cxl1 {
        from{
            width: 200px;
            height: 200px;
            background: red;
        }
        to{
            width: 200px;
            height: 400px;
            background: blue;
        }
    }
    @keyframes cxl2 {
        0%{
            width: 200px;
            height: 200px;
            background: red;
        }
        20%{
            width: 400px;
            height: 200px;
            background: yellow;
        }
        40%{
            width: 400px;
            height: 200px;
            background: green;
        }
        60%{
            width: 400px;
            height: 200px;
            background: black;
        }
        80%{
            width: 400px;
            height: 200px;
            background: yellow;
        }
        100%{
            width: 200px;
            height: 400px;
            background: blue;
        }
    }

 div{
    height: 100%;
    width: 200px;
    background-color: red;
    position: fixed;
    left: 0px;
    top:0px;
    transform: translateX(-100%);
    animation: run 1s forwards;
    animation: run 1s forwards reverse;
    /* animation-fill-mode: forwards; */
    /* forwards:保留最后画面
    backwards:初始画面
    none：默认值 */
   }
   @keyframes run {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0);
    }
   }

关键帧轮播案例

<style>
   *{
    padding: 0;
    margin: 0;
   }
   .box{
    width: 640px;
    height: 300px;
    margin:  auto;
    overflow: hidden;
   }
   .box img{
    width: 640px;
    height: 300px;
   }
   .box2{
    width: 9999px;
    animation: run 5s linear infinite;
   }
   //鼠标移上去暂停，移开滚动
    .box2:hover{
    animation-play-state: paused;
   }
   @keyframes run {
    0%{
        transform: translateX(0);
    }
    5%{
        transform: translateX(-640px);
    }
    25%{
        transform: translateX(-640px);
    }
    30%{
        transform: translateX(-1280px);
    }
    50%{
        transform: translateX(-1280px);
    }
    55%{
        transform: translateX(-1920px);
    }
    75%{
        transform: translateX(-1920px);
    }
    80%{
        transform: translateX(-2560px);
    }
    100%{
        transform: translateX(-2560px);
    }
   }
   .box3{
    float: left;
   }

</style>

<body>
    <div class="box">
        <div class="box2">
            <div class="box3"> <img src="01.jpeg" alt=""></div>
            <div class="box3"> <img src="02.jpeg" alt=""></div>
            <div class="box3"> <img src="03.jpeg" alt=""></div>
            <div class="box3"> <img src="04.jpeg" alt=""></div>
           <!-- 为了实现无缝轮播，第一张和最后一张一样 -->
            <div class="box3"> <img src="01.jpeg" alt=""></div>
        </div>
    </div>
</body>

逐帧动画

div{
        width: 200px;
        height: 200px;
        background: red;
        /* animation: run 5s steps(1,start); */
        animation: run 5s step-start;
        /* end(保留当前帧，看不到最后一帧，动画结束看不见) */
        /* start（保留下一帧，看不见第一帧，从第一帧很快跳到最后一帧 */
    }
    @keyframes run {
        0%{
            background: red;
        }
        50%{
            background: green;
        }
        100%{
            background: yellow;
        }
    }

step案例

div{
      width: 252px;
      height: 300px;
      background-image: url(./cat.png);
      animation: run 2s step-end infinite;
    }
    @keyframes run {
       0%{
        background-position: 0px 0;
       }
       20%{
        background-position: -252px 0;
       }
       40%{
        background-position: -504px 0;
       }
       60%{
        background-position: -756px 0;
       }
       80%{
        background-position: -1008px 0;
       }
       100%{
        background-position: -1008px 0;
       }
    }

Animate.css---------css3动画库

animate.css动画演示_dowebok

vs中引入，在class中使用

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/

    animate.css/3.5.1/animate.min.css">

    <div class="animated bounce"></div>

兼容性在 Can I use... Support tables for HTML5, CSS3, etc网站中查询

3D部分

 .box{
        width: 500px;
        height: 500px;
        margin: 20px auto;
        border: 3px solid black;
        transform-style: preserve-3d;
        position: relative;
        /* transform: rotateY(30deg); */
        perspective: 900px;
        /* 设置景深 */
    }
    .center{
        position: absolute;
        width: 200px;
        height: 200px;
        left: 50%;
        top: 50%;
        background-color: red;
        margin-top: -100px;
        margin-left: -100px;
        /* transform: translateZ(100px); */
        transition: all 2s;
    }
    .box:hover .center{
        transform: translateZ(900px);
        /* transform: translate3d(x,y,z); */
    }

前面三个值取值0-1

3d缩放

立方体

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 600px;
        height: 600px;
        margin: 20px auto;
        border: 3px solid black;
        position: relative;
        transform-style: preserve-3d;
        transform: rotateY(30deg) rotateX(30deg);
        animation: run 6s linear infinite;
    }
    @keyframes run {
        0%{
            transform: rotateY(30deg) rotateX(30deg);
        }
        50%{
            transform: rotateY(300deg) rotateX(300deg);
        }
        100%{
            transform: rotateY(30deg) rotateX(30deg);
        }
    }
    .box div{
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        line-height: 200px;
        text-align: center;
        font-size: 50px;
        color: #fff;
        opacity: 0.8;
    }
  .box div:nth-child(1){
    background: gray;
    transform: translateZ(100px);
  }
  .box div:nth-child(2){
    background: blue;
    transform: translateX(-100px) rotateY(-90deg);
  }
  .box div:nth-child(3){
    background: yellow;
    transform: translateY(-100px) rotateX(90deg);
  }
  .box div:nth-child(4){
    background: pink;
    transform: translateY(100px) rotateX(-90deg);
  }
  .box div:nth-child(5){
    background: purple;
    transform: translateX(100px) rotateY(90deg);
  }
  .box div:nth-child(6){
    background: orange;
    transform: translateZ(-100px);
  }
</style>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
</body>

冲鸭！打工人！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue.js的移动端3×3上下左右四个方向可手指滑动的轮播图
冲云霄
12-14 1328
介绍 轮播图并不陌生，基于Vue.js的很多UI库基本都支持轮播，但基本是横向或者纵向，甚至无法在手机端用手指滑动控制，本文解决的就是这两个问题。 效果图 实现过程 准备工作： 1，安装vue-touch插件：npm install vue-touch@next --save（默认vue中没有手指滑动操作的方法，所以需要引入此插件。安装失败可以尝试cnpm国内镜像） 2，安装成功后...
纯css轮播
weixin_34267123的博客
04-03 151
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS3学习第七天
qq_46563235的博客
10-24 1273
学习笔记来源于哔哩哔哩千锋教育前端学习笔记
css中transform属性的详细介绍
小杨的博客
07-22 2548
css中的transform属性 定义 CSS中的transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的 帮助文档 快捷键目录标题文本样式列表链接代码片表格注脚注释自定义列表在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 一、旋转rotate rotate() ：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有........
transform:translate
weixin_38249353的博客
11-24 883
transform:translate(-50%,-50%)实现水平垂直居中 translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。 当使用：top:50%;left:50%;， 是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。 与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而...
3dtransforms：CSS 3D变换简介
02-26
CSS 3D转换简介 有关CSS 3D转换的教程，示例和讨论。 最初是为撰写的， 。 在本地查看此项目 这个项目是由。 git clone https://github.com/desandro/3dtransforms.git cd 3dtransforms/ jekyll serve 执照 书面...
transit对元素进行css的变换
08-10
在前端开发中，CSS变换（Transitions）是增强用户体验的重要技术之一，允许元素在不同状态之间平滑地过渡。在JavaScript库中，`jquery.transit`是一个流行的选择，它为jQuery提供了强大的CSS3变换功能。这个库使得...
CSS3 SVG线条圆圈变换背景动画特效
06-11
【CSS3 SVG线条圆圈变换背景动画特效】是一种在网页设计中常见的视觉表现手法，它利用了CSS3的动画能力和SVG（Scalable Vector Graphics）的矢量图形特性，为网页创造出富有动态美感的背景效果。这个特效的核心是...
CSS3手势变换动画特效
04-16
解压密码：RJ4587 这款CSS3动画非常特别，它展现在我们眼前的是一只手掌，手掌下方有一个滑动按钮，点击按钮即可切换手势，...这款CSS3手势变换动画还是相当酷的，另外之前也分享过HTML5 3D手掌动画，效果也非常不错。
UnfoldingtheBoxModel交互式幻灯片CSS3D变换浏览
08-11
《Unfolding the Box Model: 探索CSS3D变换在交互式幻灯片中的应用》 CSS（层叠样式表）是网页设计的核心技术之一，它赋予了网页丰富的视觉表现力。随着技术的发展，CSS3引入了许多新的特性，其中3D变换（CSS3D ...
transform:translate()方法坐标详解
热门推荐
从0到1的成长的博客
01-05 3万+
定义：translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 但是如何移动呢？于是做了以下实验： 实验1.设置transform:translate(0px,0px),即延X轴和延Y轴均移动0像素，保持原有位置，做对比实验，为了方便说明，添加了坐标轴，如下所示： 实验2：设置transform:translate(10px,10px),即延X轴和延Y轴均移动10像素，对比原图位置，移动后的图如下所示， 结论：当移动的数是正数时，在Y轴方向上，相对原来的位
HTML5学习笔记(5.0)
mez_Blog的博客
03-08 188
translateX(-100%)里面的100%是相对于自身的100%animation拆分成单一属性。用animation做轮播图示例。让动画停留在最后状态。
css动画（详解带图）
qq_34267076的博客
05-17 2万+
css动画 1.过渡 过渡 （transition）的作用 1.通过过渡可以指定一个属性发生变化时的切换方式 2.通过过渡可以创建一些非常好的效果，提升用户的体验 常用属性 1.transition-property:指定要执行过渡的属性 多个属性间使用,隔开（ transition-property: width,height;） 如果所有属性都需要过渡，则使用all关键字 大部分属性都支持过渡效果，注意过渡时必须是有效数值向另外一个有效数值进行过渡，比如auto向0过渡就不是一个有效值 2.t
CSS中禁用DOM事件
bingmoujs的博客
08-26 526
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
css实现元素居中显示
最新发布
weixin_42812634的博客
08-29 184
css实现元素居中显示 text-align:center; margin-left:auto; margin-right:auto; width:50%; height:100px; line-height:100px; display:flex; justify-content:center; align-items:center; height:200px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); d
前端面试宝典【CSS篇】【8】
BDawn的专栏
08-26 106
绝对单位 适用于不需要缩放的场合，如打印样式。 相对单位 更适合Web设计，尤其是响应式设计。 vw/vh 适用于基于视口尺寸的布局设计。 em/rem 适用于字体大小相关的布局。
CSS的动画效果
weixin_71949204的博客
08-26 541
3、以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。2、创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。5、在CSS样式中，用animation属性来应用 @keyframes所定义的动画。语法： 创建动画：@keyframes 调用动画：animation。1、通过 @keyframes(关键帧动画) 规则，您能够创建动画。
CSS 知识点及使用案例
2301_78319341的博客
08-26 629
css快速入门
33.鼠标悬停时的波浪线效果 & CSS 重置
粉丝们务必加入微信粉丝群
08-25 176
通过理解这些原则,你可以创建你自己的重置,完美地适合你的项目的独特需求。这个技巧是 CSS 和 SVG 如何协同工作以创建令人兴奋的视觉效果的一个很好的例子。通过理解这些技术,你可以创建真正独特和吸引人的网页设计,给你的用户留下深刻印象。它避免了许多旧的 CSS 重置的复杂性和过度特异性,而是依靠更现代的浏览器默认值。从其中一些中汲取灵感,这里是我的自以为是的 CSS 重置,以及我选择包含每个规则的原因解释。虽然这可以工作,但它可能会使你的 CSS 难以阅读和维护,特别是如果你有多个这样的效果。
css 边框彩虹变换
09-01
要实现CSS边框的彩虹变换效果，可以使用背景渐变和动画属性来实现。首先，为目标元素添加一个边框，并将其设置为透明。然后，使用background-image属性添加一个渐变背景，并将背景色设置为彩虹颜色。接下来，使用动画属性让渐变颜色在一定的时间内循环播放。下面是一个实现边框彩虹变换效果的例子: ```html <div class="rainbow-border"></div> ``` ```css .rainbow-border { width: 200px; height: 200px; border: 5px solid transparent; background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); background-clip: padding-box; animation: rainbow 5s linear infinite; } @keyframes rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } ``` 上面的代码中，我们定义了一个名为"rainbow-border"的类，设置了宽度、高度和边框。然后，使用linear-gradient函数创建了一个从红色到紫色的渐变背景，并将其应用于背景图像。接下来，通过animation属性添加了一个名为"rainbow"的动画，设置了动画的持续时间、循环次数和缓动函数。动画的关键帧中，通过改变background-position属性的值来实现渐变颜色的循环播放效果。 这样，当你将"rainbow-border"类应用于一个元素时，它的边框就会呈现出彩虹变换的效果。这是一种简单而有效的方法来实现CSS边框的彩虹变换效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [有趣的CSS | css-border特效（转动边框，彩虹边框，渐变边框）和css变量](https://blog.csdn.net/qq_39370934/article/details/118439096)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值