首页 > 其他分享 >CSS进阶3-transform 动画-渐变(线性渐变、镜像渐变)-关键帧

CSS进阶3-transform 动画-渐变(线性渐变、镜像渐变)-关键帧

时间:2023-12-02 16:45:05浏览次数:37  
标签:平移 关键帧 进阶 动画 -- 渐变 transform background

 

 1. 动画

    介绍:改变盒子在平面内的形态(平移、缩放、旋转、倾斜)

     属性:

      •  平移:transform:translate(值1 ,值2);(默认为X轴,translateY--下移) 

 

                    — —平移依然在原来文档流。

 

      •  移动:transform:translate(值1,值2);可右斜移动

代码:

/* 平移 */
.translate{
    width: 150px;
    height: 150px;
    background-color: pink;
}
/* 鼠标悬浮效果-->X轴平移500px */
/* 平移值为X轴,Y轴时 就会脱离平移*/
.translate:hover{
    background-color: yellow;
    transform: translate(500px);
}

 

视图:

 

 

      •  旋转:transform:rotate(度数);单位:deg

                  — —默认原点是盒子中心。(可为正负,正为:顺时针,负为:逆时针)

代码:

/* 鼠标悬浮效果 */
.rotate:hover{
    background-color: yellowgreen;
    /* 旋转30度 */
    transform: rotate(30deg);
}

视图:

 

 

      •  缩放:transform:scale(值);1为区间,小于1则缩小,大于1则放大;值为负则反向缩放

                  — —transform:scale(值1,值2) 按照x与y轴缩放。若一个值为等比例缩放。scale:正为放大,负为缩小

代码:

.scale{
    width: 150px;
    height: 150px;
    /* 背景色 */
    background-color: turquoise;
}

/* 鼠标悬浮效果显示 */
.scale:hover{
    /* 小于1则缩小,大于1则放大 */
    transform: scale(2);
}

 

      •  倾斜:transform:skew(度数);单位:deg

 

.skew{
    width: 150px;
    height: 150px;
    /* 背景色 */
    background-color: turquoise;
}

/* 鼠标悬浮效果显示 */
.skew:hover{
    /* 正负倾斜不同 */
    transform: skew(30deg);
}

 

 

    •  平移、缩放、旋转、倾斜可相互搭配使用。
    •  值:可为正负。单位:px、百分比(正负出现的效果不同,建议多次尝试)
    •  如果设置一个值-->X轴距离,第二个值-->Y轴距离

 

2. 渐变:

  • 线性渐变:

    属性:linear-gradinet
           渐变方向:to  left、right、top、bottom(组合使用)
      角度:渐变终止方向的角度,渐变方向为百分比与单位值(deg)可用

      重复渐变:repeating-linear-gradinet(color1,color2)--在颜色前可设置角度(单位:deg),后可加占比(单位:px)

 代码:

/* 线性渐变 */
.linear{
    width: 500px;
    height: 300px;
    border: 5px solid wheat;
    border-radius: 400px;
    /* 渐变 to lef-->向左渐变 */
    background: linear-gradient(to left, red, orange, yellow,green, blue, indigo,purple );

    /* 重复渐变 */
    background: repeating-linear-gradient(30deg,red,yellow,white)
}

视图:

 

 

 

 

  • 镜像(放射)渐变:(与盒子形状有关:盒子为正方形,镜像渐变为圆)

    属性:radial-gradient();
          形状:ellipse 椭圆/ circle 圆
      发散方向:形状 + at + left、right、top、bottom(可组合)
      重复渐变:repeating-radial-gradinet(color1 ,color2)color后可加占比(单位:px)

代码:

 

.radial{
    width: 500px;
    height: 500px;
    border: 5px solid wheat;

    /* 普通镜像 */
    background: radial-gradient(white,pink,yellow);

    /* 镜像重复渐变-->圆形-->从右下渐变 */
    /* background:repeating-radial-gradient(circle at right bottom ,yellow 4px,white 10px); */
}

 

视图:

 

3. 过渡动画:

    过渡动画:transtion:all时长,单位:s/ms)  linear;
      — —属性:    all:所有属性获得动画,linear:匀速
      — —先慢后快:ease-in

代码:

.guodu{
    width: 300px;
    height: 300px;
    background-color: aquamarine;
}

/* 过渡动画,鼠标悬浮旋转20° 同时 缩小  并平移100px*/
.guodu:hover{
    transform: translate(100px) rotate(20deg) scale(0.5) ;
    /* 图片位置-->右下 */
    transform-origin: right bottom;
}

4. 图片位置:

    transform-origin:left/right/top/bottom(可组合);

