css3动画

最新推荐文章于 2024-05-06 19:28:55 发布
最新推荐文章于 2024-05-06 19:28:55 发布
阅读量4.1k 收藏 84
点赞数 17
分类专栏： css 文章标签： css3动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41218152/article/details/81269600
版权

css3动画特效

一、transform（转换动画、直接动画）

1.rotate（旋转）
  • 包含三种状态，x、y、z三轴的变化
  • rotatex、rotatey、rotatez（默认）
  • 旋转（rotate）实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotate</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            margin:15% auto;
            transform: rotate(45deg);
        }
        /*动画写在主样式里，页面加载完成之后就执行*/
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

rotate实例

2.translate（平移）
  • 包含三种状态，x、y、z三轴的变化
  • translatex（默认）、translatey、translatez
  • 平移（translate）实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            transform: translate(100px);
        }
        /*动画写在主样式里，页面加载完成之后就执行*/
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

translate实例

3.skew（变形）
  • 包含两种状态，x和y的变化
  • skewx（默认）、skewy
  • 变形（skew）实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skew</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            margin:15% auto;
            transform: skew(30deg);
        }
        /*动画写在主样式里，页面加载完成之后就执行*/
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

这里写图片描述

4.scale（伸缩比例）
  • scale两个参数时，分别是宽度和高度的比例
  • scale一个参数时，是等比例缩放
  • 伸缩比例（scale）实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            margin:15% auto;
            transform: scale(2);
        }
        /*动画写在主样式里，页面加载完成之后就执行*/
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

scale实例

transform相关补充：
  • transform-orgin:2d，3d转换中心的设置
  • transform-style:preserve-3d;2d转化为3d动画

二、transition（过渡动画）

1.transition相关补充
  • transition-property过渡的属性
  • transition-delay延迟时间
  • transition-duration动画过渡时间
  • transition-timing-function过渡效果的时间曲线：linear（匀速）、ease（慢-快-慢）、ease-in（开始慢）、ease-out（结束慢）、ease-in-out（开始、结束慢）
2.示例
  • 实例1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            transition: all 3s linear;
        }
        /*transition:过渡的属性 过渡时间 延迟时间 效果曲线*/
        .block:hover{
            height:300px;
        }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

在这里插入图片描述

  • 实例2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            transition: all 3s linear;
        }
        .block:hover{
            height:300px;
            width:300px;
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

在这里插入图片描述

三、animation（帧动画）

  • 当在@keyframe创建动画，把它绑定到一个选择器
1.animation相关补充
  • animation-name规定 @keyframes 动画的名称
  • animation-duration执行动画所需时间。默认是0
  • animation-timing-function 规定动画的速度曲线 。默认是ease
  • animation-delay 延迟时间。默认时0
  • animation-iteration-count 规定动画被播放的次数。默认是 1
  • animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 ：normal（正常）、reverse（动画反向播放）、alternate（奇数时正向播放，偶数时反向播放）、alternate-reverse（奇数时反向播放，偶数式正向播放）
2.示例
  • 实例1：弹球动画
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹球动画</title>
    <style>
        .block{
            width:100px;
            height:100px;
            border-radius: 50%;
            background: linear-gradient(180deg,pink,deepskyblue);
            margin: 0 auto;
            animation: tanqiu 2s ease-in infinite alternate;
        }
        /*animation:自定义名称 动画执行时间 速度曲线 执行次数 逆向播放方法*/
        @keyframes tanqiu {
        /*写法1.将动画时间进行时间段划分，分别规定动画效果*/
            10%{
                margin-top:600px;}
            40%{
                margin-top:300px;
            }
            50%{
                margin-top:600px;
            }
            60%{
                margin-top:450px;
            }
            70%{
                margin-top:600px;
            }
            80%{
                margin-top:550px;
            }
            90%{
                margin-top:600px;
            }
        }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

在这里插入图片描述

  • 实例2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animation</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            margin:15% auto;
            animation:fromto 1s linear infinite alternate;
        }
        /*animation:自定义名称 动画执行时间 速度曲线 执行次数 逆向播放方法*/
        @keyframes fromto {
        /*写法2.直接规定开始和结束的状态*/
            from{
                transform: scale(1);}
            to{
                transform:scale(1.3);}
        }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

在这里插入图片描述

