过渡属性篇

已于 2022-12-26 21:35:51 修改
阅读量410 收藏
点赞数 1
分类专栏： css 文章标签： 动画 html 前端
于 2022-12-26 21:14:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bubbleJessica/article/details/128447723
版权

transition: width 1s linear 0s;

含义：过渡属性 动画时长 匀速曲线 延迟时长

transform: scale(1.2) rotate(45deg)

含义：放大1.2倍 旋转45度

transition: width 1s cubic-bezier(,,,,) 0s;

网站：https://cubic-bezier.com/

含义：过渡属性 动画时长 贝塞尔曲线 延迟时长

过渡实战1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡效果1</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 40px auto;
            width: 1200px;
            overflow: hidden;
            /*background-color: red;*/
        }
        .box ul{
            list-style: none;
        }
        .box ul li{
            float: left;
            width: 380px;
            height: 210px;
            margin-right: 20px;
            position: relative;
        }
        .box ul li img{
            width: 380px;
            height: 210px;
        }
        .box ul li .info{
            position: absolute;
            padding-left: 10px;
            width: 370px;
            height: 30px;
            line-height: 30px;
            bottom: 0;
            color: white;
            background-color: rgba(0,0,0,.5);
            /* 透明度设置为0，不是背景的透明度，而是整体的透明度 */
            opacity: 0;
            /* 过渡 */
            transition: opacity 1s ease 0s;
        }
        /* 当li被触碰的时候，内部的info盒子就要把透明度变为1 */
        .box ul li:hover .info {
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li>
            <img src="images/0.jpg" alt="">
            <div class="info">北京的故宫</div>
        </li>
        <li>
            <img src="images/0.jpg" alt="">
            <div class="info">鸟巢体育场</div>
        </li>
        <li>
            <img src="images/0.jpg" alt="">
            <div class="info">十七孔桥</div>
        </li>
    </ul>
</div>
</body>
</html>

过渡实战2 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡效果2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 508px;
            height: 107px;
            /*background-color: red;*/
            margin: 40px auto;
        }
        .box ul{
            list-style: none;
        }
        .box ul li{
            float: left;
            width: 107px;
            height: 107px;
            margin-right: 20px;
            position: relative;
        }
        .box ul li::before{
            content: '';
            display: block;
            width: 107px;
            height: 107px;
            transform: rotate(0);
            transition: transform 1s ease 0s;
        }
        .box ul li:nth-child(1)::before{
            background-image: url("images/a_1.png");
        }
        .box ul li:nth-child(2)::before{
            background-image: url("images/a_2.png");
        }
        .box ul li:nth-child(3)::before{
            background-image: url("images/a_3.png");
        }
        .box ul li:nth-child(4)::before{
            background-image: url("images/a_4.png");
        }
        .box ul li img{
            position: absolute;
            width: 60px;
            height: 60px;
            top: 50%;
            left: 50%;
            margin-left: -30px;
            margin-top: -30px;
            transition: transform .5s ease 0s;
        }
        /* 背景圆环旋转一周 */
        .box ul li:hover::before{
            transform: rotate(360deg);
        }
        /* 中心图标放大1.2倍 */
        .box ul li:hover img{
            transform: scale(1.2);
        }
    </style>
</head>
<body>
<div class="box">
    <ul>
        <li><img src="images/icon1.svg"></li>
        <li><img src="images/icon2.svg"></li>
        <li><img src="images/icon3.svg"></li>
        <li><img src="images/icon4.svg"></li>
    </ul>
</div>

</body>
</html>

过渡效果3 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡效果3</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 200px;
            height: 200px;
            /*border: 1px solid #000;*/
            margin: 40px auto;
            /*有2D和3D，需要加perspective属性*/
            perspective: 500px;
            position: relative;
        }
        .box img{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            /*后面才加上边框的*/
            border: 1px solid #000;
        }
        .box img.dog{
            position: absolute;
            top: 0;
            left: 0;
            /*水平垂直轴 从左边开*/
            transform-origin: 0 0;
            transition: transform 1s ease 0s;
        }
        .box:hover img.dog{
            transform: rotateY(-180deg);
        }
        .no2 img.dog{
            /*水平垂直轴 从右边开*/
            transform-origin: 100% 100%;
            transition: transform 1s ease 0s;
        }
        .no2:hover img.dog{
            transform: rotateY(180deg);
        }
        .no3 img.dog{
            /*水平垂直轴 从上边开*/
            transform-origin: 0 0;
            transition: transform 1s ease 0s;
        }
        .no3:hover img.dog{
            transform: rotateX(180deg);
        }
    </style>
