CSS文字动画

2021-08-05 00:54:39

html {

height:100%;

}

body {

height:100%;

display:flex;

justify-content:center;

align-items:center;

background:rgb(196,14,14);

margin:0 auto;

}

main {

width:400px;

height:230px;

border:10px solid white;

position:relative;

cursor:pointer;

}

main div {

width:100%;

height:100%;

position:absolute;

font-size:100px;

text-align:center;

line-height:230px;

font-family:黑体;

font-weight:bold;

}

.first {

color:white;

}

.second {

width:0px;

position:absolute;

overflow:hidden;

background:white;

transition:4s;

animation:one 5s ease-in-out 1;

animation-fill-mode:both;

}

.seconds {

color:rgb(196,14,14);

width:400px;

}

@keyframes one {

0% {

width:0px;

}

25% {

width:50px;

}

50% {

width:150px;

}

100% {

width:400px;

}

}.three {

width:0px;

background:rgb(224,9,9);

overflow:hidden;

right:0;

animation:two 5s linear 1;

animation-fill-mode:both;

animation-delay:5s;

}

@keyframes two {

0% {

width:0px;

}

100% {

width:200px;

}

}.threes {

width:400px;

color:white;

position:absolute;

animation:twos 5s linear 1;

animation-fill-mode:both;

animation-delay:5s;

}

@keyframes twos {

0% {

left:-400px;

}

100% {

left:-200px;

}

}

更多相关内容
CSS 动画
2020-12-13 21:39:28

CSS 动画定义和用法一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。浏览器支持表格中的数字表示支持该...

收起
animate.css在vue项目中的使用教程
2020-12-09 17:00:43

在vue项目中使用动画其实有多种方式，可以使用vue中的过渡transition，可以使用animate动画与transition配合使用，也可以单独使用animate动画库（详情可见vue官网-过渡：过渡），下面我们开始介绍在vue中单独使用...

收起
CSS3鼠标悬停图标导航动画特效.zip
2019-07-11 10:44:03

代码简介：CSS3鼠标悬停图标导航动画特效是一款简洁清爽风格鼠标悬停动画切换特效。

收起
CSS3 Animation文字动画特效.zip
2019-07-11 10:34:24

代码简介：CSS3 Animation文字动画特效里面包含7款不同效果的文字动画特效。

收起
CSS3动画特效
2018-11-05 19:26:54

各种CSS3动画特效，可用于各种弹框弹出特效，div框悬停动画等

收起
利用CSS3实现平移动画效果示例代码
2021-01-19 20:52:36

一、平移动画有关的CSS3属性以及相关的属性描述　1、transition-property：是用来指定当元素其中一个属性改变时执行transition效果（例如：长度，宽度，颜色等）。　2、transition-duration：是用来指定元素转换...

收起
通过css动画实现一个表格滚动轮播效果
2020-12-28 19:09:40

css动画的一个应用，与此前的css走马灯同样的内容。只是一次不同的应用，具体实现如下序号姓名年龄性别专业 </ul>

收起
CSS3动画特效_css3打开信封的留言表单效果
2021-05-18 07:05:21

摘要:脚本资源,CSS特效,CSS3,折页效果　CSS3特效动画，实现css3打开折叠的信封，抽出一个可以发表留言的表单，并响应鼠标动作，漂亮极了，感觉作者很有创意哦，国内朋友咋没有人能想到呢？本特效下载自国外网站，...

收起
纯CSS3悬停图标旋转导航动画代码.zip
2019-07-04 00:07:22

纯CSS3悬停图标旋转导航动画代码是一款鼠标移到图标上动画旋转显示导航菜单。

收起
6种炫酷的CSS3按钮边框动画特效
2019-12-13 06:35:35

这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候，按钮的边框会以不同的方式进行各种动画，效果非常的炫酷。

收起
css3动画集合
2018-04-27 16:28:33

html5 css3 动画 html5 css3 动画 html5 css3 动画 html5 css3 动画

收起
几款酷炫的css3文字动画特效
2020-06-11 11:18:09

几款酷炫的css3文字动画特效，是splitting基于css3动画库制作出来的，有文字变形、文字抖动等动画效果，具体看演示页面。

