css3-渐变，动画过度，2d基础

最新推荐文章于 2023-07-22 18:44:43 发布
最新推荐文章于 2023-07-22 18:44:43 发布
阅读量3k 收藏 1
点赞数
分类专栏： html5 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29104999/article/details/53914525
版权

1.CSS3 渐变的语法及应用

##线性渐变，从左到右，或者从上倒下，线性变化

linear-gradient:值1,值2 [值3],值4

     值1:
            top,to bottom,180deg 表示从上到下

            bottom,to top,0deg 表示从下到上

            left,to right,90deg 表示从左到右

            right,to left,270deg 表示从右到左

            45deg,to top right 从左上到右上

            135deg,to top right 从左上到右上

            等等
    值2：  起始颜色
    值3：  可以设置设置颜色的过度的距离，如50%，就是0到50%
    值4：  终止颜色
    注：起始位置和终止位置可设置多个颜色；

##径向渐变，从内而外扩散（圆）

radial-gradient:值1,值2 [值3],值4

    值1:
            ellipse:椭圆效果，当元素宽高一致时为正圆
            circle:正圆

    值2：  起始颜色
    值3：  可以设置设置颜色的过度的距离，如50%，就是0到50%
    值4：  终止颜色
    注：起始位置和终止位置可设置多个颜色；

##重复渐变，按照规律一层一层循环

repeating-radial-gradient值1,值2 [值3],值4

    值1:
            ellipse:椭圆效果，当元素宽高一致时为正圆
            circle:正圆

    值2：  起始颜色
    值3：  可以设置设置颜色的过度的距离，如50%，就是0到50%
    值4：  终止颜色
    注：起始位置和终止位置可设置多个颜色；

repeating-linear-gradient值1,值2 [值3],值4

    值1:
            ellipse:椭圆效果，当元素宽高一致时为正圆
            circle:正圆

    值2：  起始颜色
    值3：  可以设置设置颜色的过度的距离，如50%，就是0到50%
    值4：  终止颜色
    注：起始位置和终止位置可设置多个颜色；

2.CSS3 过渡的用法

transition:值1,值2,值3,值4
    值1:
            transition-property:all 或者其他属性值

    值2：   transition-duration:设置时间 如：2s
    值3：   transition-timing-function:设置速度
                                    linear 匀速   
                                    ease 慢快慢
                                    ease-in 慢开始 
                                    ease-out 慢结束
                                    ease-in-out  慢开始慢结束
                                    cubic-bezier 自定义贝兹尔曲线

    值4：  transition-delay:设置延时 如2s

3.CSS3 2D 转换的应用

 transform属性的属性值的运用

    translate(x,y):设置位移量
        x:横向位移
        y:纵向位移

    scale(倍数):设置放大和缩小

    rotate(角度):设置顺时针旋转的角度

    skew(x角度,y角度):设置倾斜角度
        当角度为90deg时，消失

    matrix()合体写法
    matrix() 方法把所有 2D 转换方法组合在一起。
    matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
    缩放X, tan(X度), tan(Y度),缩放Y,位置X,位置Y

实例

##渐变 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3元素学习</title>
    <style type="text/css">
        /*线性渐变*/
        div{width: 200px;height: 100px;margin-bottom: 50px;}

        div:nth-child(1){background: linear-gradient(to right,red,blue);}
        div:nth-child(2){background: radial-gradient(circle,red,blue);}
        div:nth-child(3){background: radial-gradient(ellipse,red,blue);}
        div:nth-child(4){background: repeating-radial-gradient(circle,red,blue);height: 200px;}
        div:nth-child(5){background: repeating-linear-gradient(to right,red,blue);}
        div:nth-child(6){background: repeating-radial-gradient(circle,red 20%,blue 40%,green 40%);}


    </style>
</head>
<body>
    <div>线性渐变</div>
    <div>镜像渐变--circle</div>
    <div>镜像渐变--ellipse</div>
    <div>重复渐变--repeating-radial-gradient</div>
    <div>重复渐变--repeating-linear-gradient</div>
    <div>重复渐变,多个颜色以及设置范围--repeating-radial-gradient</div>
