CSS3 -- API学习 (2D、3D动画效果)

最新推荐文章于 2020-08-16 17:46:54 发布
最新推荐文章于 2020-08-16 17:46:54 发布
阅读量272 收藏
点赞数
分类专栏： CSS 文章标签： Web CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39456689/article/details/89010430
版权

一、2D效果

1.translate(xpx,ypx)、translateX(xpx),translateY(ypx)

       右平移xpx，左平移ypx

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background: #FF0000;
                box-shadow: 0px 0px 3px aqua;
            }
            
            #translate1{

                transform: translate(50px,100px);

                -ms-transform: translate(50px,100px); /* IE 9 */

                -webkit-transform: translate(50px,100px); /* Safari and Chrome */
                transform: translate(50px,100px);
            }
        </style>
    </head>
    <body>
        <div id="translate">translate</div>
        <div id="translate1">translate1</div>
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

结果：

2.rotate 旋转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background: #FF0000;
                box-shadow: 0px 0px 3px aqua;
            }
            
            #translate1{
                transform: rotate(30deg);
                -ms-transform: rotate(30deg); /* IE 9 */
                -webkit-transform: rotate(30deg); /* Safari and Chrome */
            }
        </style>
    </head>
    <body>
        <div id="translate">translate</div>
        <div id="translate1">translate1</div>
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

结果：

3.scale(x,y) 

          x > 1,宽度放大x倍；x < 1,宽度缩小x倍；

          y > 1,高度放大x倍;  y <  1,高度缩小y倍；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background: #FF0000;
                box-shadow: 0px 0px 3px aqua;
            }
            
            #translate1{
                -ms-transform:scale(2,3); /* IE 9 */
                -webkit-transform: scale(2,3); /* Safari */
                transform: scale(2,2); /* 标准语法 */
            }
        </style>
    </head>
    <body>
        <div id="translate">translate</div>
        <div id="translate1">translate1</div>
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

结果：

放大                                                    缩小  

4.skew 倾斜

skewX: 相当于y轴绕中心逆时针旋转 n°

skewY: 相当于x轴绕中心顺时针旋转 n°

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background: #FF0000;
                box-shadow: 0px 0px 3px aqua;
            }
            
            #translate1{
                transform: skew(30deg,20deg);
                -ms-transform: skew(30deg,20deg); /* IE 9 */
                -webkit-transform: skew(20deg,20deg); /* Safari and Chrome */
            }
        </style>
    </head>
    <body>
        <div id="translate">translate</div>
        <div id="translate1">translate1</div>
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

结果：

    x=20deg,y=20deg              x=20deg                   y=20deg

5.matrix就不介绍，我没有使用明白，等明白了在介绍

 

总结：

二、3D效果

1.ratateX(n deg)  按照X轴方向旋转

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background: #FF0000;
                box-shadow: 0px 0px 3px aqua;
            }
            
            #translate1{
                transform: rotateX(60deg);
                -webkit-transform: rotateX(60deg); /* Safari 与 Chrome */
            }
        </style>
    </head>
    <body>
        <div id="translate">translate</div>
        <div id="translate1">translate1</div>
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

结果：

60度                                    90度                    180度

2.ratateX(n deg)  按照Y轴方向旋转 这里就不写了，和上面一样

三、过渡 transition

1.transition

transition: 属性   n秒,属性   n秒，属性   n秒，属性   n秒，属性   n秒 ；（属性可以是color  width  height  transform等）

接下来展示一些我做的一个效果

要点：

①hover必要的，放上鼠标之后的效果

②transition   过渡的元素和时间设置

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                color: white;
                width: 50px;
                height: 50px;
                background: chartreuse;
                box-shadow: 0px 0px 3px aqua;
            }
            
            #translate1{
                transition:background 1.5s, 1s, width 1s, height 1s, transform 1s;
                -webkit-transition:background 1.5s,font-size 1s, width 1s, height 1s, -webkit-transform 1s;
            }
            
            #translate1:hover{
                background: #00FFFF;
                font-size: 25px;
                width: 100px;
                height: 100px;
                -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
                transform: rotate(360deg);
            }
        </style>
    </head>
    <body>
        <div id="translate1">
            <span><b>CSS3</b></span>
            <br>
            过渡
        </div>
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