收起
html5 css3实例教程一款html5和css3实现的小机器人走路动画
2020-09-28 01:17:21

今天要给大家带来一款html5和css3实现的小机器人走路动画。该实例的人物用html5绘画的，动画效果是html5和css3实现的。需要的朋友可以参考下

收起

css 动画

千次阅读 多人点赞 2018-08-10 16:11:39

css动画 首先要明白动画是一帧一帧的，由多个帧拼起来的动画 @keyframes 此为动画样式中的关键帧，用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分其指示了一个过程到另一个过程的...

css动画
首先要明白动画是一帧一帧的，由多个帧拼起来的动画

@keyframes

此为动画样式中的关键帧，用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分
其指示了一个过程到另一个过程的过程
关键帧还具有名字，在应用的时候通过名字将其绑定。

如果关键帧重复定义，则根据最后一次定义为准

关键帧中的important会被略过

举个栗子

定义一个关键帧

@keyframes myFrames {
    form {
        background:#a7e5c6;
        width:100px;
    }

    to {
        width:90%;
        background:#c6c2a3;
    }
}

样式如下
此处输入图片的描述

这样就完成一次动画操作

分开定义

也可以进行分开定义
按照百分号进行定义，结果如下
关键帧如下

@keyframes myFrames {
    0% {
        width:200px;
        background:#827e64;
    }

    20% {
        width:400px;
        background:#86bece;
    }

    50% {
        height:600px;
        background:#af92aa;
    }

    90% {
        width:300px;
        height:400px;
        background:#698771;
    }
}

效果如下
此处输入图片的描述

animation

animation 同样是一个简写属性，相比较js写动画来说，css动画已经灰常简单了。

大概看了一点纯js动画，js动画核心在于对css样式的更改，外加一个重复时间对css不断的累加得到动画效果

下面依次说明

animation-name

和关键帧进行绑定
必须和关键帧的名字相同（废话）

animation-duration

指定一个动画的周期

负值的动画无效

举一个栗子

div {
    width:300px;
    height:400px;
    background:#698771;
    margin:auto;
    animation-name: myFrames;
    animation-duration:.9s;
}

/*关键帧*/
@keyframes myFrames {
    0% {
        width:200px;
        background:#827e64;
    }

    20% {
        width:400px;
        background:#86bece;
    }

    50% {
        height:600px;
        background:#af92aa;
    }

    90% {
        width:300px;
        height:400px;
        background:#698771;
    }
}

动画效果如下
此处输入图片的描述

animation-timing-function

定义一个动画的过程，类似于过渡的函数
同样的，有贝塞尔曲线等等
不在阐述

DevTools

谷歌浏览器的调试工具具有该方法，可以直接使用调试工具绘制贝塞尔曲线
此处输入图片的描述

animation-delay

定义动画的延迟
此处输入图片的描述
css如下

* {
    margin:0;
    padding:0;
}
body {
    position:relative;
}
div {
    width:400px;
    height:400px;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
    border-radius:1000px;
    animation-name: myFrames;
    animation-duration:5s;
    animation-timing-function:cubic-bezier(0.785, 0.135, 0.15, 0.86);
    animation-delay:.9s;
}
div div {
    width:40px;
    height:40px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#e8e3da;
    animation-name:myCenter;
}

/*关键帧*/
@keyframes myFrames {
    from {
        left:0;
    }

    to {
        left:70%;
    }
}

@keyframes myCenter {
    from {
        left:0;
    }

    to {
        left:0;
    }
}

html如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css" type="text/css">
    <title>css动画</title>
</head>
<body>
    <div>
        <div></div>
    </div>
</body>
</html>
<script src="./index.js"></script>

动画延迟了0.9秒

animation-iteration-count

定义动画的迭代次数infinite 为永远重复
数值为number

举栗子

animation-iteration-count:3;

动画重复播放3次。

animation-iteration-count:infinite;

动画永远重复播放

animation-direction

定义是否向前，向后，是否交替来回

如果想要重复的多次播放，必须有animation-iteration-count的值为infinity否则不会出现重复播放

normal

为一个每次重复重新的位置开始播放（每次都将重置为新状态，开始执行）
此处输入图片的描述

