CSS过渡与动画

最新推荐文章于 2023-10-16 17:00:25 发布
最新推荐文章于 2023-10-16 17:00:25 发布
阅读量138 收藏
点赞数
分类专栏： 日常 文章标签： html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyunfu233/article/details/115310682
版权

过渡

过渡的基本使用

  • transition过渡可以为一个元素在不同样式之间自动添加“补间动画”

  • transition属性四要素

    transition:width 1s linear 0s;  
/*要过渡的属性  过渡时间  线性过渡  延迟时间*/
transition:top 1s linear 0s;

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: chocolate;
            transition: border-radius 2s linear 0s;
        }
        .box:hover{
            border-radius: 100px;
        }
    </style>

    <div class="box"></div>

    效果

    过渡基本使用

    那些属性可以参与过渡

    • 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius（这些类型的值都是用数值的）

    • 背景颜色和文字颜色都可以被过渡

    • 所有变形（包括2D和3D）都能被过渡

    • 如果要所有属性都参与过渡，可以写all

      image-20210329190252652

      过渡的四个小属性

      属性意义
      transition-property哪些属性要过渡
      transition-duration动画时间
      transition-timing-function动画变化曲线（缓动效果）
      transition-delay延迟时间

      常用缓动效果

      image-20210329190751864

      贝塞尔曲线

      网站https://cubic-bezier.com/可以生成贝塞尔曲线， 可以自定义动画缓动参数

    image-20210329190902324

过渡实战

过渡实战1

/*css代码*/
<style>
        .box{
            margin: 0 auto;
            width: 300px;
            position: relative; 
            overflow: hidden;
            height: 200px;
        }
        .box img{
            width: 300px;
            height: 200px;
        }
        .box .info{
            position: absolute;
            width: 280px;
            height: 30px;
            bottom: 0;
            left: 0;
            padding-left: 20px;
            line-height: 30px;
            color: white;
            background-color: rgba(0, 0, 0, .5);
            /*主要代码 透明度为0 就隐藏了*/
            opacity: 0;
            transition: opacity 1s linear 0s;
        }
        .box:hover .info{
            /*当鼠标滑过时 透明度变为1不透明*/
            opacity: 1;
        }
    </style>

<!--html代码-->
<body>
    <div class="box">
        <img src="images/dog.jpg" alt="">
        <div class="info">狗</div>
    </div>
</body>
  • 使用绝对定位做遮罩层。
过渡实战2
image-20210329195206089 过渡实战2 
/*css代码*/
<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 458px;
            height: 107px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;

        }
        .box ul{
            list-style: none;
        }
        .box ul li{
            float: left;
            width: 107px;
            height: 107px;
            margin-right: 10px;
            position: relative;
        }

        .box ul li::before{
            content: '';
            display: block;
            width: 107px;
            height: 107px;
            transform: rotate(0);
            transition: transform 1s ease-in 0s;
        }
        .box ul li:nth-child(1)::before{
            background: url(images/a_1.png); 
        }
        .box ul li:nth-child(2)::before{
            background: url(images/a_2.png);  
        }
        .box ul li:nth-child(3)::before{
            background: url(images/a_3.png);   
        }
        .box ul li:nth-child(4)::before{
            background: url(images/a_4.png);  
        }
        .box ul li:last-child{
            margin-right: 0;
        }

        .box:hover ul li::before{
            transform: rotate(360deg);
        }

        .box ul li img{
            position: absolute;
            width: 60px;
            height: 60px;
            top: 50%;
            left: 50%;
            margin-top: -30px;
            margin-left: -30px;

            transition: transform 1s linear 0s;
        }

        .box:hover ul li img{
            transform: scale(1.2);
        }



    </style>

<!--html代码-->
<body>
    <div class="box">
        <ul>
            <li>
               <img src="images/文件类型-pdf.png" alt="">
            </li>
            <li>
                <img src="images/文件类型-引文.png" alt="">
            </li>
            <li>
                <img src="images/文件类型-视频.png" alt="">
            </li>
            <li>
                <img src="images/文件类型-附件.png" alt="">
            </li>
        </ul>
    </div>
