CSS实现旋转风车

article/2025/11/3 16:34:23

CSS实现旋转风车

使用css实现旋转风车主要是运用border和css动画来实现的，效果图如下：
在这里插入图片描述

一、制作风车

首先观察风车是由8个相等形状大小的三角形旋转组成的，可以发现都是围绕一个中心点旋转组成的，所以我们可以先用border画出一个中心点。代码如下：

<!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>/* 不同浏览器对html标签的默认外边距和内边距的值不同，为了统一布局，重置浏览器样式 */* {padding: 0;margin: 0;}body {/* 当前屏幕可见高度的1% */height: 100vh; }        /* 父盒子 box  设置水平垂直居中 */.box {width:10px;height:10px;background-color: red;/* 设置了相对定位，默认居中 */position:relative;/* 以左上角为原点 */top:50%;left:50%;/* 往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 */transform:translate(-50%,-50%); }</style>
</head><body><div class="box"></div>
</body></html>

这样就实现了中心点水平垂直居中在页面，效果如下：
在这里插入图片描述
接下来实现三角形，同样是利用border，先在box父盒子下面设置1个子盒子。

    <div class="box"><div class="triangle"></div></div>

然后先用border画出一个等边的正方形，上下左右边框颜色不同。

.triangle {border-top: 50px solid red;border-right: 50px solid blue;border-bottom: 50px solid yellow;border-left: 50px solid green;}

效果如下：
在这里插入图片描述
border-top：简写属性，用于把上边框的所有属性设置到一个声明中。
border-right：简写属性，用于把右边框的所有属性设置到一个声明中。
border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中。
border-left：简写属性，用于把左边框的所有属性设置到一个声明中。

其他具体的border属性可以在菜鸟教程了解学习。

接下来调整上下左右边框来实现一个三角形。

.triangle {/* 画三角形 transparent：设置透明*/border-top: 150px solid transparent;border-right: 50px solid blue;border-bottom: 50px solid transparent;border-left: 50px solid transparent;}

效果如下：
在这里插入图片描述
然后调整三角形的位置到中心点

.triangle {width: 0;height: 0;position: absolute;/* 移动到中心点(top和left值打开F12来调整) */top: -195px;left: -95px;/* 画三角形 transparent：设置透明*/border-top: 150px solid transparent;border-right: 50px solid blue;border-bottom: 50px solid transparent;border-left: 50px solid transparent;}

在box父盒子下再添加7个子盒子，一共有8个，class名都一致。

<div class="box"><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div>
</div>

这样可以看到页面上有8个一样的三角形（重叠在一起，调整top和left可以发现），接下来给每一个三角形设置属性，由于还有7个需要调整，为了简化代码，可以使用css 伪类选择器。
这里都是用的div标签，可以使用 :nth-of-type() 选择器，指定box父元素后的子元素。

:nth-of-type() ：选择器匹配同类型中的第n个同级兄弟元素。n可以是一个数字，一个关键字，或者一个公式。
使用其他选择器可以参考菜鸟教程中罗列的选择器。
https://www.runoob.com/cssref/css-selectors.html

调整第二个三角形（第一象限橙色三角形）。

 .box div:nth-of-type(1) {top: -201px;left: -10px;border-right: 50px solid orange;/* 旋转 */transform: rotate(45deg);}

效果如下：
在这里插入图片描述
剩下的三角形也是类似的操作，完整的代码和效果如下：

<!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>/* 不同浏览器对html标签的默认外边距和内边距的值不同，为了统一布局，重置浏览器样式 */* {padding: 0;margin: 0;}body {/* 当前屏幕可见高度的1% */height: 100vh;}/* 父盒子 box  设置水平垂直居中 */.box {width: 10px;height: 10px;background-color: red;/* 设置了相对定位，默认居中 */position: relative;/* 以左上角为原点 */top: 50%;left: 50%;/* 往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置 */transform: translate(-50%, -50%);}.triangle {width: 0;height: 0;position: absolute;/* 移动到中心点(top和left值打开F12来调整) */top: -195px;left: -95px;/* 画三角形 transparent：设置透明*/border-top: 150px solid transparent;border-right: 50px solid blue;border-bottom: 50px solid transparent;border-left: 50px solid transparent;}.box div:nth-of-type(1) {top: -201px;left: -10px;border-right: 50px solid orange;/* 旋转 */transform: rotate(45deg);}.box div:nth-of-type(2) {top: -145px;left: 54px;border-right: 50px solid red;transform: rotate(90deg);}.box div:nth-of-type(3) {top: -60px;left: 61px;border-right: 50px solid purple;transform: rotate(135deg);}.box div:nth-of-type(4) {top: 5px;left: 5px;border-right: 50px solid yellow;transform: rotate(180deg);}.box div:nth-of-type(5) {top: 10px;left: -80px;border-right: 50px solid pink;transform: rotate(225deg);}.box div:nth-of-type(6) {top: -45px;left: -145px;border-right: 50px solid green;transform: rotate(270deg);}.box div:nth-of-type(7) {top: -130px;left: -150px;border-right: 50px solid brown;transform: rotate(315deg);}</style>
</head><body><div class="box"><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div><div class="triangle"></div></div>
</body></html>

