简单大风车动画

最新推荐文章于 2024-04-28 13:46:58 发布
最新推荐文章于 2024-04-28 13:46:58 发布
阅读量328 收藏 3
点赞数 1
分类专栏： 个人 文章标签： 前端 简易动画css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40789317/article/details/87921829
版权

大风车转呀转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            display: flex;
        }
       .a{
           width:100px;
           height:50px;
           background-color:yellow;
           border-radius:50px 50px 0 0; /* 左上、右上、右下、左下 */
           display: inline-block;
           top: 50px;
           left:10px;
           position: absolute;

       }
        .b{
            display: inline-block;
            width: 50px;
            height: 100px;
            background-color: blue;
            border-radius: 50px 0 0 50px;
            position: absolute;
            top: 100px;
            left: 58px;

        }
        .c{
            display: inline-block;
            width:100px;
            height:50px;
            background-color:green;
            border-radius:0 0 50px 50px;
            position: absolute;
            top: 100px;
            left: 107px;
        }
       .d{
           display: inline-block;
           width: 50px;
           height: 100px;
           background-color: red;
           border-radius: 0 50px 50px 0;
           position: absolute;
           top: 0px;
           left: 107px;

       }
        .e{
            width: 200px;
            height: 200px;
            display: block;
           
        }
        @keyframes move {
            0% {
                transform:rotate(360deg);
            }
            25%{
                transform: rotate(270deg);
            }
            50%{
                transform: rotate(180deg);
            }
            75%{
                transform: rotate(90deg);
            }
            100%{
                transform: rotate(0deg);
            }
        }
       .e{
           animation: move 2s linear;
           animation-iteration-count: infinite;
       }
        .f{
            background-color: saddlebrown;
            width: 5px;
            height: 200px;
            position: absolute;
            top: 108px;
            left: 104px;
            display: block;
            z-index: -1;
        }
        @keyframes move1 {
            0%{
                left: 0px;
            }
            25%{
                left: 341px;
                transform: rotateY(90deg);
            }
            50%{
                left: 683px;
                transform: rotateY(180deg);
            }
            75%{
                left: 1023px;
                transform: rotateY(270deg);
            }
            100%{
                left: 1366px;
                transform: rotateY(360deg);
            }
        }
        .g{
            animation: move1 5s linear;
            animation-iteration-count: infinite;
            display: block;

        }
        .h{
            justify-content: space-between;
            flex: 0 0 auto;

        }
    </style>
</head>
<body>
<div class="g">
    <div class="e">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
    </div>
    <div class="f">
</div>

</div>
<audio src="1.mp3"  controls autoplay class="h" loop>

</audio>
</body>
</html>

在这里插入图片描述

