前端小项目:旋转太极

简介: 前端小项目:旋转太极

小项目:太极

Date: November 18, 2022


太极

知识点:

简要介绍所需关键知识


圆角:

用途:为边框设置圆角,若无边框,则会作用到背景上。


这里主要谈谈用百分比:


radius的值是百分比,相当于盒子的宽度和高度的百分比。


举例:


例1 盒子宽高都为100px。border-top-left-radius:50% 就相当于用50px作为半径

构建圆形,此圆形与上左边框的交集,形成圆角。


Code:

<!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>
        .circle{
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            /* 同理:border-radius: 50px;*/
        }
    </style>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

效果:

e9e61511a5c7b07465719d4472be83f2.png

参考:https://blog.csdn.net/weixin_44137575/article/details/114587752


动画:

@keyframes 规则


概念:


在 @keyframes规则中指定了 CSS 样式,动画将在特定时间逐渐从当前样式更改为新样式。


要使动画生效,必须将动画绑定到某个元素。


语法:


使用简写的 animation属性也可以实现与上例相同的动画效果:

animation: name duration timing-function delay iteration-count direction fill-mode;

属性:

886b7cb9e9697fab0918e84ef8ccf51a.png

例子:

<!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>
        @keyframes example {
            from{
                background-color: red;
            }to{
                background-color: yellow;
            }
        }
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: example 5s linear 2s infinite alternate;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果:

颜色逐渐变化

ed7eecb5fda88bc70546af4d806b6923.png

参考:https://www.w3school.com.cn/css/css3_animations.asp


整体代码:

<!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>
        /* 旋转动画设置: */
        @keyframes myAnimation{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
        body{
            background-color: #ccc;
        }
        .taiji{
            width: 0px;
            height: 300px;
            border-radius: 50%;
            border-left: 150px solid white;
            border-right: 150px solid black;
            animation: myAnimation 2s infinite linear;
        }
        .taiji::before,
        .taiji::after{
            width: 50px;
            border: 50px solid white;
            height: 50px;
            border-radius: 50%;
            content: "";
            background-color: black;
            display: block;
            margin-left: -75px;
        }
        .taiji::before{
            border: 50px solid black;
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="taiji"></div>
</body>
</html>

效果:

4d9c48aa5030e42c6551cce1a54fb585.png

相关文章
|
2月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
85 1
|
3月前
|
前端开发 Java 编译器
【前端学java】java基础练习缺少项目?看这篇文章就够了!(完结)
【8月更文挑战第11天】java基础练习缺少项目?看这篇文章就够了!(完结)
40 0
|
27天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
107 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
16天前
|
前端开发 Unix 测试技术
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
28 2
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
307 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
27天前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
1月前
|
前端开发 JavaScript 开发工具
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
34 0
|
1月前
|
Web App开发 前端开发 JavaScript
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
48 0
|
1月前
|
Web App开发 移动开发 前端开发
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
46 0
|
1月前
|
前端开发 API 开发者
🥇前端宝藏:多项目掌握技能的冒险之旅🏆
在前端开发的学习旅程中,实践是提升技能的关键。本文介绍了多个前端项目,包括计算器、天气应用、经典游戏等,涵盖了从React到Svelte的各种技术栈。每个项目都附有在线演示和源代码,旨在帮助读者深入理解实现细节,激励更多人参与实际项目开发。通过这些项目,读者可以将理论知识转化为实践,拓展职业机会。
17 0