实现动画风车

最新推荐文章于 2023-10-29 08:39:16 发布
最新推荐文章于 2023-10-29 08:39:16 发布
阅读量655 收藏 2
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A1010574609/article/details/101366680
版权

 

草地
草地

 

风车
风车 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>风车</title>
    <style>
        header{
            /*设置背景图片*/
            background-image: url(caodi.png);
            /*设置宽度*/
            width: 1000px;
            /*设置高度*/
            height: 500px;
            /*设置图片的大小 contain：覆盖容器*/
            background-size: contain;
            /*设置图片不重复显示*/
            background-repeat: no-repeat;
            /*设置图片水平居中*/
            margin-left: auto;
            margin-right: auto;
        }
        section{
            background-image: url(fengche.png);
            background-size: cover;
            background-repeat: no-repeat;

        }
        section:nth-child(1){
            width: 350px;
            height: 350px;
            position: absolute;
            left: 123px;
            top: 50px;
            animation: rotate 2s linear infinite;

        }
        section:nth-child(2){
            width: 150px;
            height: 150px;
            position: absolute;
            left:449px ;
            top: 290px;
            animation: rotate 1s linear infinite;
        }
        section:nth-child(3){
            width: 250px;
            height: 250px;
            position: absolute;
            left:586px ;
            top: 200px;
            animation: rotate 1s linear infinite;
        }
        /*css里面的动画属性*/
        @keyframes rotate {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }

        }
    </style>
</head>
<body>
    <header>
        <section></section>
        <section></section>
        <section></section>
    </header>
</body>
</html>
啃西瓜的小煤球
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python实现大风车动画效果实现
12-24
python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现python实现大风车动画效果实现...
风车动画效果
12-04
web端实现风车效果的动画，纯css动画效果，没有用js,动画绑定
CSS动画
sereasuesue的博客
08-30 329
CSS动画 CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性： 属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3...
@keyframes、transform、animation详解
qq_45629121的博客
02-09 1371
@keyframes、animation与transform详解
CSS之@keyframes属性创建动画示例
cnds123的专栏
11-12 1958
CSS之@keyframes属性创建动画示例 @keyframes是CSS的一种规则，可以用来定义CSS动画的一个周期的行为，创建简单的动画。详见@keyframes - CSS（层叠样式表） | MDN CSS @keyframes 规则 下面是一个动画实际例子的源码： 通过 @keyframes 规则创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和
css动态特效 @keyframes
linan996的博客
10-27 8064
文章目录一.创建动画效果二.在css选择器中引用三.参数解释animation（调用动画以及参数的解释，与-webkit-animation通用）duration（动画执行的时间）timing-function（动画执行的速度）delay（动画延迟多久开始）iteration-count（动画执行的次数）direction（是否轮流播放）四.题外话（一些css函数）1.缩放函数2.旋转函数3.倾斜函数**今天又是咸鱼的一天！！！** 一.创建动画效果 css动画效果创建： 百分比（0%、100%）表示动画
@keyframes css3动画技巧与代码实例
最新发布
猿码互联
10-29 414
CSS3提供了非常强大的动画效果功能，可以通过简单的CSS代码来实现各种动画效果，比如旋转、缩放、闪烁等等。下面介绍一些常用的CSS3动画技巧和代码实例。@keyframes是用来定义动画的关键字，通过定义动画的各个关键帧以及各帧之间的过渡效果，实现动画效果。下面是一个简单的例子，实现一个旋转动画。} }上面的代码定义了一个名为spin的动画，从0度到360度旋转。
HTML5/CSS3实现大风车旋转动画
04-16
解压密码：RJ4587 这次我们要来分享一款很酷的HTML5动画，是一个可以旋转的大风车动画效果，回顾一下利用HTML5实现的旋转动画，我们可以看HTML5/CSS3实现3D旋转陀螺动画，它们的实现都是利用CSS3的transform:rotate...
css3实现旋转风车动画特效特效代码
03-20
css3实现旋转风车动画特效是一款基于CSS3实现的转动的大风车特效下载。
css3实现图片360度旋转及animation、@keyframes的详解
xz182838的博客
07-04 3032
每天记录一点点知识，日积月累下来，你会发现，你已经会的比别人多！！！！！ 下边的两块css代码，可以实现图片360度旋转 @keyframes rotateImage { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } .content-play-cover img { animation: rotateImage 10s linear infinite; width:
微信小程序 Animation实现图片旋转动画示例
01-03
最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画api，然后就改由image+Animation来实现。 首先在wxml中定义image <image class=bth_image2 mode=aspectFit animation={{animation}} src='../../images/***.png'></image> 注意其中的animation属性，image就由它来实现动画。 而{{animation}}我们在js的data中定义 data: { animation: '' }, 改变animati
CSS实现旋转风车
陆之沂的博客
11-24 2849
CSS实现旋转风车
CSS实现旋转木马效果
yigetutouzai的博客
07-13 999
css3新增了很多强大的属性，能够实现很多动画效果，下面让我们来实现一个旋转木马的效果把
CSS3 在使用Modernizr的情况下导致animation失效
陈小峰（iefreer）的专栏
02-01 4983
如果你在CSS中设置了animation，比如.yourDiv{animation: rot 5s linear infinite;}为了浏览器兼容，加载modernizr，这会帮你自动转换。但是注意如果你在JS中动态设置了animation-delay的话，由于modernizr会自动为你添加-webkit-animation属性，这将使得你CSS中设置的animation被覆盖而失效。解决方法
用css制作旋转的立方体
Sharon0408的博客
04-18 1800
作者：安小轩 原文链接：https://juejin.cn/post/7086272341994536974 实现一个旋转的立方体，只需要用css的基本属性就可以实现。我们一起看看吧~ 一：transform 基本属性 transform可以实现元素的2D或3D转换，可以对元素进行旋转，缩放，移动，倾斜等。 基本属性有： 1. 移动 可以整个设置设置属性（translate）,也可以单个设置某个方向的转换 translate(x,y) 2D 转换 translate3.
css3旋转动画
sinat_41292836的博客
11-26 254
html <div class="rotate_bg"> <img class="rotateImages" src="images/01.png" /> </div> css .rotate_bg{ width: 500px; height: 500px; background: #59d1b6; m...
CSS3动画-transition、animation、transform（translate/scale/rotate）
~~
03-19 3174
目录 一、transition（过渡） 1、transition-duration 2、transition-property 3、transition-timing-function 4、transition-delay 二、animation 1、@keyframes 2、animation-timing-function 3、animation-delay 4、animation-iteration-count：检索或设置对象动画的循环次数 5、animation-pla...
HTML5动画中的tranform-origin解析
qq_16462161的博客
06-21 923
本文详细阐述了HTML5动画中的transform-origin的具体用法，并完成了一个通过自转和公转相结合的案例
php动画效果,CSS3动画（一）：5种预载动画效果
weixin_42102933的博客
03-11 326
实现如图所示的动画效果：预载动画一：双旋圈在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。实现如图所示：html代码：css代码：#preloader-1{position: relative;}#preloader-1 span{position: absolute;border:8px solid #fff;border-top:8px solid t...
html风车旋转动画
10-14
要实现HTML风车旋转动画，可以使用CSS3的动画属性。具体实现步骤如下： 1. 创建一个div元素，设置宽高和背景颜色，作为风车的主体。 2. 在div元素内部创建四个div元素，分别代表风车的四个叶片。设置宽高、背景颜色...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值