杏仁璐
关注
  • 17
    点赞
  • 踩
  • 84
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
发现两个有趣的CSS3动画效果
09-25
在本文中，我们将深入探讨两个有趣的CSS3动画效果：CSS3绘制机器猫和纯CSS3动画。这两个效果展示了CSS3的强大潜力，不仅能够创建出视觉上吸引人的元素，还能够实现动态交互，使得网页设计更加生动有趣。 首先，让...
css3动画集合
04-27
html5 css3 动画 html5 css3 动画 html5 css3 动画 html5 css3 动画
CSS动画
LiHang1234567777的博客
07-21 4745
今天简单了解一下css动画一、css动画是什么？CSS中的动画类似于flash中的逐帧动画，表现细腻并且非常灵活，使用CSS中的动画可以取代许多网页中的动态图像、Flash动画或者JavaScript实现的特殊效果。二、使用步骤1.主要样式指定动画名称动画持续时间动画填充模式forwards;/*forwards把动画停在最后一个*/动画延迟时间animation-delay/*当值为负数时动画已经开始了多长时间*/2.读入数据...
纯css实现那些超炫酷的动画效果
xybhua的博客
12-29 1990
点击进入直播间data() {return {}},}
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 2021
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
12.CSS3常见动画有哪些？实现方式？
kleinBlue.的博客
11-07 610
一、是什么 CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合 css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现方式 transition 实现渐变动画 transition的属..
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 1748
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
30个最优CSS动画案例分享，轻松让网页用户随心而“动”
设计“1+2”，摹客就够了！
08-14 5954
CSS或CSS3动画，包括常见的鼠标悬停动画，网页加载动画，页面切换动画，文本动画以及背景动画等等，能够有效地提升网页趣味性和视觉吸引力。这也是为什么CSS/CSS3动画设计能够迅速蹿升为网页设计一大流行趋势的重要原因。 然而，对于网页设计师和开发工程师而言，创建一款极具趣味性和实用性的CSS/CSS3网页动画并没有想像的那么简单。 究竟如何才能设计出一款既符合网页特色，又能有效提升...
css3动画效果抖动解决方法
09-22
主要介绍了css3动画效果抖动解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css3动画效果
12-13
通过简单的配置，Wow.js可以与Animate.css等CSS动画库配合，轻松添加“哇”效果，当用户滚动页面时，元素会突然出现或者以特定方式进入视线。 5. **CSS3动画在网站中的应用** CSS3动画广泛应用于网页加载指示器、...
CSS3动画下载按钮特效特效代码
03-20
【CSS3动画下载按钮特效】是一种利用现代浏览器支持的CSS3技术实现的创新UI设计，旨在提升用户体验，尤其是在用户触发下载操作时增加视觉反馈。这种特效通过动态改变按钮的外观和行为，使得下载过程变得更加吸引人，...
CSS3花朵绽放动态图
04-29
CSS3花朵绽放动态图，鼠标经过花朵，花朵盛开动画效果，可以自行修改花朵的颜色
深入理解CSS3动画 rotate
weixin_45696837的博客
10-17 957
我这个解释可能会比较全，如果有兴趣深入了解CSS3动画的朋友，往下看，也许会有意想不到的收获。 本来想找张浏览器空间坐标轴的图的。结果没有找到。 那就听我说，你们想象一下。 x轴水平朝右，y轴垂直于x轴垂直向下，z轴垂直于x轴，y轴所成的平面，从屏幕指向我们。 现在脑子里构思一下这么个坐标系。然后继续发挥想象。 ok,我可没偷懒，只不过我的笔记记得会比较好看。 所以我直接征用了。 rotate 这个函数请区分于rotateX,rotateY,rotateZ理解，下面三个都是基于3D的变化，而这个是基于2
CSS3（三）Animation 入门详解
热门推荐
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
css3动画animation属性大全
低调哥的博客
02-28 1万+
animation属性语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;例：animation: myanimation 2s linear 1s infinite forwards;animation 属性是一个简写属性，用于设置动画属性：animati...
CSS动画效果
dayexiaofan的博客
05-28 5万+
继上篇文章之后，先对之前学的内容进行复习一下 01、过渡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height...
css3d动画案例,10个强大的纯CSS3动画案例分享
weixin_26766909的博客
08-03 3050
我们的网页外观主要由CSS控制，编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现，更是可以让网页增添了不少动画元素，让我们的网页变得更加生动有趣，并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例，希望大家喜欢。1、纯CSS3实现烧烤动画这个CSS3动画相当有创意，动画中所有的烧烤元素都是利用CSS3绘制而成，冒出的烟雾也是由CSS3动画实现，相当酷。2、超经典的...
css3 动画属性详解
clmmei_123的博客
08-22 1万+
下面的是我的笔记 1、transition： 平衡过渡  transition ：过渡效果的 CSS 属性的名称  完成过渡效果需要多少秒或毫秒  速度效果的速度曲线  过渡效果何时开始 1）过渡效果的 CSS 属性的名称（一般有）：all、no、 width、height 2）速度效果的速度曲线（动画的速度曲线）： linear 规定以相同速度开始至结束的过渡效果（等于 cubi...
CSS3动画与JavaScript跨域实操指南
本PPT深入探讨了CSS3动画和JavaScript跨域的相关知识，适合软件工程专业的学生和开发人员参考。它由zxh计算机科学与工程学院在2016年8月24日分享，旨在提升对这两个领域的理解。 CSS3动画部分首先介绍了动画的基础...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值