当前位置: 首页 > news >正文

CSS特效030:日蚀动画

CSS常用示例100+专栏目录

本专栏记录的是经常使用的CSS示例与技巧,主要包含CSS布局,CSS特效,CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点,CSS特效主要是一些动画示例,CSS花边是描述了一些CSS相关的库、知识点、理论篇章等。 因为常用所以记录、展示、分享,希望能给您带来帮助。

文章目录

    • 效果图
    • 源代码
    • CSS基础知识点
    • 结尾语

css实战中,怎么绘制日蚀动画效果呢?这里设置一个圆形当做月亮.moon,而太阳则是moon::before 中的内容。设置太阳的z-index:-1,让其处于月亮的底部,然后给太阳设置一个位置偏移动画,感觉像是被月亮遮起来似的,形成了日蚀。这里注意,设置背景颜色的时候,出不来这种效果,要设置背景图片。

效果图

在这里插入图片描述

源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-12-15
*/
<template><div class="container"><div class="top"><h3>日蚀特效</h3><div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi"><div class="moon"></div></div></div>
</template><style scoped>.container {width: 1000px;height: 600px;margin: 50px auto;border: 1px solid green;}.top {margin: 0 auto 0px;padding: 10px 0;background: darkgoldenrod;color: #fff;}.dajianshi {width: 100%;height: 500px;position: relative;/*  background-color: #182C51; */background-image: linear-gradient(30deg, #182C51, rgba(24,44,81,0.53));display: flex;justify-content: center;align-items: center;z-index: -2;}.moon {background-image: linear-gradient(30deg, rgba(24,44,81,0.98), rgba(24,44,81,0.93));width: 256px;height: 256px;border-radius: 50%;position: relative;}.moon::before {content: '';background-color: #C7938B;position: absolute;display: block;height: 100%;width: 100%;border-radius: 50%;z-index:-1;animation: 3.2s cresent linear infinite alternate;}@keyframes cresent {0% {transform: translate(-30px, 30px) scale(0.9);box-shadow: none;}50% {transform: translate(0px, 0px) scale(1.02);box-shadow: 0 0 10px #C7938B, 0 0 80px 8px #C7938B;background-color: #efdbd8;}100% {transform: translate(30px, -30px) scale(0.9);box-shadow: none;}}
</style>

CSS基础知识点

1.CSS样式表
2.基础选择器:(1)标签选择器,(2)类选择器,(3)id选择器,(4)通配符选择器
3.复合选择器:(1)后代选择器,(2)子选择器,(3)并集选择器,(4)交集选择器,(5)伪类选择器。
4.字体样式属性:(1)字体大小font-size,(2)字体类型font-family,(3)字体粗细font-weight,(4)字体风格font-style
5.文本外观样式:(1)设置文本颜色color,(2)word-spacing,(3)letter-spacing,(4)line-height,(5)text-transform,(6)text-decoration,(7)text-align,(8)text-indent,(9)white-space
6.文本外观属性:(1)text-shadow,(2)overflow
7.CSS层叠性、继承性及优先级
8.边框介绍
8.1边框属性:(1)border-style,(2)border-width,(3)border-color,(4)border-radius
8.2内边距属性
8.3外边距属性
8.4box-shadow
9.背景属性
9.1背景颜色
9.2背景图片:(1)background-repeat,(2)background-position,(3)background-attachment,(4)background-size,(5)background-origin,(6)background-clip,(7)复合写法,(8)不透明
10.元素的类型
11.span标签
12.display
13.表格标签:(1)table标签,(2)tr标签,(3)td标签,(4)th标签,(5)表格边框,(6)折叠边框,(7)表格宽度和高度,(8)表格边框间距border-spacing,(9)表格标题位置caption-side
14.表单
14.1创建表单:(1)标签
14.2表单控件:(1)input控件,(2)input/标签的type属性,(3)textarea控件,(4)select控件
15.CSS盒子模型:(1)边框(border),(2)内边距(padding),(3)外边距(margin),(4)清除内外边距,(5)盒子模型
16.浮动布局:(1)传统网页布局,(2)浮动简介,(3)浮动特性,(4)清除浮动
17.定位布局:(1)定位组成,(2)相对定位relative,(3)绝对定位absolute,(4)子绝父相,(5)固定定位fixed,(6)定位叠放次序z-index,(7)定位拓展
三.其他
1.圆角边框:(1)圆形,(2)圆角矩形
2.盒子阴影
3.文字阴影
4.用户界面样式:(1)鼠标样式 cursor,(2)轮廓线 outline,(3)防止拖拽文本域 resize,
5.过渡 transition

结尾语

CSS的应用无处不在,希望某个片段就能帮助你,欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》,
《 leaflet示例教程100+ 》,
《 Cesium示例教程100+》,
《MapboxGL示例教程100+》。

相关文章:

CSS特效030:日蚀动画

CSS常用示例100专栏目录 本专栏记录的是经常使用的CSS示例与技巧&#xff0c;主要包含CSS布局&#xff0c;CSS特效&#xff0c;CSS花边信息三部分内容。其中CSS布局主要是列出一些常用的CSS布局信息点&#xff0c;CSS特效主要是一些动画示例&#xff0c;CSS花边是描述了一些CSS…...

746.使用最小花费爬楼梯

给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 示例 1&#xf…...

【业务功能篇132】生产环境中出现oom问题,排查思路

1、使用dmesg命令查看系统日志 dmesg |grep -E ‘kill|oom|out of memory’&#xff0c;可以查看操作系统启动后的系统日志&#xff0c;这里就是查看跟内存溢出相关联的系统日志。 2、这时候&#xff0c;需要启动项目&#xff0c;使用ps命令查看进程 ps -aux|grep java命令查…...

如何将html网页免费转为excel?

一、直接复制。 直接复制是最简单有效、快捷的解决方案&#xff0c;操作方法如下&#xff1a; 1、用鼠标像平常复制文本一样&#xff0c;将整个网页表格选中。 2、点击右键&#xff0c;点击“复制”。 3、打开excel软件&#xff0c;鼠标点击任意单元格。 4、点击右键&#…...

手撕分布式缓存---HTTP Server搭建

经过了前两个章节的学习&#xff0c;分布式缓存的存储与新增我们已经实现了&#xff0c;并且对其做了高可用处理。本章节我们剥离和缓存强相关的逻辑&#xff0c;开始搭建一个HTTP服务器&#xff0c;毕竟缓存数据库搭建完之后别人没法访问也是没有用处的。这一章节我们重点学习…...

2. PyTorch——Tensor和Numpy

2.1Tensor和Numpy Tensor和Numpy数组之间具有很高的相似性&#xff0c;彼此之间的互操作也非常简单高效。需要注意的是&#xff0c;Numpy和Tensor共享内存。由于Numpy历史悠久&#xff0c;支持丰富的操作&#xff0c;所以当遇到Tensor不支持的操作时&#xff0c;可先转成Numpy…...

C#随笔 | List.Sort()使用小计

1、使用List.Sort()对基本数值类型数据进行排序 案例&#xff1a;对存放int数据的List进行排序 其实C#中的List的Sort函数中的比较函数CompareTo有三种结果 1, -1 ,0分别代表大&#xff0c;小&#xff0c;相等。默认List的排序是升序排序。 举个例子&#xff1a;在比较函数Co…...

【WebRTC】用WebRTC做即时视频聊天应用

【配套项目源码】 打开即用,设置一个免费的Agora账户就可以实现视频电话。非常好的WebRTC学习和应用项目。 用VSCode打开即可。 https://download.csdn.net/download/weixin_41697242/88630069 【什么是WebRTC?】 WebRTC是一套基于JS的API,能够建立端对端的直接通信,实…...

GPT-4.5 要来了!谷歌大模型 Gemini 确实给够压力

GPT-4 还没用明白&#xff0c;GPT-4.5 就要发布了。 最近&#xff0c;OpenAI 泄露了 GPT-4.5 的发布页面&#xff0c;除了进一步增强复杂推理和跨模态理解&#xff0c;GPT-4.5 增加了一个更加强大的功能——3D。 3D 功能的进一步支持&#xff0c;也就意味着多模态最后一块版图…...

美易官方:加密资产将破坏金融稳定,无法取消就要加强监管

在近日的一次公开演讲中&#xff0c;国际货币基金组织&#xff08;IMF&#xff09;总裁格奥尔基耶娃表示&#xff0c;如果世界各国大量采用加密资产&#xff0c;将会对金融稳定造成破坏&#xff0c;并且无法取消这种破坏&#xff0c;因此需要加强对加密资产的监管。我们的目标是…...

一文读懂Java中的设计模式——适配器模式,对于兼容不同系统特别适用!

适配器模式概念 适配器&#xff08;变压器&#xff09;模式&#xff1a;这种模式的核心是当你想实现一个接口但又不想实现所有接口方法&#xff0c;只想去实现一部分方法时&#xff0c;就用默认的适配器模式&#xff0c;他的方法是在接口和具体实现类中添加一个抽象类&#xf…...

2023年国内外评分前十的项目管理软件推荐

1、进度猫 作为国产项目进度管理软件新秀&#xff0c;是一款以甘特图为向导的轻量级可视化在线项目管理工具 通过甘特图/思维导图为核心进行项目管理计划&#xff0c;使项目经理能够计划、可视化目标和里程碑、设置任务和到期日期。 甘特图进行有序的项目规划&#xff0c;及…...

3.electron之vue3.0的桌面应用程序

如果可以实现记得点赞分享&#xff0c;谢谢老铁&#xff5e; Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中&#xff0c;因此它允许你仅需一个代码仓库&#xff0c;就可以撰写支持 Windows、…...

数字图像处理(实践篇)二十二 使用opencv进行人脸、眼睛、嘴的检测

目录 1 xml文件 2 涉及的函数 3 实践 使用opencv进行人脸、眼睛、嘴的检测。 1 xml文件 方法① 下载 地址:https://github.com/opencv/opencv/tree/master/data/haarcascades 点击haarcascade_frontalface_default.xml文件 对着Raw右键,选择“链接另存为”,选择代码所…...

旺店通·企业奇门对接打通金蝶云星空查询仓库接口与仓库新增接口

旺店通企业奇门对接打通金蝶云星空查询仓库接口与仓库新增接口 接通系统&#xff1a;旺店通企业奇门 旺店通是北京掌上先机网络科技有限公司旗下品牌&#xff0c;国内的零售云服务提供商&#xff0c;基于云计算SaaS服务模式&#xff0c;以体系化解决方案&#xff0c;助力零售企…...

PostgreSQL获取以前的时间

要在 PostgreSQL 中获取前10秒的数据&#xff0c;可以使用以下查询语句&#xff1a; SELECT * FROM your_table WHERE timestamp_column > now() - interval 10 seconds;要获取前 10 分钟的数据&#xff0c;可以使用以下查询语句&#xff1a; SELECT * FROM your_tabl…...

逆向获取某音乐软件的加密(js逆向)

本文仅用于技术交流&#xff0c;不得以危害或者是侵犯他人利益为目的使用文中介绍的代码模块&#xff0c;若有侵权请联系作者更改。 老套路&#xff0c;打开开发者工具&#xff0c;直接开始找到需要的数据位置&#xff0c;然后观察参数&#xff0c;请求头&#xff0c;cookie是…...

C语言—每日选择题—Day42

第一题 1. 下面程序输出的结果是&#xff08;&#xff09; #include <stdio.h> int main () {int x;x printf("I See, Sea in C");printf("x%d" , x); } A&#xff1a;2 B&#xff1a;随机值 C&#xff1a;都不是 D&#xff1a;15 答案及解析 D p…...

jsp文件引用的css修改后刷新不生效问题

问题 在对 JavaWeb 项目修改的过程中&#xff0c;发现修改了 jsp 文件引入的 css 文件的代码后页面的样式没有更新的问题。 原因 导致这个问题的原因可能是因为浏览器缓存的问题。 解决方法 下面介绍两种解决方法&#xff0c;供大家参考&#xff1a; 1、给 link 标签的 c…...

SpringBoot运维中的高级配置

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...