关于网页前端的 transform动画

最新推荐文章于 2024-05-17 10:26:44 发布
最新推荐文章于 2024-05-17 10:26:44 发布
阅读量302 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41210350/article/details/81161876
版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="img/mynote.ico"/>
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <title>transform动画</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 300px;
                margin: 0 auto;
                position: relative;
                top: 100px;
                /*给予元素3d属性*/
                transform-style: preserve-3d;
                /*transform-origin 属性用来设置 transform 变换的基点位置。默认情况下，基点位置为元素的中心点*/
                transform-origin: 0 0 0;
                /*animation 属性是一个简写属性，用于设置六个动画属性 
    animation-name 动画名字
    animation-duration 动画持续时间
    animation-timing-function 动画的速度曲线(匀速为linear)
    animation-delay 动画开始之前的延迟
    animation-iteration-count 动画应该播放的次数(无数次为infinite)
    animation-direction 是否应该轮流反向播放动画(反向为alternate)*/
                animation: xuanZhuan 10s linear 2s infinite alternate;
            }
            
            #div1>img {
                position: absolute;
                top: 0;
            }
            
            #img1 {
                /*沿Z轴平移*/
                transform: translateZ(150px);
            }
            
            #img2 {
                transform: translateZ(-150px);
            }
            
            #img3 {
                /*沿X轴旋转*/
                transform: rotateX(90deg) translateZ(150px);
            }
            
            #img4 {
                transform: rotateX(-90deg) translateZ(150px);
            }
            
            #img5 {
                transform: rotateY(90deg) translateZ(150px);
            }
            
            #img6 {
                transform: rotateY(-90deg) translateZ(150px);
            }
            /*声明一个名字为 xuanzhuan 的动画*/
            
            @keyframes xuanZhuan {
                0% {
                    /*scale 缩放效果*/
                    transform: rotateY(0) rotateX(45deg) rotateZ(45deg) scale(0.5, 0.5) scaleZ(0.5);
                }
                50% {
                    transform: rotateY(180deg) rotateX(45deg) rotateZ(45deg) scale(2, 2) scaleZ(2);
                }
                100% {
                    transform: rotateY(360deg) rotateX(45deg) rotateZ(45deg) scale(0.5, 0.5) scaleZ(0.5);
                }
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <img src="img/1.jpg" id="img1" />
            <img src="img/2.jpg" id="img2" />
            <img src="img/3.jpg" id="img3" />
            <img src="img/4.jpg" id="img4" />
            <img src="img/5.jpg" id="img5" />
            <img src="img/6.jpg" id="img6" />
        </div>
    </body>

</html>

小酉卒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html中的transform属性,CSS3中transform属性
weixin_32322859的博客
06-04 3415
8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？一.Transform描述：ransform是变形,改变的意思。在CSS3中transform主要包括以下几种：旋转rotate，扭曲skew,缩放scale和移动translate以及矩阵变形matrix。transform的作用也是改变，让元素倾斜，旋转，缩放，位移。二.Transform语法：transform: ...
CSS进阶之形变与动画 (一)：transform、垂直居中总结、transition动画、animation动画、vertical-align
Good Good Study,Day Day Up!
05-30 8018
水平居中的方案行内级元素：设置父元素的 text-align:center块级元素：设置当前块级元素(要有宽度) margin:0 auto绝对定位：元素有宽度的情况下，设置left0、right0、margin:0 auto；flex布局：通过设置justify-content: center;垂直居中的方案绝对定位： 元素要有高度的情况下，设置top0、bottom0、margin:auto 0;flex布局 通过设置align-
HTML5响应式网页设计——页面特效——平移、缩放、旋转、倾斜
m0_47274301的博客
11-20 1258
变换属性： 属性 说明 transform 指定应用的变换功能 transform-origin 指定变换的起点 transform属性的值： 属性 说明 transform（<长度值或百分数值>） transformX（<长度值或百分数值>） transformY（<长度值或百分数值>） scale(<数值>) scaleX(<数值> scaleY(<数值>
前端小白一文掌握 CSS3 2D转换transform
weixin_40348267的博客
05-12 425
CSS3 中的转化 transform 属性是 CSS 内容中很重要的一个知识点，用于对元素进行变换，包括平移、旋转、缩放、倾斜等。这些变换可以在不改变元素文档流位置的情况下改变元素的外观和位置，让网页能显示更加酷炫的效果。以上就是 CSS3 中关于转换 transform2D 的知识点，上面的示例，初学者可以粘贴到 HTML 文件中并在浏览器中运行，以查看不同的转换效果。平移指移动元素的位置，可以沿着水平（X轴）和垂直（Y轴）方向进行。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
【前端样式】css/js常用动画（一）移动动画效果（伪类+transition+ transform+ animation）
敲敲的博客
04-06 6194
文章目录一、常用概念区分二、移动动画实现 一、常用概念区分 transform（变形）——属性定义元素的形状/位置变化，它的属性值有以下五个： 移动translate 缩放scale 旋转rotate 扭曲skew 矩阵变形matrix元素 translate（移动）——transform的一个属性，定义元素的移动效果 translate(x,y)两坐标同时移动，可以使用百分比 tr...
HTML+css3 前端加载动画loading加载动画，32款网页loading加载动画
02-28
在网页设计领域，前端加载动画（通常称为Loading动画）是用户等待页面完全加载时的一种视觉反馈，它能够提升用户体验，使用户在等待过程中不会感到枯燥无趣。HTML和CSS3作为现代网页开发的基础，提供了丰富的功能来...
H5 微场景动画网页制作
09-14
2. CSS3动画：CSS3不仅增强了样式表的功能，还引入了动画和过渡效果，如变换（transform）、过渡（transition）和关键帧动画（keyframe animation）。这些特性使得网页元素可以平滑地改变状态，实现丰富的动态效果。...
实现前端简单动态圣诞树动画
12-27
在本文中，我们将深入探讨如何使用前端技术，包括HTML、CSS和JavaScript，来实现一个简单的动态圣诞树动画。这个动画不仅包含视觉上的效果，还配有详细的注释，以帮助开发者理解每一部分的功能。 首先，HTML...
前端自定义动画.zip
08-09
在前端开发中，自定义动画是一项重要的技能，它能让网页和应用变得更加生动有趣，吸引用户的注意力。本资源“前端自定义动画.zip”可能包含了一系列关于如何在前端实现自定义动画的示例、代码片段和教程。 自定义...
前端 动效，旋转的svg 动画效果
03-15
SVG（Scalable Vector Graphics）作为一种矢量图形格式，因其轻量级、可缩放性和丰富的动画能力，常被用于创建高质量的网页动效。本教程将深入探讨如何在HTML页面中实现一个旋转的SVG动画效果。 首先，我们需要理解...
html中的transform属性,css3的transform属性详解
weixin_33217202的博客
06-04 9135
transform变形属性(主要讨论2D)css 3的transform属性可以修改css中可视化模型的坐标空间，元素通过transform属性进行移动(translate)、旋转(rotate)、缩放(scale)以及倾斜(skew)注意：规范中有规定——如果元素的transform值不为none，则该元素会生成包含块的创建和层叠上下文包含块的创建和层叠上下文会影响子元素的一些属性(这里我只是简...
21、前端开发：CSS知识总结——transform变形属性
不迁怒，不贰过。小知识，大智慧。
08-28 1170
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。可以改变元素的形状或位置，不会影响到页面的布局。
CSS3中的变形处理——transform功能，深入解析前端核心组件和应用框架
04-10 580
（1）只使用一个参数，省略另一个参数这种情况下视为只在水平方向上移动，垂直方向上不移动。在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。transform-origin属性使用该属性，可以改变变形的基准点。//把基准点修改为元素的左下角（1）指定属性值基准点在元素水平方向上的位置：left、center、right基准点在元素垂直方向上的位置：top、center、bottom（1）旋转。
Css属性transform详解（变形、旋转、缩放）
宝子的博客
05-17 1312
1.变形就是指通过css来改变元素的形状或位置 2.变形不会影响到页面的布局(不会脱离文档流) 3.平移元素，百分比是相对于自身计算的1.通过旋转可以使用元素沿着x y 或 z旋转指定的角度(transform)
CSS3-使用transform+animation实现圆弧渐变旋转动画，详细教程+源代码
wzy_PROTEIN的博客
01-03 2575
实现渐变的圆弧旋转动画，附上详细代码与注释
13.（初级）CSS变形transform、过度transition、动画animation注意点及如何让动画更流畅方法
MJ的博客
02-07 5240
一、变形transform 1、倾斜skew() skew(水平倾角,垂直倾角) 例如： skew(20deg,30deg)   2、移动变形原点transform-origin transform-origin:left/right/px/%  top/bottom/px/%; 例如： transform-origin:left top; 相当于 transform-ori
前端 · 深入理解 transform 函数的计算原理 ①
星空闪耀
11-16 981
前端也需要懂一点点数学
变形-transform　迅速变化 过渡-transition 缓慢变化 动画-animation 关键帧动画 --Css3笔记
qq_39579242的博客
07-25 8015
1、变形-transform　迅速变化 2、过渡-transition 缓慢变化 3、动画-animation  关键帧动画 1、转换的原点    默认情况下，原点是在当前物体的中心点上    修改原点：         属性：transform-origin     值：1、x坐标  y坐标            当前物体的左上点为 x:0 y:0         2、宽度百分比 高度百分比 ...
web前端动漫网页制作代码
最新发布
06-21
Web前端动画网页制作通常使用HTML、CSS和JavaScript（可能还包括一些动画库如jQuery或更现代的库如Anime.js、GreenSock等）来实现。以下是简单的步骤和代码示例： 1. **HTML结构**: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styles.css"> <title>动漫网页</title> </head> <body> <div class="anime-container"> <img src="character.gif" alt="动漫角色"> </div> <script src="script.js"></script> </body> </html> ``` 这里我们创建了一个包含图片的容器，并引入了CSS样式和JavaScript脚本。 2. **CSS动画** (styles.css): ```css .anime-container { position: relative; overflow: hidden; } .anime-container img { animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } ``` 这段CSS定义了一个名为`bounce`的动画，使图片上下弹跳。 3. **JavaScript 动画** (script.js, 使用jQuery为例): ```javascript $(document).ready(function() { $('.anime-container').hover( function() { $(this).find('img').stop().animate({ rotate: '360deg' }, 1000); }, function() { $(this).find('img').stop().animate({ rotate: '0deg' }, 1000); } ); }); ``` 当鼠标悬停在容器上时，图片会旋转360度，移开时恢复原状。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值