</body>
  • 添加before伪元素，将背景设置为需要制作的动画，当鼠标hover时，进行旋转360度。
过渡实战3
过渡实战3 
/*css代码*/
 <style>
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            perspective: 800px;

        }

        .box img{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            position: relative;
        }
        .box .cat{
            opacity: 0;
        }
        .box .dog{
            position: absolute;
            top: 0;
            left: 0;
            transform-origin: 0 0;
            transition: transform 1s ease 0s;
        }

        .box:hover .dog{
            transform: rotateX(180deg);
        }
        .box:hover .cat{
            opacity: 1;
        }
    </style>

<!--html代码-->
 <div class="box">
        <img src="images/猫.png" class="cat" alt="">
        <img src="images/狗头.png" class="dog" alt="">
    </div>
  • 上层的图片使用绝对定位覆盖，做下面图片的遮罩层，使用transform:rotateX()进行3D变形，此时需要将父盒子添加perspective: 800px; 表示景深。
过渡实战4
过渡实战4 
/*css代码*/
<style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            perspective: 10000px;
        }

        .box{
            margin: 200px auto;
            width: 200px;
            height: 200px;
            
            position: relative;
             /* 设置变形类型，保留它内部的3D效果 */
            /* 这个盒子又是舞台又是演员，这个box整体带着里面的p旋转 */
            transform-style: preserve-3d;
            transition: all 10s ease 0s;
        }

        section:hover .box{
            transform: rotateX(360deg) rotateY(360deg);
        }
        .box p{
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;

        }

        /* 正面 */
        .box p:nth-child(1){
            background-color: rgba(219, 56, 211, .486);
            transform: translateZ(100px);
        }
        /* 背面 */
        .box p:nth-child(2){
            background-color: rgba(56, 219, 83, .486);
            transform: translateZ(-100px);
        }
        /* 顶部 */
        .box p:nth-child(3){
            background-color: rgba(213, 216, 32, .486);
            transform: rotateX(-90deg) translateZ(100px);
        }
        .box p:nth-child(4){
            background-color: rgba(236,82,102,.486);
            transform: rotateX(90deg) translateZ(100px);
        }
        /* 左侧 */
        .box p:nth-child(5){
            background-color: rgba(12, 230, 14, 0.486);
            transform: rotateY(90deg) translateZ(100px);
        }
        .box p:nth-child(6){
            background-color: rgba(119,17,236,.486);
            transform: rotateY(-90deg) translateZ(100px);
        }
    </style>

<!--html代码-->
<body>
    <section>
        <div class="box">
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </section> 
</body>

动画

动画的定义

<style>
@keyframes r{
    from{
        transform:rotate(0);
    }
    to{
        transform:rotate(360deg);
    }
}
/*
	r为动画名字 
	from是动画开始状态
	to是动画结束状态
	还可以使用百分数表示动画阶段 叫做多关键帧动画

*/

@keyframes r{
    0%{
        background-color:red;
    }
     20%{
        background-color:yellow;
    }
     40%{
        background-color:blue;
    }
     60%{
        background-color:green;
    }
    80%{
        background-color:purple;
    }
     100%{
        background-color:orange;
    }
}
</style>

动画的调用

image-20210329203316663 image-20210329203339809

动画的调用