效果：我不会做动态图，有会的小伙伴可以教我一下，坤儿在这先谢过！（中间还有过效果看不到，可以去http://www.runoob.com/css3/css3-transitions.html来看那个图，和我的效果一样）

之前                       之后

2.等待属性，鼠标放在元素上多长事件后，出现过渡效果

transition: 属性   n秒,属性   n秒，属性   n秒，属性   n秒，属性   n秒 ，linear 2s；点击两秒之后，出现过渡效果。

四、动画效果（听炫酷的哦）

要点：

1.@keyframes  定义动画

   @keyframes myfirst{

         0%{};

        100%{};

   }

2.animation：动画名称  n秒 属性  属性  属性  （调用动画）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            div {
                color: white;
                width: 80px;
                height: 50px;
                position: relative;
                background: chartreuse;
                box-shadow: 0px 0px 3px aqua;
                animation:myfirst 5s;     /*调用动画*/
                -webkit-animation:myfirst 5s; /* Safari and Chrome */
            }
            
            @keyframes myfirst{         /*定义动画*/
                0%{
                    top: 0;
                    left: 0;
                    transform: rotate(0deg);
                }
                10%{
                    top: 0;
                    left: 0;
                    background: #00FFFF;
                    transform: rotate(30deg);
                }
                30%{
                    top: 0;
                    left: 0;
                    background: #00FFFF;
                    transform: rotate(10deg);
                }
                50%{
                    top: 0;
                    left: 200px;
                    background: #00FFFF;
                    transform: rotate(0deg);
                }
                70%{
                    background: #00FFFF;
                }
                100%{
                    left: 0px;
                    transform: rotate(720deg);
                }
            }
            
        </style>
    </head>
    <body>
        <div id="translate1">
            <span><b>CSS3</b></span>
            <br>
            动画
        </div>
    </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

结果：效果可以自己看，和这里差不多   http://www.runoob.com/css3/css3-animations.html

***直接加载animation后面的属性***

等待：linear 2s

循环：infinite    重复动画效果

交替：alternate      按原操作，返回