在这里插入图片描述

二、旋转风车

因为这个风车是以box为中心点，要让整个风车旋转起来就可以通过css3动画让box旋转，整个风车也就会实现旋转的效果。

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

下面制定一个动画run，

 @keyframes run{0%{transform: rotate(0deg);}50%{transform: rotate(180deg);}100%{transform: rotate(360deg);}}

再给box添加animation属性，实现风车3s完成匀速旋转，

animation: run 3s linear ; /* linear:动画从头到尾的速度是相同的。 */

效果如下：

CSS旋转风车（匀速旋转）

css3还有其他动画属性，大家可以在菜鸟教程上了解学习，这里就不一一展示了，如有错误，请大家指正，谢谢大家。


http://chatgpt.dhexx.cn/article/fEtwXyR4.shtml

相关文章

CSS的动画效果-旋转

CSS的动画效果-旋转

开发工具与关键技术&#xff1a;css 撰写时间&#xff1a;2020/7/7 这是简陋的小风车 当我们将鼠标移入到该区域式这个小风车就会旋转起来 这是这个小风车的代码 Html&#xff1a; Css&#xff1a; 本人只是个新手&#xff0c;只是将风车放置Ul标签内&#xff0c;设置ul标签的…
阅读更多...
Css动画效果旋转图片

Css动画效果旋转图片

这次给大家讲解一个有趣的css动画效果哈&#xff0c;那就是旋转图片成一朵花型。 第一步依旧是把img标签敲出来然后把图片放上去。 2.然后开始敲打css样式和效果&#xff0c;先给个class设置一下样式加个定位&#xff0c;因为动画效果需要个定 位才能有效果显示出来。…
阅读更多...
旋转的css动画效果

旋转的css动画效果

