首页 前端知识 CSS3的一些动画展示

CSS3的一些动画展示

2024-08-10 00:08:19 前端知识 前端哥 91 451 我要收藏

        在css3中,有一些特别方便有趣的方式来让自己定义的图形和图片‘活’起来。

前言

        1.  了解‘过渡’   2D转换

        2.  案例

1. 1 过渡(transition)

用法与参数:Transition:(参数一   参数二)

  • 参数一:要过渡的属性
  •  参数二:过渡的时间

        过渡是css3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。

  •  补间动画:自动完成从始至终的状态的过渡,不用管中间的状态。
  • 帧动画:扑克牌切换,通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。

1.2 2D转换

  • 2D转换可以实现原色的位移,旋转,变形,缩放,甚至支持矩阵方式,配合即将学习的动画知识,可以取代大量之前只能靠flash才可以实现的效果。
  • 在css3中,可以通过transform(变形)来实现2d或者3d的转换,其中2d中有缩放移动,旋转。
1.2.1缩放

用法与参数:scale(x,y)

        可以对元素进行水平和垂直方式的缩放,x,y的取值可以为小数,不可为负数。

1.2.2移动

用法和参数:translate(x,y)       

         x为水平方向移动,y为垂直方向移动

        可以以改变元素的位置,x,y可以为负数。

1.2.3旋转

用法与参数:rotate(deg)

可以对元素惊醒旋转,正值为顺时针,负值为逆时针

1.2.4改变圆心

transform-origin:(方位)如:top  配合旋转 可改变图形圆心位置旋转方式。

2 案例

        2.1气泡案例

当鼠标移入在这个气泡上,会实现丝滑气泡动态效果的动画

2.1.1

首先在body里定义一个div,并命名类为box。在style中开始编写css样式 实现动态效果。如下

.box {
    width: 300px;
    height: 150px;
    margin: 100px auto;
    border-radius: 20px;
    background: url(./images/paopao.png) no-repeat,
                url(./images/paopao.png) no-repeat right bottom;
    background-color: skyblue;
    transition: all 2s;
}
2.1.2

设置 .box 元素的宽度为 300 像素高度为 150 像素。

       width: 300px;height: 150px;

2.1.3

设置 .box 元素的外边距,上下各 100 像素,左右自动(使其水平居中)。

        margin: 100px auto;

2.1.4

设置元素的边角为 20 像素的圆角,使其看起来更加柔和。

        border-radius: 20px;

2.1.5

设置了两个背景图像:

        background:

             url(./images/paopao.png) no-repeat,

             url(./images/paopao.png) no-repeat right bottom;

      第二个背景图片位置设置在右下角(right bottom)。实现同一张图片,不同的动画效果

2.1.6

设置所有可过渡属性的变化时间为 2 秒,意味着在状态变化时(如鼠标悬停)会平滑过渡。

        transition: all 2s;

2.1.7

伪类选择器,用于定义当鼠标悬停在 .box 元素上时的样式。

        .box:hover

2.1.9

当鼠标悬停时,第一个背景图像的位置变化为左下角(left bottom)。

第二个背景图像的位置变化为右上角(right top)。

        background-position: left bottom, right top;

效果总结

当用户将鼠标悬停在类为 .box 元素的泡泡背景上时,背景图像的位置会发生变化,并且这种变化会在 2 秒内平滑过渡。背景图像在鼠标悬停时移动,给人一种动态的视觉体验。十分丝滑,且简单。

2.2火箭移动

        当鼠标移动到页面上(body),自左下向右上出来一个小火箭。

 body{
       
            height: 100%;
            background-color: #60cac7;
            
        }
        html{
            height: 100%;
        }
        .img{
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 50px;
            transform:  translate(-81px,100px) rotate(10deg);
            transition: all 2s;
        }
        body:hover img{
            transform:  translate(500px,-500px) rotate(45deg);
        }
2.2.1

