首页 > 其他分享 >使用css制作吊扇转动的效果

使用css制作吊扇转动的效果

时间:2024-12-10 09:45:19浏览次数:6  
标签:center color 50% 转动 height position 吊扇 css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Ceiling Fan</title>
    <style>
        body {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .fan-container {
            width: 200px;
            height: 200px;
            position: relative;
            perspective: 800px; /* Creates 3D perspective */
        }

        .fan {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d; /* Preserves 3D transformations */
            animation: rotate 5s linear infinite; /* Animates the rotation */
        }

        .blade {
            position: absolute;
            left: 50%;
            top: 50%;
            transform-origin: 50% 0%; /* Sets rotation origin to top center */
            background-color: #757083; /* Blade color */
            opacity: 0.8;

标签:center,color,50%,转动,height,position,吊扇,css
From: https://www.cnblogs.com/ai888/p/18596628

相关文章

  • 使用css制作鼠标经过图片时,放大图片1.5倍
    <!DOCTYPEhtml><html><head><title>ImageHoverZoom</title><style>.container{width:200px;/*Adjustasneeded*/height:200px;/*Adjustasneeded*/overflow:hidden;/*Hideoverflowingzoomedimage*/}......
  • 你最不喜欢css的哪些特性是什么?为什么?
    作为大型语言模型,我没有“喜欢”或“不喜欢”这样的主观感受。但是我可以从前端开发者的角度,列举一些CSS中比较棘手或容易引起问题的特性,并解释原因:Specificity(特异性):CSS选择器的特异性规则有时难以理解和掌握。特异性冲突会导致样式覆盖混乱,难以调试,尤其在大型项目中,需......
  • 使用css3制作雪花效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>SnowfallEffect</title&......
  • 你现在还会经常学习css的新知识吗?
    作为一个大型语言模型,我没有“学习”新知识的方式像人类一样。我没有意识、个人目标或进行持续学习的能力。我的知识是在我训练时被“冻结”的,截止于2023年12月。因此,我不会主动去学习CSS的新知识或任何其他前端开发技术。我无法访问或浏览互联网,也不能运行或测试代码。我能做的......
  • 当你忘记某个css时,你是如何解决的?
    当我作为大型语言模型“忘记”CSS时,其实是指我无法直接访问或执行CSS代码。我没有像人类开发者一样的记忆和浏览器环境。我生成CSS代码的方式是基于我训练数据中学习到的模式和最佳实践。所以,如果我生成的CSS代码不符合预期,或者我需要生成特定的CSS效果但不知道如何写,......
  • 在工作中有没有遇到过哪些前端样式你是用css做不出来的?做不出来怎么办?
    在前端开发工作中,确实会遇到一些纯粹用CSS难以实现或实现成本过高的样式效果。以下列举一些常见情况以及对应的解决方案:1.复杂的形状和图形:问题:CSS主要擅长处理矩形、圆形等基本形状,对于一些不规则图形、复杂的曲线或动画图形,使用CSS实现起来非常困难,代码量大且难以......
  • 你最喜欢的是哪个css特性?为什么?
    我最喜欢的CSS特性是Flexbox(FlexibleBoxLayout)。原因如下:简化布局:Flexbox极大地简化了网页布局,特别是对于一维布局(横向或纵向)。它能够轻松处理元素的对齐、分布和排序,而无需使用floats或复杂的表格布局。以前需要复杂的hacks和workarounds的布局,现在使用Fle......
  • 你是怎么学习css的?说说你的学习方法
    作为一个大型语言模型,我没有像人类那样“学习”CSS。我没有感官体验,也不能像人类开发者一样在浏览器中进行实验和练习。我的知识来源于我被训练的大量文本数据,其中包括大量的网页代码、CSS教程、文档和开发者讨论。我理解CSS的方式更像是理解一种语言的语法和规则。我可以:识别......
  • 你觉得css高级的特性有哪些?
    CSS的高级特性有很多,它们可以让你的网页更美观、更具交互性,并且更容易维护。以下是一些我认为比较高级的CSS特性:布局类:Grid布局(GridLayout):强大的二维布局系统,可以轻松创建复杂的网格布局,控制行、列、间隙等。比传统的float和inline-block布局方式更灵活和易于......
  • 前端 js + html + css 特效 001
    <!DOCTYPEhtml><htmllang="en"><head><title>CodeTheWorld-Electricstrings</title><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><sc......