</body>
</html>
##动画过度 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动画过度</title>
</head>
<body>
    <style type="text/css">
            div{width: 600px;height: 600px;background: #99f;position: relative;}
            div p{
                width: 20px;height: 20px;border-radius: 10px;background: #f99;position: absolute;left: 0;top:0;
                /*transition:2s ease all 2s;*/ opacity: 1;
                transition-property:all;
                transition-duration:2s;
                transition-delay:2s;
                transition-timing-function:ease-in-out;


            }
            div:hover p{left: 200px;top:500px;opacity: 0.2;}
    </style>
</body>
<div>
    <p></p>
</div>
</html>

2d元素转换

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动画过度</title>
</head>
<body>
    <style type="text/css">
            div{width: 600px;height: 600px;background: #99f;position: relative;}
            div p{
                width: 100px;height: 100px;background: #00f;
                /*transform: translate(100px,200px) scale(2) rotate(60deg) skew(20deg) ;*/
                transform:matrix(1,2,2,1,100,200);

            }

    </style>
</body>
<div>
    <p></p>
</div>
</html>
aymfx
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3按钮渐变动画特效
07-24
css3按钮渐变动画特效是一款鼠标悬停按钮炫彩动画，鼠标滑过有流光渐变按钮效果。
css渐变 动画
weixin_73807171的博客
08-08 607
css3过渡是元素从一种样式逐渐改变为另一种的效果。开始位置：渐变开始的位置，属性值可以为百分比/长度/left、right、top、bottom（可组合使用）（像素/百分比 X轴：left/right/center Y轴：top/bottom/center）skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。属性：radial-gradinet()(形状 发散方向，起始颜色，终止颜色)matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
css动画和渐变
Machoul的博客
06-28 3967
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果,渐变是图片，需要通过来设置:线性渐变，颜色沿着一条直线发生变化 线性渐变的开头，我们可以指定一个渐变的方向 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况 可以平铺的线性渐变 径向渐变(放射性的效果) css动画 过渡 通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提升用户的体验:指定要执行过渡的属性 :指定过渡效果的持续时间 :
CSS 实现卡片边框渐变动画
苏苏就是小苏苏的博客
12-05 1701
CSS @property属性实现卡片边框渐变动画，速速来Get吧~ 🥇文末分享源代码。记得点赞+关注+收藏！
css-背景渐变色动画
ZhanShenvsDiHuang的博客
04-26 2717
css-背景渐变色动画
CSS渐变-动画
cggzsl的博客
07-21 152
可以只写时间，其他两个值默认填充 all 和 linear。第一个值是属性 一般是all，也可以是其他属性名称。第二个值是时间 单位是时间单位 通常是s。第三个值是 过渡速度 linear 匀速。top left bottom right center 两两组合使用。缩放 默认值是1 小于1就是缩小，大于1就是放大。平移 translate。第一个值是 横向偏移量。第二个值是 纵向偏移量。
CSS渐变动画效果
weixin_63449105的博客
07-22 250
开始位置：渐变开始的位置，属性值可以为百分比，长度，left/right/top/bottom（可组合使用）与to搭配。发散方向：center，left，right，top，bottom（与at搭配）ease-in-out：慢速开始及结束。matrix：有六个参数，包含旋转，缩放，移动（平移），倾斜。-duration：时间，单位时时间单位，一般为秒（s)linear-gradient（开始位置/角度，起始颜色，终止颜色）radial-gradient（形状，发散方向，起始颜色，终止颜色）
css实现颜色渐变小动画
有问题可关注公众号：前端研究院 后台输入问题回复
05-24 489
【代码】css实现颜色渐变小动画。
CSS 渐变背景动画的实现
军火库
03-15 2845
如果你用过SASS/LESS，你应该写过一些全局的变量。这东西不是新概念，在其他语言中早就有的！而对于CSS来说，自定义变量不亚于一场革命！声明一个自定义属性，属性名需要以（--）开始，属性值则可以是任何有效的 CSS 值。通过var(--*)来使用但是这这种方式也有缺点，就是我们只能定义变量的初始值，没有办法指定变量的类型。于是CSS又增加了@property规则之后，我们还可以像下述代码这样去定义个 CSS 自定义属性,同样通过var()使用syntax：=表示属性的类型。
【CSS3】渐变、过渡和动画用法
qq_45677671的博客
12-30 2393
css 渐变、过渡、动画属性解析及使用方法和案例
1.08 css3-动画
最新发布
10-07
1.08 css3-动画
CSS3 background-image颜色渐变的实现代码
09-22
主要介绍了CSS3 background-image颜色渐变的实现代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
利用css3-animation实现逐帧动画效果
09-24
主要介绍了利用css3-animation实现逐帧动画效果的相关资料，感兴趣的小伙伴们可以参考一下
CSS3点击按钮实现背景渐变动画效果
12-13
效果图如下： 实例代码如下： 复制代码代码如下:<...css3给按钮添加背景渐变动画</title><!–@author：SM @email:[email protected]@desc： css3给按钮添加背景渐变动画–><style type=”t
html--高度塌陷（css）几种小技巧
热门推荐
爱飞翔
12-07 1万+
1.在高度塌陷的父div里面加一个div：<div id="a"> <div id="a1"></div> <div id="a2"></div> <div style="clear: both;"></div>//加一个标签，清除浮动 </div>优点：适合初学者，兼容性 强。 缺点：代码不简练，不利于优化。2.overf
html--三栏布局（两边固定宽度，中间自适应）
爱飞翔
12-06 2966
一、绝对定位法：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。 #left{ width: 180px; height: 100%; background: blue; position: absolute; left:
解决两个并列的input在一块存在8像素的空隙的情况
爱飞翔
12-17 1254
不换行解决两个并列的input在一块存在8像素的空隙的情况<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>三角形</title> <style type="text/css"> </style> </head> <body> <!-- 中间不要留空隙 --> <input id="t
require.js初次使用
爱飞翔
03-06 640
问题：如何解决前端js出现的文件依赖和命名空间问题 可以通过命名空间和采用模块化的方式解决，今天学的require.js可以同时解决这两个问题. requirejs能带来什么好处1.异步加载，防止js加载阻塞页面渲染 2.不必引用很多js文件 3.以上两个问题可以解决 掌握模块化的思想模块化思想就是指将页面根据内容的关联性分解成不同的且相互独立的模块进行开发，每个模块之间没有必然的联系，互不影
css3渐变背景颜色动画
07-14
### 回答1： CSS3渐变背景颜色动画是通过使用CSS3的transition和animation属性来实现的。首先，我们可以使用linear-gradient函数定义一个渐变背景颜色： div { background: linear-gradient(to right, red, blue); } 这将创建一个从左到右的红色到蓝色的渐变背景。然后，我们可以使用transition属性来定义过渡效果： div { transition: background 0.5s ease-in-out; } 这将使背景颜色的变化在0.5秒内平滑过渡，并且动画效果的速度采用了"ease-in-out"的缓动函数，使过渡更加自然。接下来，我们可以使用animation属性来创建一个动画： @keyframes colorChange { 0% { background: red; } 50% { background: blue; } 100% { background: red; } } div { animation: colorChange 3s infinite; } 这里我们定义了一个名为colorChange的动画，它会在3秒钟内循环播放，并且背景颜色会在动画的不同阶段中从红色到蓝色再返回红色。最后，我们将动画应用到div元素上。通过这些CSS属性和函数的组合，我们就可以实现一个具有渐变背景颜色动画的效果。 ### 回答2： CSS3渐变背景颜色动画可以通过使用@keyframes和animation属性来实现。首先，我们需要定义一个@keyframes规则，用于指定渐变动画的关键帧。 在@keyframes规则中，我们可以通过调整背景颜色的透明度或色值来创建渐变效果。例如，我们可以从一个颜色过渡到另一个颜色，或者让背景颜色从透明变为不透明。通过定义多个关键帧，我们可以创造出更加复杂的渐变效果。 接下来，我们将@keyframes规则应用到要应用渐变动画的元素上，通过animation属性设置动画的名称、时间和动画类型等属性。 例如，下面是一个使用CSS3渐变背景颜色动画的示例代码： ``` <style> @keyframes gradientAnimation { 0% { background-color: red; } 50% { background-color: yellow; } 100% { background-color: blue; } } .box { width: 200px; height: 200px; animation: gradientAnimation 5s linear infinite; } </style> <div class="box"></div> ``` 在上面的代码中，我们定义了一个名为gradientAnimation的@keyframes规则，它将背景颜色从红色过渡到黄色，再过渡到蓝色。然后，我们在class为box的元素上应用了这个动画，并设置动画的持续时间为5秒，动画类型为线性动画，且无限循环播放。 通过上述代码，我们可以在浏览器中看到一个长方形元素，它的背景颜色会不断从红色过渡到黄色，再过渡到蓝色，然后重新开始。这就是一个简单的CSS3渐变背景颜色动画的实现。 ### 回答3： CSS3渐变背景颜色动画是通过使用CSS3的渐变属性和动画属性来实现的。首先，我们可以使用渐变属性来定义一个渐变背景，例如使用linear-gradient（线性渐变）或radial-gradient（径向渐变）函数来定义渐变方向和颜色范围。 然后，我们可以使用动画属性来创建一个背景颜色的动画效果。我们可以定义动画的持续时间、动画类型和动画延迟等属性。通过这些属性的组合，我们可以创建出各种不同的渐变背景颜色动画效果。 例如，我们可以创建一个线性渐变背景颜色动画，让背景颜色从红色渐变到蓝色。可以使用以下CSS代码实现： ```css div { width: 200px; height: 200px; background: linear-gradient(to right, red, blue); animation: bg-animation 3s linear infinite; } @keyframes bg-animation { 0% { background: linear-gradient(to right, red, blue); } 50% { background: linear-gradient(to right, blue, green); } 100% { background: linear-gradient(to right, green, red); } } ``` 在上面的代码中，我们创建了一个div元素，并且设置了它的宽度和高度。然后，我们使用linear-gradient函数来定义一个红色到蓝色的线性渐变作为背景颜色。 接下来，我们使用@keyframes规则创建了一个名为bg-animation的动画。在动画的关键帧中，我们定义了背景颜色在0%、50%和100%时的值，分别是红色到蓝色、蓝色到绿色和绿色到红色的线性渐变。 最后，我们把动画应用到了div元素上，设置了动画的持续时间为3秒，动画类型为线性（linear），并且让动画无限循环播放。 通过这种方式，我们就可以创建出一个使用CSS3渐变背景颜色动画的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值