坤少的IT之路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3动画API（animationstart，animationiteration，animationend）
Kyoku0604的博客
11-20 592
在CSS3的animation中，添加了三个API函数，使我们可以更好的控制动画效果。 首先抛出菜鸟给出的解释： CSS 动画播放时，会发生以下三个事件： animationstart - CSS 动画开始后触发 animationiteration - CSS 动画重复播放时触发 animationend - CSS 动画完成后触发 语法 object.addEventListener("...
2D-3D-animate:普通动画
03-09
通过这些文件，开发者构建了一个完整的2D到3D动画系统，用户可以通过网页浏览器直接体验。 学习和理解这些技术，不仅可以提升网页的视觉吸引力，还可以提高用户体验，使用户沉浸在互动内容中。对于IT专业人士来说，...
Css3 API
一只大菜鸟，努力向前跑
02-22 671
Css参考手册点击打开链接
CSS3.0 Api
wd422988145的专栏
08-05 206
Css3.0api
css3新增属性API
weixin_33725515的博客
07-11 92
写在前面：由于CSS5标准还未完全订下来，所以各种内核的浏览器都有自己的标准，为了不使属性混淆，所以各家在各自标准前加了一个前缀。 -moz-  主要是firefox火狐 -webikt-主要是chrome谷歌和Safari -o-主要是用于苹果机上的浏览器如Opera 下面主要从颜色、文本、选择器等方面来总结一下CSS3新增的属性 颜色 css1和css2只能通过以下三种方式...
css3 2D,动画，3D学习
qq_49548374的博客
08-16 600
2D变形：transform 移动translate 1、 transform:translate(x,y):沿X轴Y轴方向移动元素 transform:translateX(x):沿X轴方向移动元素 transform:translateY(y):沿Y轴方向移动元素 2、translate优点：不会影响其他元素的位置 3、translate中的百分比单位是相对于自身元素的translate(50%,50%),如果不写百分比则写像素 4、对行内标签没有效果 旋转rotate 1、格式：transform:r
CSS3 3D立体分页插件.zip
07-11
在网页设计领域，CSS3（层叠样式表第三版）的引入为开发者提供了更丰富的样式控制和动画效果，其中3D转换是其一大亮点。"CSS3 3D立体分页插件"正是利用这一特性，结合jQuery库，实现了一种独特而吸引人的分页解决...
CSS3 3D立方体旋转展示特效
06-24
CSS3的transform属性允许我们对元素进行2D和3D转换，如旋转、缩放、平移等。对于3D立方体效果，主要涉及到rotateX、rotateY和rotateZ这三个3D旋转函数。通过组合这些旋转，我们可以模拟出一个立方体在不同轴上的转动...
Canvas彩色发光3D线条动画特效
07-24
在这个“Canvas彩色发光3D线条动画特效”中，我们将深入探讨如何利用Canvas API来创建复杂的视觉效果。 首先，Canvas API是HTML5的一个重要组成部分，它通过JavaScript提供了一种动态、实时的图形绘制能力，无需...
Canvas绘制3D烟花动画特效
06-24
通过分析和理解这些代码，我们可以学习如何使用Canvas API创建复杂的动画效果，以及如何通过JavaScript编程实现3D视觉错觉。这个烟花动画特效不仅是娱乐性的，也是学习和提升前端开发技能的好素材。
css3 api帮助文档
07-08
css3 api帮助文档，最全的css3文档，chm格式，下载后，解除锁定，即可使用
CSS3 API中文版帮助文档CHM
07-22
CSS3 API中文版帮助文档CHM （API离线手册）希望能够帮到你！
html5和css3 API
05-31
HTML5 并不仅仅只是html标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将web作为应用开发平台的HTML语言。 HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可以开发网页版游戏。
html5，css3的API文档
10-12
1:CSS3.0(史上最全版)2:图解css3：核心技术与案例实战3:响应式Web设计：HTML5和CSS3实战 另外赠送：无懈可击的web设计
css3.0+html5中文API
01-30
css3.0+html5中文API,记得右键更改属性下面的配置。内有css跟html5
CSS3 -- API学习 (文字)
坤少IT之路
04-04 191
以前文字是需要用户界面上下载好了，浏览器才能显示那种字体。现在CSS3解决这种问题，只要开发者定义好这种字体，用户不管在哪里都能显示这种字体样式。 font-family:自定义字体名称 src:字体位置 font-weight:字体粗细 @font-face { font-family: myFirstFont; src: url(sansation_b...
CSS3 -- API学习 (背景)
坤少IT之路
04-03 175
background: ①background: red; （颜色或者url） ②background: red top left no-repeat; 相当于background、position、repeat加一起一样 background-position: 左上(left top) 右上(right top) 右下(right bottom) 左下(left b...
CSS3 -- API学习 (文本效果)
坤少IT之路
04-03 187
text-shadow 文本阴影 text-overflow 文本溢出 word-wrap 文本换行 word-break 文本分词 1.text-shadow 与box-shadow不同的是，没有盒子边框宽度设置 <!DOCTYPE html> <html> <head> <meta...
CSS动画VS. Web动画API
GBin1中文互联
07-17 173
  众所周知，JavaScript有一个原生动画API，叫做Web Animations API。在接下来的文章中，我们将简称为WAAPI。   在本文中，我们将从各个方面来比较WAPPI和CSS中的动画。各位看官可自行判断其中哪个更好，哪个有所欠缺。   WAAPI的基础知识   如果你曾经使用jQuery  .animate()，WAAPI的基本语法应该看起来很熟悉。  ...
HTML5+CSS3+JS前端开发学习笔记
CSS3的布局技巧，如浮动、行内块的运用、三角形制作、sprites技术和滤镜，以及过渡、2D和3D转换、动画等，为实现动态效果提供了理论支持。 JavaScript基础部分涵盖了运算符、类型转换、对象、JSON、函数、原型、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值