qq_40789317
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
风车动画效果
06-08
Android使用SurfaceView实现墨迹天气的风车效果，下载即可使用。
大风车动画
Lioo121的博客
11-16 463
大风车动画 body{ /*设置body高度为100% 如果不设置的话，高度为内容的高度*/ height: 100%; /*开启弹性布局*/ display: flex; /*设置弹性布局中子元素的'水平对齐'方式为居中*/ justi...
用python的turtle库绘制风车动画
kanesunny的专栏
02-19 6881
风车的动画，过程如下：1）绘制风车形状A，2）擦除风车形状A，3）绘制风车形状B，4）擦除风车形状B...以此类推 在运行中，用clear()擦除风车形状效果不好，会出现闪屏的情况，所以采用变通的办法，用背景色再绘制一遍以达到视觉上擦除的效果，即： 1）绘制风车形状A，2）用背景色绘制风车形状A，3）绘制风车形状B，4）用背景色绘制风车形状B...以此类推 import turtle turtle.pensize(2) turtle.hideturtle() windSpeed = 2 radiu
HTML5中利用animation属性实现风车动画案例
大数据-攻城狮
12-07 3227
Document
python实现大风车动画效果实现
12-24
python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现...
HTML5+CSS3大风车旋转动画特效代码
03-20
HTML5+CSS3大风车旋转动画是一款很酷的HTML5动画，是一个可以旋转的大风车动画效果。
HTML5/CSS3实现大风车旋转动画
04-16
解压密码：RJ4587 这次我们要来分享一款很酷的HTML5动画，是一个可以旋转的大风车动画效果，回顾一下利用HTML5实现的旋转动画，我们可以看HTML5/CSS3实现3D旋转陀螺动画，它们的实现都是利用CSS3的transform:rotate...
要创建一个永不停止的风车动画，我们可以使用HTML5结合CSS3动画
BLOG域名:programb.blog.csdn.net
07-03 1408
这个示例中的CSS样式创建了一个简单的风车动画。.blade 类定义了风车的扇叶，每个扇叶都被绝对定位在风车的容器内，并且通过transform属性旋转了45度以创建风车的形状。通过为每个扇叶设置不同的animation-delay，我们可以模拟风车扇叶在旋转时的视觉效果。注意，这个示例中的风车动画比较简单，扇叶的旋转并没有完全模拟真实风车的运动。在CSS的末尾部分，我添加了一些额外的样式来改进风车的外观，包括增大风车的大小、改变扇叶的颜色和形状，以及添加一个中心点来模拟风车的轴。
flash特效原理：螺旋效果 （3）
夏天的树人的专栏
02-02 6777
    最近对高数起了很大的兴趣，掏钱买了一本高等数学。发现里面的真是一份宝物，最近看了一个人的博客。关于高等数学的知识，对螺旋线的形态原来不仅仅是一种。过去尝试制作的图形也是一种的方式，现在提及这种螺旋线不是围绕着圆柱形状旋转，而是圆锥。对无错，圆锥体。又是让人觉得不爽的数学，不过细心发觉，这种形态看起来更加像自然界的龙卷风。看起来，很美。 我们之前所做的做法围绕着圆柱的形式旋转，因
大风车旋转
10-21
旋转风车 钟表 锚点 可以实现旋转速度控制
10分钟轻松学会 Python turtle 绘图 教程
09-25
10分钟轻松学会 Python turtle 绘图 教程，里面有详细例子（原理+代码+效果）
大风车系列demo
05-04
android 自定义View模拟风车旋转的小demo
安卓实现旋转风车动画(仿华为天气预报)
蓝不蓝编程
09-02 1359
旋转风车实现效果 实现方案 对于风车的立柱部分，采用一张固定背景图； 对于风车上面旋转部分，采用一张图，通过安卓属性动画进行旋转。 注意点： 因为是采用两种图叠加而形成的效果，所以需要注意调整两张图的相对位置，使之刚好形成风车旋转效果。 主要代码 BaseWindmillView.kt abstract class BaseWindmillView constructor(context: ...
python知识点100篇系列（9）-使用python画个大风车
weixin_42551921的博客
04-26 628
turtle库是Python语言中一个很流行的绘制图像的函数库，想象一个小乌龟，在一个横轴为x、纵轴为y的坐标系原点，(0,0)位置开始，它根据一组函数指令的控制，在这个平面坐标系中移动，从而在它爬行的路径上绘制了图形。使用python画个大风车，就使用这个库实现；
python 画风车
11-05 6099
from turtle import * for i in range(4): fd(100) rt(90) circle(-100,45) goto(0,0) lt(45) done() # -*- coding: utf-8 -*- """ Created on Fri Nov 5 09:39:06 2021 @author: SBM """ from turtle import * from random import random ..
python用turtle画一个旋转的风车
m0_59235508的博客
03-08 7103
上次用turtle做了一个爱心，这次我们来做一个旋转的风车，先放下图，看一下完成后的效果 现在我们开始代码的编写 设计叶子 一片叶子我们用一深一浅两个三角形就可以实现了，下面以0度方向的叶子为例，我们写出的代码如下 用循环改为生成4个叶子 有了一个叶子，生成4个叶子也比较容易了，我们只要写一个循环，然后循环里用90的倍数去指定下方向角，剩下的绘制代码就一样了 加一个棒子 给风车的下面加一个稍稍粗一些的棒子，我们只要设置下画笔的粗细画一跟直线就可以了 风车的旋转 风车已经画完了，但是下面我们怎么才能让
判断前端入参是否空否则提示前端写法
最新发布
qq_39306234的博客
04-28 222
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 507
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
css大风车动画一直旋转
05-10
可以使用CSS3的动画来实现大风车的旋转效果，具体实现方法如下： 1. 首先，在HTML中创建一个div元素，用于表示大风车的图形： ``` <div class="windmill"></div> ``` 2. 在CSS中设置该div元素的样式，包括宽度、高度、边框等属性： ``` .windmill { width: 100px; height: 100px; border: 10px solid #333; border-radius: 50%; } ``` 3. 接下来，使用CSS3的动画来实现大风车的旋转效果。通过设置transform属性的rotate()函数来实现旋转，同时设置animation属性来定义动画的持续时间、延迟时间、动画方式等参数： ``` .windmill { width: 100px; height: 100px; border: 10px solid #333; border-radius: 50%; animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` 以上代码中，@keyframes规则用于定义动画的关键帧，包括动画开始时的状态（from）和结束时的状态（to）。在这个例子中，我们使用rotate()函数来实现旋转效果，从0度旋转到360度，每次旋转的持续时间为2秒，动画采用线性方式，重复无限次（infinite）。 通过以上代码，我们就可以实现一个不断旋转的大风车动画。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值