</head>
<body>
<div class="box">
    <img class="cat" src="images/cat.jpg" alt="">
    <img class="dog" src="images/dog.jpg" alt="">
</div>
<div class="box no2">
    <img class="cat" src="images/cat.jpg" alt="">
    <img class="dog" src="images/dog.jpg" alt="">
</div>
<div class="box no3">
    <img class="cat" src="images/cat.jpg" alt="">
    <img class="dog" src="images/dog.jpg" alt="">
</div>
</body>
</html>

过渡效果4 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正方体</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        section{
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /*透视效果设置大点，不然会发生扭曲，看起来不像正方体*/
            perspective: 10000px;
        }
        .box {
            width: 200px;
            height: 200px;
            perspective: 10000px;
            position: relative;
            /*设置变形类型，保留它内部的3D效果*/
            /*这个盒子又是舞台，又是演员，这个box整体带着里面的p旋转*/
            transform-style: preserve-3d;
            transition: all 10s ease 0s;
        }
        section:hover .box{
            transform: rotateX(360deg) rotateY(360deg);
        }
        .box p{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .box p:nth-child(1){
            background-color: rgba(219,56,211,0.486);
            /*前面*/
            transform: translateZ(100px);
        }
        .box p:nth-child(2){
            background-color: rgba(42,128,199,0.486);
            /*顶面 后仰*/
            transform: rotateX(90deg) translateZ(100px);
        }
        .box p:nth-child(3){
            background-color: rgba(56,219,83,0.486);
            /*背面 后仰*/
            transform: rotateX(180deg) translateZ(100px);
        }
        .box p:nth-child(4){
            background-color: rgba(213,216,32,0.486);
            /*底面 前倾*/
            transform: rotateX(-90deg) translateZ(100px);
        }
        .box p:nth-child(5){
            background-color: rgba(236,82,102,0.486);
            /*侧面*/
            transform: rotateY(90deg) translateZ(100px);
        }
        .box p:nth-child(6){
            background-color: rgba(119,17,236,0.486);
            /*侧面*/
            transform: rotateY(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
<!--div对于p来说是舞台，对于section来说是演员-->
<section>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</section>
</body>
</html>

动画定义

动画名字 动画时间 速度曲线 延迟时间 次数 


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: orange;
            animation: r 1s linear 0s infinite 3;
        }

        @keyframes r {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: blue;
            animation: movelr 2s linear 0s infinite alternate;
        }

        @keyframes movelr {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(1000px);
            }
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: green;
            animation: changeToCircle 1s linear 0s forwards;
        }

        @keyframes changeToCircle {
            from {
                border-radius: 0;
            }
            to {
                border-radius: 50%;
            }
        }

        .box4 {
            width: 200px;
            height: 200px;
            background-color: red;
            animation: changeColor 3s linear 0s alternate infinite;
        }

        @keyframes changeColor {
            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>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

</html>

动画实战2 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .dengpao {
            position: absolute;
            top: 300px;
            left: 300px;
        }
        .guang {
            position: absolute;
            top: 235px;
            left: 222px;
            animation: ss 1s ease 0s infinite alternate;
        }

        @keyframes ss {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        .huojian {
            position: absolute;
            top: 300px;
            left: 800px;
            animation: zd .4s linear 0s infinite alternate;
        }

        @keyframes zd {
            from {
                transform: translateX(-20px) translateY(-20px);
            }
            to {
                transform: translateX(20px) translateY(20px);
            }
        }

        .line1 {
            width: 2px;
            height: 166px;
            background-color: blue;
            position: absolute;
            top: 300px;
            left: 800px;
            transform: rotate(45deg);
            animation: yd 1s linear 0s infinite;
            opacity: 0;
        }
        .line2 {
            width: 2px;
            height: 266px;
            background-color: blue;
            position: absolute;
            top: 340px;
            left: 850px;
            transform: rotate(45deg);
            animation: yd 1s linear .4s infinite;
            opacity: 0;
        }
        .line3 {
            width: 2px;
            height: 266px;
            background-color: blue;
            position: absolute;
            top: 390px;
            left: 890px;
            transform: rotate(45deg);
            animation: yd 1s linear .68s infinite;
            opacity: 0;
        }
        .line4 {
            width: 2px;
            height: 266px;
            background-color: blue;
            position: absolute;
            top: 390px;
            left: 920px;
            transform: rotate(45deg);
            animation: yd 1s linear .2s infinite;
            opacity: 0;
        }
        @keyframes yd {
            0% {
                transform: rotate(45deg) translateY(-300px);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: rotate(45deg) translateY(300px);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <img class="dengpao" src="images/dengpao.png" alt="">
    <img class="guang" src="images/guang.png" alt="">

    <img class="huojian" src="images/huojian.png" alt="">
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
    <div class="line4"></div>
</body>
</html>

 

 

 

bubbleJessica
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
平面（2D）转换：使用transform属性实现元素的位移、旋转、缩放等效果
weixin_47448904的博客
10-09 1360
目标：使用translate快速实现绝对定位的元素居中效果。目标：使用transform-origin属性改变转换原点。目标：使用transform复合属性实现多形态转换。目标：使用translate实现元素位移效果。目标：使用rotate实现元素旋转效果。目标：使用scale改变元素的尺寸。平面转换也叫2D转换。
Vue学习笔记进阶篇之过渡状态详解
08-29
对于数据元素本身的变化，如数字运算、颜色显示、SVG节点位置调整以及元素大小和属性变化，Vue都能通过响应式机制和组件系统与第三方库配合，轻松实现过渡效果。 例如，我们可以利用`watcher`来监听数值属性的变化...
CSS3：2D转换之缩放transform: scale
weixin_46682277的博客
01-07 5627
只要给元素添加了scale这个属性，就能控制元素放大或缩小。 语法格式： transform: scale(x,y); 注意点： x和y之间用逗号隔开； transform: scale(1,1)：表示宽和高都放大1倍，其实等于没有放大，还是原来的大小； transform: scale(2,2)：宽和高都放大了2倍； transform: scale(2)：只写一个参数，默认第二个参数和第一个参数一样，其实就是简写了，相当于transform: scale(2,2)；写起来更方便； transform:
CSS动画与变形（一）-------transform变形
chenmo2001的博客
05-17 1830
CSS动画与变形（一） ———变形 一、简介： CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。借助与位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指...
css3 Transform
qq_39430589的博客
09-22 382
1、Transform转换属性 所有的二维变形（转化），都是刷的一声就变过去了，没有任何效果 2、Transform 方法 （1）转换：translate（x,y） x表示水平方向的移动，y表示竖直方向的移动。负值表示往相反的方向移动。 使用该方法，可以实现水平居中         #div{             width: 100px;             hei
图片滑动发大效果scale()方法
Rziziの博客
08-30 284
图片滑动发大效果 scale()方法 缩放，根据中心原点进行缩放， 里面数字大于1是 ”放大“ 里面数字小于1是 “缩小” scaleX(x)：元素仅水平方向缩放（X轴缩放） scaleY(y)：元素仅垂直方向缩放（Y轴缩放） scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放） transform: scale(0.2); transform: scale(1.2); img { width: 100px; height: 100p
Vue运用transition实现过渡动画
10-17
在本篇文章中，我们将深入探讨如何使用`<transition>`来实现过渡动画。 首先，`<transition>`标签用于包裹需要添加过渡效果的元素或组件。在Vue中，当一个元素或组件的VNode（虚拟DOM节点）被插入、更新或删除时，`...
CSS属性
01-20
在这篇文章中，我们将深入探讨CSS定位、浮动元素的父元素高度自适应、渐变、过渡、2D变型以及3D动画等关键知识点。 一、CSS定位 1. `static`: 这是元素的默认定位方式，元素按照正常的文档流排列，`margin`和`top`...
解决vue的过渡动画无法正常实现问题
10-16
3. **验证过渡属性**：确认正在过渡的属性是否正确设置，如`transition: opacity .5s;`。 4. **查看Vue生命周期**：确保过渡在正确的时间点触发，与Vue组件的状态同步。 5. **浏览器开发者工具**：利用浏览器的...
炫酷登录页面——掌握属性动画
06-17
本篇文章将深入探讨属性动画在创建炫酷登录页面中的应用，以及如何通过它来提升应用的互动性和视觉吸引力。 属性动画是Android 3.0（API Level 11）引入的一个功能，它允许开发者在不涉及UI线程阻塞的情况下，实现...
CSS动画（1）
chnejgeo的博客
06-27 246
前言：CSS3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。 比transition动画功能更强大的是a
前端自学笔记2：旋转效果的实现
qq_44986029的博客
04-15 1046
原理：第一步，先通过设置绝对定位，将小盒子向右、向下移动大盒子的50%；第二步，再通过平移，将小盒子向左，向上移动自身的50%。第一步实现/*给大盒子设置相对定位：*//*给小盒子设置绝对定位：*/left: 50%;top: 50%;效果如下：/*给小盒子设置样式*/
css常用属性
weixin_40551017的博客
02-29 99
<!-- placeholder 属性意思是搜索框内预期值的剪短提示文字 --> <input type="text" placeholder="搜索电影、电视剧、综艺、影人"> .koubei_body table { width: 300px; height: 360px; /*合并边框，只有合并边框了，才能给tr添加border-bttom属性生效*/ bo...
CSS第三部分——过渡与动画
c283933的博客
04-29 4145
一、过渡（transition） 过渡（transition）是CSS3中具有颠覆性的特性之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画：是从一个状态渐渐的过渡到另外一个状态。 可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。 经常和:hover一起搭配使用。 语法：transition：要过渡的属性 花费时间 运动曲线 何时开始； 属性（必须写）：想要变化的css属性，
CSS布局的基本原理：盒模型、display、postion和float
学习记录
10-29 2469
作者：David 继续之前，你现在需要了解最基本的CSS知识，比如： CSS用以描述HTML文档的样式，让页面更加美观如何引入CSS代码CSS的基本语法如何使用CSS的选择器 这里我们来理解一下CSS的基本原理。先想象一下如果自己来开发一个CSS的渲染引擎，我们会怎么来做？得到了HTML元素构成的一个树状结构，首先要做的事情是不是就要在一个页面上把各个HTML元素按照一定的顺序排列出
transform三大属性之scale（缩放）
热门推荐
weixin_44167504的博客
09-05 3万+
transform三大属性之scale scale(数值)定义倍数缩放，>1放大，<1缩小 scaleX()通过x轴定义，仅水平方向缩放 scaleY()通过y轴定义，仅垂直方向缩放 scaleZ()通过z轴定义，定义3d缩放 transform: scale(2);放大两倍 transform: scaleX(2);水平方向放大两倍 transform: scaleY(2);垂直方向放大两倍 缩小同理。 ...
如何CSS-画0.5px的线，解决IOS移动端兼容性问题
西门吹雪
11-21 8758
** 如何CSS-画0.5px的线，解决IOS移动端兼容性问题## ** 设计师在做设计图的时候都是以iphone6（宽为750物理像素）为基准进行设计的。iphone6的设备像素比（即css像素与物理像素的比例）是2，所以设计师在设计图画了边框为1px的box的时候，相对于css代码来说就是0.5像素。如果用css直接设置边框为0.5px，这种情况下iPhone可以正常显示，但是android下几乎所有的浏览器都会把0.5识别为0，即无边框状态，所以这种方式行不通的。 在这里插入代码片<!DOCTY
CSS3 Transform
thingir的博客
01-20 668
在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。语法：transform ： none | <transform-function> [ <transform-function> ]* //也就是: transform: rotate | scale | skew | translate |matrix;
【css】css-transform: scale(1.2,1.2)；鼠标放上去图片变大
jieweiwuwei的博客
10-01 543
<template> <div class="hello"> <div class="img" :src="src"></div> </div> </template> <script> export default { data(){ return{ src:"", } }} </script> <style scoped> .img{ width: 200px; .
transition过渡
最新发布
08-18
transition属性包括四个主要部分：过渡属性（transition-property）、过渡时间（transition-duration）、过渡延迟时间（transition-delay）和过渡速度变化（transition-timing-function）。过渡属性用于指定要参与...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值