需要补习动画属性的可以查看这个文章 效果图 css旋转代码 .image {width: 250px;height: 250px;border-radius: 50%;//定义动画名,持续时间,动画状态,以及持续运行animation: rotate 15s infinite linear;//控制暂停和播放animation-play-state: play;}keyframes rotate {form…
阅读更多...
CSS3 旋转动画

CSS3 旋转动画

效果图 用到图片&#xff1a; 实现&#xff1a; <body><div class"wrap"><image class"figure" src"./staitc/images/figure.png" /><imageclass"circle circle-inner"src"./staitc/images/circle-in…
阅读更多...
纯css图片自动旋转动画

纯css图片自动旋转动画

css能否实现图片自动旋转动画呢&#xff1f;答案当然是肯定的&#xff0c; 首先看下效果&#xff1a; HTML代码 <img src"https://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fimg.yipic.cn%2Fthumb%2Fda6639c9%2F814ac8bc%2Ff0e92a5b%2Fedda1715%2Fbig_da6639c9…
阅读更多...
动画css ---无限旋转

动画css ---无限旋转

前言&#xff1a; 接口返回数据&#xff0c;处理数据后&#xff0c;需要根据状态显示对应的图片 如果是状态为运行中&#xff0c;图片对应的icon图片需要沿中心点旋转起来&#xff08;加一个带有旋转的class类&#xff09; 图片素材 <!DOCTYPE html> <html lang"…
阅读更多...
CSS——动画{旋转按钮}

CSS——动画{旋转按钮}

前面我们一直在学习样式&#xff0c;学习布局&#xff0c;什么浮动啊&#xff0c;定位呀&#xff0c;还有弹性盒子&#xff0c;那么今天我们来看一点不一样的——动画&#xff01; 文章目录 前言一、动画是什么&#xff1f;二、动画的属性 1.过渡2.实际应用和代码演示总结 前言…
阅读更多...
css实现加载旋转动画

css实现加载旋转动画

先看效果&#xff1a; 完整代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport&q…
阅读更多...
CSS基础学习——动画

CSS基础学习——动画

一、CSS3 2D变形&#xff08;利用Transfrom方法&#xff09; 1、rotate&#xff08;angle&#xff09; 元素顺时针旋转给定的角度。允许负值&#xff0c;元素将逆时针旋转。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8…
阅读更多...
深度学习与神经网络

深度学习与神经网络

文章目录 引言1. 神经网络1.1 什么是神经网络1.2 神经元1.3 多层神经网络 2. 激活函数2.1 什么是激活函数2.2 激活函数的作用2.3 常用激活函数解析2.4 神经元稀疏 3. 设计神经网络3.1 设计思路3.2 对隐含层的感性认识 4. 深度学习4.1 什么是深度学习4.2 推理和训练4.3 训练的相…
阅读更多...
【深度学习】你心目中 idea 最惊艳的深度学习领域论文是哪篇？

【深度学习】你心目中 idea 最惊艳的深度学习领域论文是哪篇？

科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名。 我们来看看各路大神是怎么评价的。 论文链接 https://arxiv.org/abs/1410.3916 关于计算机视觉领域&#xff0c;taokongcn分享了几个重要的工作。 1. Fully Convolutional Netw…
阅读更多...
深度学习笔记(三)Cv方向

深度学习笔记(三)Cv方向

一.批量归一化和残差网络 批量归一化 对输入的标准化&#xff08;浅层模型&#xff09; 处理后的任意一个特征在数据集中所有样本上的均值为0、标准差为1。 标准化处理输入数据使各个特征的分布相近。 批量归一化&#xff08;深度模型&#xff09; 利用小批量上的均值和标准差…
阅读更多...
R-C3D:用于时间活动检测的区域3D网络

R-C3D:用于时间活动检测的区域3D网络

论文&#xff1a;R-C3D: Region Convolutional 3D Network for Temporal Activity Detection&#xff08;2017&#xff09; 主要贡献 1.提出一个包括活动候选区和任意长度活动的分类的端到端模型。如下图所示 2.提出在候选区生成和分类部分共享全卷积C3D特征&#xff0c;实现了…
阅读更多...
[翻译]循环神经网络不可思议的有效性

[翻译]循环神经网络不可思议的有效性

[翻译]循环神经网络不可思议的性能 循环神经网络&#xff08;RNN&#xff09;具有神奇的功能。我还记得当我训练我的第一个关于图像字幕的循环网络。在训练了几十分钟后&#xff0c;模型的雏形&#xff08;使用相当随意选择的超参数&#xff09;开始产生对图像有意义的描述&am…
阅读更多...
NNDL 作业8：RNN - 简单循环网络

NNDL 作业8：RNN - 简单循环网络

目录 1. 使用Numpy实现SRN 2. 在1的基础上&#xff0c;增加激活函数tanh 3. 分别使用nn.RNNCell、nn.RNN实现SRN 4. 分析“二进制加法” 源代码&#xff08;选做&#xff09; 5. 实现“Character-Level Language Models”源代码&#xff08;必做&#xff09; 6. 分析“序…
阅读更多...
elman神经网络 python实现_使用深度神经网络进行风格转换（Python实现）

elman神经网络 python实现_使用深度神经网络进行风格转换（Python实现）

在论文(Image Style Transfer Using Convolutional Neural Networks)中(https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf)&#xff0c;风格转换使用了19层VGG网络中的特征&#xff0c;它由一系列卷积层和池…
阅读更多...
深度学习知识图谱笔记

深度学习知识图谱笔记

最近花了几天时间对目前常用神经网络模型(backbone)&#xff0c;生成对抗GAN&#xff0c;模型压缩&#xff0c;NPL&#xff0c;距离计算&#xff0c;优化器进行了分类整理&#xff0c;用简短的几句话对相关特性进行了总结描述&#xff0c;如有误请指正&#xff0c;方便强化记忆…
阅读更多...
深度强化学习综述论文 A Brief Survey of Deep Reinforcement Learning

深度强化学习综述论文 A Brief Survey of Deep Reinforcement Learning

A Brief Survey of Deep Reinforcement Learning 深度强化学习的简要概述 作者&#xff1a; Kai Arulkumaran, Marc Peter Deisenroth, Miles Brundage, Anil Anthony Bharath 文章目录 摘要 Abstract1. 引言 Introduction2. 奖励驱动行为 Reward-Driven Behavior2.1. 马尔科夫…
阅读更多...
深度学习领域，最惊艳的论文！

深度学习领域，最惊艳的论文！

科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名&#xff0c;以下介绍了一些知乎作者心中白月光般存在的深度学习领域论文&#xff0c;看看是否你们拥有同样心目中的The one。 提名一 ResNet和Transformer 作者&#xff1a;王…
阅读更多...
深度学习领域，你心目中 idea 最惊艳的论文是哪篇？

深度学习领域，你心目中 idea 最惊艳的论文是哪篇？

点击上方“视学算法”&#xff0c;选择加"星标"或“置顶” 重磅干货&#xff0c;第一时间送达 来源丨知乎问答&#xff08;回答均已授权&#xff09; 编辑丨极市平台 科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名&a…
阅读更多...
推荐文章

Copyright @ 2022~2023