5.关键帧:

    @keyframes 自定义名 {
      到达某个值时,例:10%{
        动画...
        }
      }

    animation: 自定义名 秒值 速度;

    •  0%开始,100%完成。
    •  在 @keyframes 中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。
    •  动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
    •  尽量用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%。

代码:

 

.box{
    width: 300px;
    height: 300px;
    background-color: wheat;

    /* 将关键帧动画写入  6秒   匀速*/
    animation: guanjianzhen 6s linear;
}

/* 关键帧 */
/* 0时平移200px-->50时旋转30°-->80时放大-->完成时平移回原位 */
@keyframes guanjianzhen {
    0%{
        transform: translate(200px);
    }
    50%{
        transform: rotate(30deg);
    }
    80%{
        transform: scale(5);
    }
    100%{
        transform: translate(0px);
    }
}

 

标签:平移,关键帧,进阶,动画,--,渐变,transform,background
From: https://www.cnblogs.com/warmNest-llb/p/17870720.html

相关文章

  • 我的心血之作:一套适合 SAP UI5 从业人员从入门到进阶的学习教程,以及教程背后的故事
    一转眼2023年又要结束了。我从2007年开始,以软件开发工程师的角色进入职场,马上也快满17年了。在这快17年的软件开发职业生涯里,我也见识并使用了许许多多的开发技术,编程语言,开发框架,平台。IT界这十多年来涌现出的一些新技术,我也主动或被动地去追逐过。比如2015年时,大......
  • CSS进阶2-弹性布局-弹性盒子
     本节重点:弹性布局(弹性盒子)BFC布局/规范CSS新属性,不包含边框和内边距CSS3的拓展:普通盒模型,怪异盒子模型(IE)  在学习弹性布局前,我们学过Float浮动和Position定位,浮动会出现一些‘诡异’的事情,定位则用起来相对麻烦,弹性布局用起来就会很舒服。1......
  • Numpy数值计算Numpy 进阶在线闯关_头歌实践教学平台
    Numpy数值计算进阶第1关Numpy广播第2关Numpy高级索引第3关Numpy迭代数组第1关Numpy广播任务描述本关任务:给定两个不同形状的数组,求出他们的和。编程要求首先用arange()生成一个数组,然后用reshape()方法,将数组切换成4x3的形状,最后再与basearray相加,输出它们的和......
  • 进阶版
    1.浮点数在内存中的存储#define_CRT_SECURE_NO_WARWINGS#include<stdio.h>//intmain()//{// inta=10;// floatf=10.0;//// return0;//}//intmain()//{// inta=20;//// //00000000000000000000000000010100 -源码// //0000000000000000000000000001010......
  • CSS进阶1--字体样式-文本样式
    link.css--连接外部样式表1.文字样式:①font-family:字体样式②font-style:文本的字体样式 属性:normal-正常 italic-斜体字样式显示 oblique-文字向一边倾斜(与italic类似,但不太支持)③font-variant--以小型大写字体或正......
  • 代码随想训练营第四十五天(Python)| 70. 爬楼梯 (进阶)、322. 零钱兑换 、 279.完全平方数
    70.爬楼梯(进阶)1、使用01背包解法classSolution:defclimbStairs(self,n:int)->int:#dp数组代表爬上第i阶有dp[j]种方法dp=[0]*(n+1)dp[0]=1m=2#排列先背包后物品foriinrange(n+1):......
  • 基于双下划线的跨表查询 进阶连续跨表查询
    基于双下划线的跨表查询:#连表查询#基于对象的跨表查询,先查对象,通过对象再去查另一个对象(正向:字段名,反向:表名小写/表名小写_set.all())#地址为山东的作者写的所有书#author_detail=models.AuthorDetail.objects.get(addr='山东')#author=author_detail.autho......
  • Pandas数据框操作进阶
    Pandas为Python营造了一个高水平的操作环境,还提供了便于操作的数据结构和分析工具。无需更多介绍,Pandas已经是Python中数据分析的常用工具了。作为一个数据科学家,Pandas是我日常使用的工具,我总会惊叹于它强大的功能,并且极大提升了工作效率的Pandas技巧。对于pandas新手而言,Pandas......
  • SpringMVC_2023_11_28_3 SpringMVC_进阶(文件的上传--idea的配置)
    SpringMVC_进阶(文件的上传--idea的配置)项目结构......
  • 网站SEO进阶指南:如何用Python爬虫进行网页结构优化
    前段时间一个做网络优化的朋友找我,问我能不能通过爬虫的手段对他们自己的网络进行优化。这个看着着实比较新颖,对于从事爬虫行业的程序员来说,很有挑战性,值得尝试尝试。说白了使用爬虫进行网站优化需要对网站的结构、内容、链接等进行全面的分析和优化,以提高网站在搜索引擎中的排名和......