前端【动画】练习

最新推荐文章于 2024-08-03 19:19:54 发布
最新推荐文章于 2024-08-03 19:19:54 发布
阅读量189 收藏
点赞数
分类专栏： 笔记 文章标签： 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53271010/article/details/126968382
版权

动画

定义关键帧对话   @keyframes{}

轮播图

<!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>轮播图</title>
    <style>
        /* 1.首尾不衔接
        2.图片没有停留间隙 */
        @keyframes move {
           0%{left: 0;}
           /* 24%{left: 0;} */
           25%{left:-400px;}
           50%{left: -800px;}
           75%{ left: -1200px;}
           100%{ left: -1600px;}
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .window{
            width: 400px;
            height: 300px;
            overflow: hidden;
            position: relative;
            box-shadow: 2px 2px 5px gray;
            margin: 0 auto;
        }
        .move{
            width: 2000px;
            height: 300px;
            position: absolute;
            animation: move 8s 
                      linear infinite;
        }
        li{
            width: 400px;
            height: 300px;
            float: left;
        }
        li img{
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="window">
        <ul class="move">
            <li><img src="img/xhr1.jpeg" alt=""></li>
            <li><img src="img/xhr2.jpeg" alt=""></li>
            <li><img src="img/xhr3.jpeg" alt=""></li>
            <li><img src="img/xhr4.jpeg" alt=""></li>
        </ul>
    </div>
</body>
</html>

模仿华为充电

<!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>模仿华为充电效果</title>
    <style>
        /* :root{
            --my--color
        } */
        @keyframes roll{
            0%{
                transform: rotate(0);
                border-radius:  32% 48% 36% 46%;
            }
            50%{
                transform: rotate(300deg);
                border-radius: 42% 44% 36% 40%;
            }
            100%{
                transform: rotate(360deg);
                border-radius:  32% 48% 36% 46%;
            }
        }
        @keyframes li-move{
            from{transform: translateY(0);}
            to{transform: translateY(-200px);}
        }
        @keyframes change-color{
            from{
                filter: contrast(10);
                /* hue-rotate(0); */
            }
            to{
                filter: contrast(10)
                hue-rotate(360deg);
            }
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        .wrap{
           height: 100vh;
           background-color: #000;
           overflow: hidden;
           filter: contrast(10) hue-rotate(0);
           animation:change-color 4s linear infinite ;
        }
        .circle{

            width: 200px;
            height: 200px;
            background-color: tomato;
            margin: 50px auto;
            border-radius: 32% 48% 36% 46%;
            filter: blur(8px);
            animation: roll 4s linear infinite;
        }
        .circle div{
            width: 184px;
            height: 184px;
            margin: 8px;
            background-color: #000;
            border-radius: 50%;
          
    
        }
        ul{
            filter: blur(5px);
            width: 100px;
            height: 30px;
            background-color: tomato;
            margin: 180px auto;
            border-radius: 30px 30px 0 0;
            position: relative;
        }
        ul li{
            border-radius: 50%;
            background-color: tomato;
            position: absolute;
            animation:li-move  2s linear infinite;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="circle">
            <div></div>
        </div>
        <ul>
            <li style="width:15px;height:15px;left:5px;top: 0;animation-duration:2s;"></li>
            <li style="width:20px;height:20px;left:12px;top: 0;animation-duration:2.5s;"></li>
            <li style="width:35px;height:35px;left:57px;top: 0;animation-duration:3.5s;"></li>
            <li style="width:26px;height:26px;left: 58px;top: 0;animation-duration:1.5s;"></li>
            <li style="width:30px;height:30px;left:45px ;top: 0;animation-duration:1s;"></li>
            <li style="width:18px;height:18px;left:68px ;top: 0;animation-duration:1.8s;"></li>
            <!-- <li style="width:15px;height:15px;left:68px ;top: 0;"></li>
            <li style="width:15px;height:15px;left: 58px;top: 0;"></li> -->
        </ul>
    </div>
</body>
</html>

旋转的立方体

<!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>旋转的立方体</title>
    <style>
        @keyframes roll{
            from{
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            to{
                transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            }
        }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            padding: 100px;

        }
        ul{
            width: 200px;
            height: 200px;
            position: relative;
            /* 开启3D效果 */
            transform-style: preserve-3d;
            animation: roll 4s linear infinite ;
        }
        li{
            width: 200px;
            height: 200px;
            position: absolute;
            opacity:.5 ;
        }
        /* 1,2上下
        3，4左右
        5，6前后 */
        li:nth-of-type(1){
            background-image:url() ;
            background-color: gold;
            transform: rotateX(90deg)
                      translateZ(100px);
        }
        li:nth-of-type(2){
            background-color: tomato;
            transform: rotateX(-90deg)
                      translateZ(100px);
        }
        li:nth-of-type(3){
            background-color: pink;
            transform: rotateY(90deg)
                      translateZ(100px);
        }
        li:nth-of-type(4){
            background-color: yellowgreen;
            transform: rotateY(-90deg)
                      translateZ(100px);
        }
        li:nth-of-type(5){
            background-color: skyblue;
            transform: 
                      translateZ(100px);
        }
        li:nth-of-type(6){
            background-color: orange;
            transform: rotateY(180deg)
                      translateZ(100px);
        }
        .small{
            width: 100px;
            height: 100px;
            margin: 50px;
        }
          li:nth-of-type(7){
            background-color: gold;
            transform: rotateX(90deg)
                      translateZ(50px);
        }
        li:nth-of-type(8){
            background-color: tomato;
            transform: rotateX(-90deg)
                      translateZ(50px);
        }
        li:nth-of-type(9){
            background-color: pink;
            transform: rotateY(90deg)
                      translateZ(50px);
        }
        li:nth-of-type(10){
            background-color: yellowgreen;
            transform: rotateY(-90deg)
                      translateZ(50px);
        }
        li:nth-of-type(11){
            background-color: skyblue;
            transform: translateZ(50px);
        }
        li:nth-of-type(12){
            background-color: orange;
            transform: rotateY(180deg)
                      translateZ(50px);
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

        <li class="small"></li>
        <li class="small"></li>
        <li class="small"></li>
        <li class="small"></li>
        <li class="small"></li>
        <li class="small"></li> 
    </ul>
</body>
</html>

loading

<!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>loading</title>
    <style>
        @keyframes roll{
            from{
                transform: rotate(0);
                filter: hue-rotate(0);
            }
            to{
                transform: rotate(360deg);
                filter: hue-rotate(360deg);
            }
        }
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 100vw;
            height:100vh ;
            background-color: #222;
            overflow: hidden;
        }
        .d1{
            width: 200px;
            height: 200px;
            margin: 100px  auto;
            background-image: -webkit-linear-gradient(45deg,transparent 40%,yellowgreen 60%);
            background-image: linear-gradient(45deg,transparent 40%,yellowgreen 60%);
            border-radius: 50%;
            position: relative;
            overflow: hidden;
            animation: roll 2s linear infinite ;
        }
        .mask{
            width: 192px;
            height: 192px;
            background-color: #000;
            position: absolute;
            left: 0;
            bottom: 0;
            border-radius: 50%;
            filter: blur(8px);

        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="d1">
            <div class="mask"></div>
        </div>
    </div>
</body>
</html>

loading效果

<!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>loading效果</title>
    <style>
        @keyframes clock{
            from{transform: rotate(0);}
                to{transform: rotate(360deg);}
            }
            @keyframes rect1{
                from{margin-top: 92px;opacity: 0;}
                to{margin-top: 0;opacity: 1;}
            }
            @keyframes rect2 {
                0% { left: 20px;top: 20px;}
                25% { left: 170px;top: 20px;}
                50% { left: 170px;top: 170px;}
                75% { left: 20px;top: 170px;}
                100% { left: 20px;top: 20px;}
            }
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        .item{
            width: 200px;
            height: 200px;
            background-color: #594889;
            margin: 10px;
            position: relative;
            overflow: hidden;
        }
        .clock{
            width: 160px;
            height: 160px;
            border: 5px solid white;
            border-radius: 50%;
            position: absolute;
            left: 20px;
            top: 20px;
        }
        .zhen1{
            width: 4px;
            height: 70px;
            background-color: white;
            position: absolute;
            left: 98px;
            top: 30px;
            transform-origin: center bottom;
            animation: clock 2s linear infinite;
        }
        .zhen2{
            width: 4px;
            height: 50px;
            background-color: white;
            position: absolute;
            left: 98px;
            top: 50px;
            transform-origin: center bottom;
            animation: clock 6s linear infinite;
        }
        .rect{
            width: 100px;
            height: 100px;
            border: 4px solid white;
            margin: 50px;
            overflow: hidden;
        }
         .rect div{
            width: 100%;
            height: 100%;
            background-color: white;
            margin-top: 92px;
            opacity: 0;
            animation: rect1 4s linear infinite;
        }
        .item .slider{
            width: 10px;
            height: 10px;
            background-color: white;
            position: absolute;
            left: 20px;
            top: 20px;
            animation: rect2 4s linear infinite;

        }
    </style>
</head>
<body>
     <div class="item">
        <div class="clock"></div>
        <div class="zhen1"></div>
        <div class="zhen2"></div>
     </div>
     <div class="item">
        <div class="rect">
            <div></div>
        </div>
       
        <div class="slider"></div>
     </div>
    
</body>
</html>

码农不秃呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端小动画之旋转的太极
pretty6cool的博客
07-05 405
前端小练习之旋转的太极球
前端提高篇（五十四）练习7：animation动画练习
安之ccy的博客
03-16 525
效果：练习6的过渡效果基础上，对hover时描述的出现加一些动画效果，识别鼠标进出的方向，描述文字跟着鼠标的方向出现或消失 问题1：判断鼠标进出的方向 e.offsetX和e.offsetY用于获取相对容器的水平、垂直坐标，坐标原点在容器左上角，默认水平向右为正X，垂直向下为正Y offset与mouseenter事件结合可以对鼠标的进出位置做出响应，但响应不是特别迅速准确，可能鼠标从右边进入和从上边进入，得到的offset值是相似的，不能作为方向的判断依据 因此，考虑移动坐标轴，让容器的中心点为坐标原点
前端提高篇（五十四）练习7：animation动画练习，2024一位Web前端中级程序员的跳槽面经
2401_84140140的博客
04-19 585
由于一开始定义鼠标从四方向进入前的位置时，也定义了鼠标从四方向出去后的位置，这个移出后的默认状态可以当作是移出动画的最后一帧，就不用写100%了，定义一下0%即可。效果：当鼠标从左往右进入框时，描述文字在框左边，然后从左往右运动，最后停留在最后一帧，即完整显示描述文字，其他方向、其他图片同理。以上讨论的是正方形，对角线切开各是45°，如果我的框框是长方形，对角线切开角度就未必是45了。效果：从上方进去是0，右边进是1，下边进是2，左边进是3，且左边的上下区域都是3。js的基本类型有哪些？
前端练习--按钮动画过渡
comegoing_xin_lv的博客
09-01 403
过渡的实战演示效果
前端练习--跑步动画
comegoing_xin_lv的博客
09-02 173
运动动画效果、雪碧图
JS动画练习
qq_19747915的博客
08-27 113
​ 看了Pink老师的课，刚看到动画想练习练习。
网页动画练习
weixin_44917161的博客
08-03 339
主要的原理是用伪类":hover"在鼠标悬停在指定元素上方时，执行它里面的内容，再借助过度"transition"的效果，最终实现动画。
前端的学习之路：初级CSS---动画(练习2)
weixin_44647555的博客
02-10 110
动画(练习2) <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
前端面试练习24.3.4
xhc6666的博客
03-04 1453
首先要明白一点：原型存在于对象中的。Diff（差异化算法）是一种用于比较两个树形结构的算法，常用于前端框架中用于更新视图。在 Vue、React 等现代前端框架中，Diff 算法被用于比较虚拟 DOM 树的差异，从而高效地更新真实 DOM。Diff 算法的基本原理是：通过比较两棵树的结构差异，找出最小的更新操作，然后将这些更新操作应用到真实 DOM 上，以实现视图的更新。Diff 算法的目的是尽量减少更新操作的数量，从而提高渲染性能。
前端jquery练习网页
10-12
这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码...
前端基础-静态页面练习.zip
07-08
【前端基础-静态页面练习.zip】是一个集合了前端开发基础训练的资源包，主要涵盖了HTML和CSS的基础知识，提供了一系列的实战练习项目，适合初学者或希望巩固前端基础的开发者进行学习和实践。这个压缩包包含多个实际...
动画练习--明星资料卡.zip
04-27
本资源“动画练习--明星资料卡.zip”提供了一系列的前端动画示例，特别适用于学习和参考。这些动画效果包括平移、旋转以及鼠标经过时的放大效果，这些都是网页设计中常见的动态交互元素。 平移（Translation）是一...
小白仿造阅文首页前端练习
04-21
【标题解析】：“小白仿造阅文首页前端练习”这个标题表明这是一个针对初学者的项目，目的是通过模仿阅文集团网站的首页来学习和实践HTML和CSS基础。在这个过程中，学习者可以熟悉网页布局、元素设计以及如何用静态...
PHP中文网前端学习练习笔记
10-19
【PHP中文网前端学习练习笔记】是一份涵盖了前端开发核心技术的综合学习资料，主要针对HTML5、CSS3、ES6以及Vue.js等关键领域的学习和实践进行了详细记录。这份笔记旨在帮助初学者或者希望提升前端技能的开发者系统...
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5692
再看代码： JS部分。
034 疫情数据查看.zip
最新发布
08-20
该毕业设计将深入探讨如何通过Java语言构建一个完整且高效的《034 疫情数据查看》。毕业设计的架构涵盖了从基础框架搭建到关键功能实现的每一个环节，并采用了模块化设计，使整个系统易于理解、扩展和维护。 无论是数据处理、用户交互还是后台管理，我们都为您提供了详细的代码示例和设计文档。 这个毕业设计的独特之处在于其高度的实用性和灵活性。 我们提供了全面的资源包，帮助您快速入门，并支持您在此基础上进行个性化的功能扩展。 无论您是正在寻找灵感的学生，还是需要现成解决方案的开发者，下载该资源将助您事半功倍。
weixin235基于微信小程序点餐系统的设计ssm.zip
08-20
基于微信小程序点餐系统可以实现商品管理，商品评价管理，论坛帖子管理，公告管理，商品订单管理，在线充值等功能。该系统采用了SSM框架，Mysql数据库，Java语言等技术实现管理员后台。采用微信开发者工具来对用户小程序端进行了开发。
8051Proteus仿真c源码2io5键盘模拟音量数码管显示
08-20
8051Proteus仿真c源码2io5键盘模拟音量数码管显示提取方式是百度网盘分享地址
web前端基础练习题
02-28
当然可以！以下是一些常见的Web前端基础练习题： 1. 创建一个简单的HTML页面，包含一个标题、一个段落和一个图片。 2. 使用CSS样式设置页面的背景颜色、字体样式和大小。 3. 创建一个导航栏，包含多个链接，并使用CSS样式进行布局和美化。 4. 创建一个表单，包含输入框、复选框和提交按钮，并使用JavaScript验证用户输入。 5. 使用CSS实现一个响应式布局，使页面在不同设备上都能良好显示。 6. 使用JavaScript实现一个简单的图片轮播效果，使图片自动切换显示。 7. 使用HTML5的Canvas元素绘制一个简单的图形，如矩形或圆形。 8. 使用CSS3的动画效果实现一个元素的平滑过渡或旋转效果。 9. 使用JavaScript实现一个简单的计算器，能够进行基本的加减乘除运算。 10. 使用Ajax技术实现一个简单的异步加载数据的功能。 这些练习题涵盖了HTML、CSS和JavaScript的基础知识点，通过完成这些练习可以加深对前端开发的理解和实践能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值