reverse

倒序播放
此处输入图片的描述

alternate

奇数正向播放
偶数倒序播放
即来回
此处输入图片的描述

alternate-reverse

奇数倒序播放
偶数正向播放
即倒来回
此处输入图片的描述

ps 动画具有继承的属性

animation-fill-mode

forwards

将会保留最后一个关键帧，让其停留。
此处输入图片的描述
css

    /*animation-iteration-count:infinite;*/
    animation-direction:alternate;
    animation-fill-mode:forwards;

backwards

将会应用第一个动画值
此处输入图片的描述
和none的区别在于none使用默认的css样式，backwards将会使用动画的第一帧

    /*animation-iteration-count:infinite;*/
    animation-direction:alternate;
    animation-fill-mode:backwards;

ps 加上注释的原因是因为如果不加将会重复播放。

both

将会遵守倒序还是正序的停留

正序

    /*animation-iteration-count:infinite;*/
    animation-direction:normal;
    animation-fill-mode:both;

此处输入图片的描述

倒序

此处输入图片的描述

    /*animation-iteration-count:infinite;*/
    animation-direction:reverse;
    animation-fill-mode:both;

总写

按照上方顺序即可
css 如下

* {
    margin:0;
    padding:0;
}
body {
    position:relative;
}
div {
    width:400px;
    height:400px;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#698771;
    border-radius:1000px;
    animation:myFrames 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s infinite alternate both;
}
div div {
    width:40px;
    height:40px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    background:#e8e3da;
    animation-name:myCenter;
}

/*关键帧*/
@keyframes myFrames {
    from {
        left:0;
    }

    to {
        left:70%;
    }
}