html 和 body 的高度为百分百。这两行代码确保网页的高度占满整个浏览器窗口。方便我们鼠标移入时动画能触发。

        body { height: 100%;

                 background-color: #60cac7; }

        html { height: 100%; }

2.2.2

.img 类的样式设置
      .img{
            position: absolute;
            bottom: 0px;
            left: 0px;
            width: 50px;
            transform:  translate(-81px,100px) rotate(10deg);
            transition: all 2s;
        }

2.2.3

将该元素的定位方式设置为绝对定位。

    position: absolute;
             bottom: 0px;
             left: 0px;

2.2.4

使用 transform属性对元素进行变换:

               transform:  translate(-81px,100px) rotate(10deg);

2.2.5

将元素在水平方向上向左移动 81 像素,在垂直方向上向下移动 100 像素。将元素顺时针旋转 10 度。

                transform: translate(-81px,100px) rotate(10deg);

2.2.6

设置所有可过渡的属性在变化时的持续时间为 2 秒。这意味着当元素的样式发生变化时,变化会平滑地过渡。

                transition: all 2s;

2.2.7

body:hover img 的样式设置

当鼠标悬停在 body 元素上时,选择所有 img 元素

                body:hover img{
                        }

当鼠标悬停时,元素的变换会更新为:

translate(500px,-500px);将元素在水平方向上向右移动 500 像素,在垂直方向上向上移动 500 像素。将元素顺时针旋转 45 度。

                transform:  translate(500px,-500px) rotate(45deg);

效果总结

        这段代码的总体效果是,我们将鼠标悬停在页面的任意位置时,位于左下角的小火煎会平滑地移动到右上角并旋转30°,同时背景颜色保持不变。

2.3盾牌,位置还原

        当鼠标移入这个页面的时候,页面上显示的盾牌碎片将合体,成为一个完整的盾牌

              

body{
            background-color: #74c66d;
            height: 100%;
        }
        html{
            height:100% ;
        }
        div{
            width: 430px;
            height: 500px;
            margin: 400px auto; 
        
        }
        img:nth-child(1){
            transform: translate(-45px,-45px);
            transition: all 2s;
        }
        img:nth-child(2){
            transform:translate(0px,-45px);
            transition: all 2s;
        }
        img:nth-child(3){
            transform:translate(45px,-45px);
            transition: all 2s;
        }
        img:nth-child(4){
            transform:translate(-45px,0px);
            transition: all 2s;
        }
        img:nth-child(5){
            transform:scale(1.5,1.5);
            transition: all 2s;
        }
        img:nth-child(6){
            transform:translate(45px,0px);
            transition: all 2s;
        }
        img:nth-child(7){
            transform:translate(-45px,45px);
            transition: all 2s;
        }
        img:nth-child(8){
            transform:translate(0px,45px);
            transition: all 2s;
        }
        img:nth-child(9){
            transform:translate(45px,45px);
            transition: all 2s;
        }

       body:hover img {
            transform: translate(0%,0%)
        }

        在body中我们插入盾牌碎片,集齐九个盾牌碎片即可召唤出世界上最强的刺不穿的盾。打败巨龙,营救公主。所以我们我们这么写代码。

2.3.1

html 和 body 的高度为百分百。这两行代码确保网页的高度占满整个浏览器窗口。方便我们鼠标移入时动画能触发。

        body { height: 100%;

                 background-color: #60cac7; }

        html { height: 100%; }

2.3.2

选择 div 中的第一个 img 元素。nth-child(1) 是一个伪类选择器,用于选择父元素中的第一个子元素。对第一个 img 元素应用变换;

                img:nth-child(1) {

将该图像在水平方向上向左移动 45 像素,在垂直方向上向上移动 45 像素。

                transform:translate(-45px, -45px);

设置所有可过渡的属性在变化时的持续时间为 2 秒。

                transition: all 2s;}

2.3.3

其余body中div的九个盾牌碎片img同理,只需要就改下伪类元素里的数字,再修改碎片的初始移动位置,再通过鼠标移入的hover来让盾牌碎片重新合体为一个完整的盾牌。就可以打败巨龙。

        body:hover img {

                    transform: translate(0%,0%)

        }

       To be continue......

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15123.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!