image-20210329203316663 image-20210329203339809 image-20210329203354984
伯nulee
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
浅谈CSS过渡、动画和变换
09-24
下面小编就为大家带来一篇浅谈CSS过渡、动画和变换。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
CSS过渡动画
热门推荐
weixin_70815247的博客
07-21 1万+
transition是css3新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。之前元素->元素hover状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。过渡从开始状态到结束状态的中间过程可以查看格式transition过渡的属性完成时间(s)运动曲线延迟时间transitiontransition包含以下四个属性transition-property过渡属性。...
【CSS】过渡动画
小数点儿_
01-31 5002
- 常需要应用过渡动画的伪类选择器 - `:hover` 当用户悬浮到一个元素之上的时候匹配。 - `:active` 在用户激活（例如点击）元素的时候匹配，点击时应用，松开就结束 - 原选择器：过渡前的状态、过渡的过程（该状态变至其他状态的过渡过程） - 伪类选择器：过渡后的状态（可以只写有变更的样式） - `` 是一个内置组件 - 进入或离开可以由以下的条件之一触发 - 由 `v-if` 所触发的切换 - 由 `v-show` 所触发的切换 - 由特殊元素 `
讲解 CSS 过渡和动画 — transition/animation (很全面)
CRMEB小程序商城的博客
10-16 2130
由于用户越来越注重Web应用的使用体验，随之而来的是Web应用需要提供了更加完善的Web 动画效果来实现以平滑的状态贯穿于用户的整个使用过程中。现在，这已经是司空见惯了，用户潜意识是希望可以获得更快的反馈响应和更友好的用户界面。屏幕刷新率设备显示器每秒绘制新图像的次数，其单位为赫兹 (Hz)。目前大多数设备为 60Hz。卡顿每个帧的预算时间仅比16毫秒多一点（1秒/ 60 = 16.6毫秒如果浏览器无法在这一帧内完成工作，则帧率将下降，可能导致跳帧，内容会在屏幕上抖动。此现象通常称为卡顿。跳帧。
CSS——过渡与动画
老司机的后备箱
12-30 3723
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
css过渡 动画
erdongmudong的博客
08-13 391
css 过渡 动画
CSS 小结笔记之变形、过渡与动画的示例
09-22
主要介绍了CSS 小结笔记之变形、过渡与动画的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS3鼠标hover按钮过渡动画效果
12-13
这是一款CSS3鼠标hover按钮过渡动画效果。该CSS3鼠标hover按钮过渡动画效果共有两组效果，一组是按钮背景过渡动画效果，一组是按钮边框过渡动画效果。
CSS 动画
12-13
一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的...
CSS实现悬停过渡动画三部曲
01-21
CSS不一定要写得多么复杂才能实现特殊效果。如下就是三个超级简单的过渡的例子，可能只是几行代码，但是添加到Web应用程序中，却会让它增色不少。 如下是我们将在本教程中构建的代码项目设置在这个项目中，我们将把...
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
05-30
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 参考文档： http://blog.csdn.net/u014175572/article/details/51535768
css过渡动画
weixin_46391404的博客
02-23 554
一、transition动画 语法：transition:过渡属性 过渡时间 过渡延迟时间 过渡方式; 1.transition-property(过渡属性) 取值： none 默认值，没有属性发生过渡 all 所有发生变化的css属性都添加过渡 eg: transition:all 1s; indent 指定要添加过渡的css属性列表 eg: transi...
css 动画 过渡
qq_42389674的博客
08-14 577
css 过渡
css3动画——2d动画，过渡动画
不想写代码的一天
05-07 982
css3的动画 分类： 2d 动画 ，3d 动画， 2d转3d，过渡动画和帧动画 《一》2d转换:transfrom 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。 属性 描述 translate() 平移（沿x,y,z轴方向平移 px） rotate() 旋转（沿x,y,z轴方向平移 deg） scale() 放大 skew (变形 deg) trans...
css2D、3D详解
weixin_69474694的博客
07-15 506
css2D、3D详解
CSS之过渡和动画
学如逆水行舟，不进则退！
04-30 1422
CSS之过渡和动画
H5动画实现---过渡
小马过河
09-29 3094
通过过渡transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点，必须规定两项内容：1.规定希望把效果添加到哪个 CSS 属性上，2.规定效果的时长 1，语法：rty duration timing-function delay; transition: property duration t...
img图片标签及base64图片webp格式图片
伯nulee
12-05 2337
语法 <img src="链接" alt="描述"> 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片标签</title> </head&g
css transition过渡动画
最新发布
04-05
CSS过渡动画（CSS transition）是一种在元素状态改变时，通过添加过渡效果来实现平滑动画的技术。它可以应用于元素的属性变化，比如颜色、大小、位置等，使得元素的变化更加流畅和吸引人。 CSS过渡动画的实现主要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值