@keyframes myCenter {
    from {
        left:0;
    }

    to {
        left:0;
    }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./index.css" type="text/css">
    <title>css动画</title>
</head>
<body>
    <div>
        <div></div>
    </div>
</body>
</html>
<script src="./index.js"></script>

演示效果 https://melovemingming.gitee.io/code/practice/web/08/10/

收起

展开全文

快速生成CSS渐变动画-JavaScript开发
2021-05-26 05:42:17

由VueJS，VueX和SASS支持的简单CSS渐变动画师工具。构建此工具的想法是快速生成CSS渐变动画，这将帮助开发人员立即快速预览选定的调色板。由VueJS，VueX和SASS支持的简单CSS渐变动画师工具。构建此工具的想法是...

收起
简洁实用的css3动画导航条
2020-06-12 10:13:46

一款非常实用的css3动画显示的进度条颜色丰富多彩，动画进度条，颜色从红色到绿色过渡在整个过程中并没有实用javascript参与使用方法： 1、将附件index.html文件中的css代码以及html代码拷贝到你的...

收起
CSS3可展开收缩的弹性动画菜单
2019-08-23 18:02:11

这次我们要为大家分享一款炫酷实用的CSS3菜单，这款菜单的特点是可以展开和收缩菜单项，并且在展开和收缩的过程中伴随弹性的动画特效，而且展开和收缩的按钮也会出现一些炫酷的动画特效。这款CSS3弹性动画菜单比较...

收起

HTML5应用

css3动画

千次阅读 多人点赞 2018-07-29 11:47:24

css3动画特效一、transform（转换动画、直接动画） 1.rotate（旋转）包含三种状态，x、y、z三轴的变化 rotatex、rotatey、rotatez（默认）旋转（rotate）实例 &amp;lt;!...

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>

在这里插入图片描述

收起

展开全文

一文搞懂CSS 3D动画效果

2022-01-29 16:56:46

本文主要介绍了CSS 动画效果,不用js也可以实现。主要包括旋转、定位、透视。还有几个项目案例，欢迎大家阅读学习，如有不足请批评指正。

文章目录

前言
一、先来看几个动画案例
二、3D动画效果简述
- 1.转换类型： transform-style: preserve-3d;
- 2.透视 perspective: 400px;（拉进我们眼睛与图像的距离）
三、项目案例代码
- 1.立体导航栏
- 2.旋转木马
总结

前言

3D动画效果使页面看起来更加立体,图形更下加生动,实现原理是通过透视的视距,改变图像在人眼内成像的类型，从而达到图像立体的展示在人的眼前。

一、先来看几个动画案例

这几个动画案例均是由CSS 3D动画技术制成。大家知道javascript可以很轻松的实现动画效果
今天带大家不用js也实现一些简单的动画效果。

①旋转飞人

实现图片的翻转,可以自己制定旋转轴

在这里插入图片描述

②翻转纽扣

实现了两个盒子的前后翻转

在这里插入图片描述

③立体导航栏

实现了导航栏立体化

在这里插入图片描述

④立体轮播图

比普通的轮播图更加立体^_^

在这里插入图片描述

二、3D动画效果简述

3D动画效果展示只不过是对2D动画效果的延伸,2D动画进行定位、旋转、缩放的轴是
我们头部与电脑屏幕连线所在的直线,而3D动画效果可以自定义旋转轴。然后进行相应的操作。

在3D旋转的时候有三个轴X、Y、Z（X是横向的、Y是竖向的、Z垂直与X、Y）
 1.以X轴旋转
            transform: rotateX(45deg);
 2.以Y轴旋转
          /* transform: rotateY(45deg); */
 3.以Z轴旋转（与2D的旋转没有本质的区别）
            transform: rotateZ(45deg);
 4.综合旋转(遵守规则：各个轴的矢量和)

1.转换类型： transform-style: preserve-3d;

这个属性的作用是告诉浏览器，以3D的形式对图片进行旋转。
这个属性一般是加在需要进行变换的盒子上
以下通过翻转纽扣进行体会：

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        文字会有倒着的效果
        可以先利用旋转转动一定的角度将其隐藏在其他盒子的下面
        想要避免盒子的闪动就在盒子上继续套盒子,然后利用套的盒子对被套的盒子进行旋转
     -->
    <style>
        body {
        /*可以修改该属性，达到纽扣的不同效果的展示。*/
            perspective: 400px;
        }

        .root {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
        }

        .root:hover .box {
            transform: rotateY(180deg);
        }

        .box {
            position: relative;
            width: 100%;
            height: 100%;
            transition: all 2s;
            transform-style: preserve-3d;
        }



        .nav,
        .qwe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            text-align: center;
            line-height: 300px;
            font-size: 45px;
            font-family: '幼圆';
            font-weight: 700;
            color: #fff;
            transition: all 2s;
        }

        .nav {
            background-color: cadetblue;
            z-index: 1;
        }

        .qwe {

            background-color: cornflowerblue;
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="box">
            <div class="nav">Hello</div>
            <div class="qwe">World</div>
        </div>
    </div>


</body>

</html>

2.透视 perspective: 400px;（拉进我们眼睛与图像的距离）

这里指物理距离不变,改变的是展示的效果（就像在平时观察真实的物
体走近了几步,观察的角度改变了）
这个属性一般加在需要变换盒子的父盒子上。
以下使用翻转飞人案例进行代码展示
修改透视距离为100px会看到飞人踢你。（嘿嘿）

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 400px;
            /* 保持三D效果 */
            transform-style: preserve-3d;
        }

        div {
            margin: 200px auto;
            width: 300px;
            height: 300px;
            background: url(../3.gif);
            background-size: 100% 100%;
            transition: all 2s;
        }

        div:hover {
            transform: rotate3d(1, 1, 1, 360deg);

        }
    </style>
    <style></style>
</head>

<body>
    <div></div>
</body>

</html>

三、项目案例代码

1.立体导航栏

	这个的实现过程就是将盒子通过x轴进行旋转,直到与电脑屏幕垂直,然后添加一个新的
	盒子,与第一个盒子垂直,在鼠标聚焦在第二个盒子上的时候盒子进行90度旋转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        立体导航栏刚开始都在z轴的0处,沿z轴所在的平面进行旋转,旋转轴是x轴
        视距会影响标签的显示效果,所以一般将视距与transform-style加在3D标签的父标签
    -->
    <style>
        .navrootr {
            float: left;
            position: relative;
            width: 100px;
            height: 40px;
            margin: 100px 10px;
            perspective: 400px;
        }

        .navrootr:hover .navroot {
            transform: rotateX(90deg);
        }

        .navroot {
            position: relative;
            width: 100%;
            height: 100%;
            /* perspective: 400px; */
            transform-style: preserve-3d;
            transition: all .4s;
        }

        .box1,
        .box2 {
            color: #fff;
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 40px;
        }

        .box1 {
            transform: translateZ(50%);
            background-color: teal;
            transform: translateZ(20px);
        }

        .box2 {
            background-color: cornflowerblue;
            transform: translateY(20px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navrootr">
        <div class="navroot">
            <div class="box1">哔哩哔哩</div>
            <div class="box2">百度知道</div>

        </div>
    </div>
    <div class="navrootr">
        <div class="navroot">
            <div class="box1">哔哩哔哩</div>
            <div class="box2">百度知道</div>

        </div>
    </div>
    <div class="navrootr">
        <div class="navroot">
            <div class="box1">哔哩哔哩</div>
            <div class="box2">百度知道</div>

        </div>
    </div>
    <div class="navrootr">
        <div class="navroot">
            <div class="box1">哔哩哔哩</div>
            <div class="box2">百度知道</div>

        </div>
    </div>
    <div class="navrootr">
        <div class="navroot">
            <div class="box1">哔哩哔哩</div>
            <div class="box2">百度知道</div>

        </div>
    </div>
    <div class="navrootr">
        <div class="navroot">
            <div class="box1">哔哩哔哩</div>
            <div class="box2">百度知道</div>

        </div>
    </div>


</body>

</html>

2.旋转木马

添加了6个盒子,中间一个,将每一个图片按照第一个图片先旋转,再平移
【例如translateZ(350px),沿z轴平移350px】,可以在纸上先画一个俯视图,
看看每一个图片具体旋转多少度,移动多少可以达到固定的位置。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        在进行3D视角的页面布局时,应优先调整角度,再移动距离
     -->
    <style>
        @keyframes run {
            0% {
                transform: rotateY(0);
            }

            100% {
                transform: rotateY(360deg);
            }
        }

        .bodyroot {
            perspective: 1000px;
        }
        section {
            position: relative;
            width: 350px;
            height: 200px;
            background: url(../IMG_1770\(20210111-231055\).JPG) no-repeat;
            background-size: 100% 100%;
            margin: 200px auto;
            transform-style: preserve-3d;
            animation: run 6s linear infinite;
        }

        section:hover {
            animation-play-state: paused;
        }

        section div {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 300px;
            height: 200px;
            background: url(../dog.jpg) no-repeat;
        }

        /* 前 */
        section div:nth-child(1) {
            transform: translateZ(350px);
            background: url(../q.jpg) no-repeat;
            background-size: 100% 100%;
        }

        /* 后 */
        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(350px);
            background: url(../w.jpg) no-repeat;
            background-size: 100% 100%;
        }

        /* 前左 */
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(350px);
            background: url(../e.jpg) no-repeat;
            background-size: 100% 100%;
        }

        /* 前右 */
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(350px);
            background: url(../r.jpg) no-repeat;
            background-size: 100% 100%;
        }

        /* 后左 */
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(350px);
            background: url(../t.jpg) no-repeat;
            background-size: 100% 100%;
        }

        /* 后右 */
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(350px);
            background: url(../y.jpg) no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <div class="bodyroot">
         <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>   
    </div>
</body>

</html>

总结

以上的案例将图片路径替换成你的图片所在的路径就可以直接运行,对于3D动画效果,整不清楚就画图,可以先局部后整体。

收起

展开全文

3d javascript html

CSS 动画 animate
2018-07-27 09:06:25

CSS动画，效果查看： https://blog.csdn.net/qq_37902949/article/details/81230979

收起
CSS3实现逼真的3D星空背景动画特效
2020-06-12 02:20:42

CSS3实现3D星空背景动画特效是一款逼真的网页背景繁星点点星空动画特效代码。

收起
vue中的动画特效以及animate.css使用
2019-12-14 10:32:57

Vue 提供了transition的封装组件，可以给任何元素和组件添加进入/离开过渡 a：代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...vue的动画</title> <...

收起
CSS3动画
2019-01-19 10:21:53

如果你想用CSS3来创建动画，可以学习一下@keyframes规则。 @keyframes可用于创建动画效果，@keyframes可以规定某项CSS样式，就能达到从当前样式逐渐改变为新样式，接下来我们来看看。我们先用百分比来规定一下动画...

收起
微信小程序开发之——CSS动画
2022-01-13 09:55:09

上一节介绍了通过CSS属性keyframes设置图片选择动画，本文介绍以下两种形式的动画： this.animate 接口(旧的) wx.createAnimation接口(新的，2.9.0开始支持) 二 this.animate 2.1 布局文件 <view class=...

收起

微信小程序
CSS动画效果
万次阅读 多人点赞 2019-05-28 20:21:11

07三列等宽布局 1 2 3 07、css3伸缩布局 css3伸缩布局 1 2 3 08、css3伸缩布局固定 css3伸缩布局固定宽度 1 2 3 09、css3伸缩布局垂直分布 ...

收起
CSS3动画-奔跑吧！绵羊.zip
2019-07-04 20:50:39

CSS3动画-奔跑吧！绵羊

收起
fullpage.js结合animate.css实现滚屏动画
2018-06-11 11:39:25

fullpage.js结合animate.css实现滚屏动画，每段代码都加有详细注释文章地址：https://blog.csdn.net/cplvfx/article/details/80649574

收起
CSS关键帧动画
2022-03-08 17:37:24

Anmination-timing-function 设置动画的曲线函数linear匀速，animation-delay设置动画延迟1秒执行，animation-iteration-count设置动画执行次数infinite无限次开始设置关键帧，@keyframes myMove{}规定动画的名称在...

收起

前端 html
纯css3实现文字动画
2021-06-13 16:47:03

先上代码，代码如下：css3动画 - daimami.comdiv{background-color:#ffff00;-webkit-transition:background-color 1s linear;-moz-transition:background-color 1s linear;-o-transition:background-color 1s linear...

收起

CSS 动画

animate.css在vue项目中的使用教程

CSS3鼠标悬停图标导航动画特效.zip

CSS3 Animation文字动画特效.zip

CSS3动画特效

利用CSS3实现平移动画效果示例代码

通过css动画实现一个表格滚动轮播效果

CSS3动画特效_css3打开信封的留言表单效果

纯CSS3悬停图标旋转导航动画代码.zip

6种炫酷的CSS3按钮边框动画特效

css3动画集合

几款酷炫的css3文字动画特效

html5 css3实例教程 一款html5和css3实现的小机器人走路动画

css 动画

@keyframes

举个栗子

分开定义

animation

animation-name

animation-duration

举一个栗子

animation-timing-function

DevTools

animation-delay

animation-iteration-count

举栗子

animation-direction

normal

reverse

alternate

alternate-reverse

animation-fill-mode

forwards

backwards

both

正序

倒序

总写

快速生成CSS渐变动画-JavaScript开发

简洁实用的css3动画导航条

CSS3可展开收缩的弹性动画菜单

css3动画

css3动画特效

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

1.rotate（旋转）

2.translate（平移）

3.skew（变形）

4.scale（伸缩比例）

transform相关补充：

二、transition（过渡动画）

1.transition相关补充

2.示例

三、animation（帧动画）

1.animation相关补充

2.示例

一文搞懂CSS 3D动画效果

文章目录

前言

一、先来看几个动画案例

①旋转飞人

②翻转纽扣

③立体导航栏

④立体轮播图

二、3D动画效果简述

1.转换类型： transform-style: preserve-3d;

2.透视 perspective: 400px;（拉进我们眼睛与图像的距离）

三、项目案例代码

1.立体导航栏

2.旋转木马

总结

CSS 动画 animate

CSS3实现逼真的3D星空背景动画特效

vue中的动画特效以及animate.css使用

CSS3动画

微信小程序开发之——CSS动画

CSS动画效果

CSS3动画-奔跑吧！绵羊.zip

fullpage.js结合animate.css实现滚屏动画

CSS关键帧动画

纯css3实现文字动画

html5 css3实例教程一款html5和css3实现的小机器人走路动画