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+》。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/217615.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker知识点整理

Docker和虚拟机技术的区别&#xff1a; 传统的虚拟机&#xff0c;可以虚拟出一条硬件&#xff0c;运行一个完整的操作系统&#xff0c;在这个操作系统上安装和运行所需的软件 容器内的应用可以直接运行在宿主 主机的内核中&#xff0c;容器没有自己的内核&#xff0c;也不用虚…

【桌面应用开发】Tauri是什么?基于Rust的桌面应用

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

网络基础(十):DHCP原理与配置

目录 1、DHCP的概念 2、使用DHCP的优势 3、DHCP的分配方式 4、可分配的地址信息 5、DHCP的工作原理&#xff08;租约过程&#xff09; 6、DHCP动态配置主机地址&#xff08;使用eNSP软件配置&#xff09; 1、DHCP的概念 DHCP(Dynamic HostConfiguration Protocol&#x…

树莓派,opencv,Picamera2利用舵机云台追踪特定颜色对象

一、需要准备的硬件 Raspiberry 4b两个SG90 180度舵机&#xff08;注意舵机的角度&#xff0c;最好是180度且带限位的&#xff0c;切勿选360度舵机&#xff09;二自由度舵机云台&#xff08;如下图&#xff09;Raspiberry CSI 摄像头 组装后的效果&#xff1a; 二、项目目标…

【Spring Boot 】Spring Boot 常用配置总结

文章目录 前言1.多环境配置application.propertiesapplication.yaml 2.常用配置3.配置读取4.自定义配置 前言 在涉及项目开发时&#xff0c;通常我们会灵活地把一些配置项集中在一起&#xff0c;如果你的项目不是很大的情况下&#xff0c;那么通过配置文件集中不失为一个很好的…

perl脚本中使用eval函数执行可能有异常的操作

perl脚本中有时候执行的操作可能会引发异常&#xff0c;为了直观的说明&#xff0c;这里举一个json反序列化的例子&#xff0c;脚本如下&#xff1a; #! /usr/bin/perl use v5.14; use JSON; use Data::Dumper;# 读取json字符串数据 my $json_str join(, <DATA>); # 反…

linux 应用开发笔记---【信号:基础】

1.基本概念 信号是发生事件时对进程的通知机制&#xff0c;也可以称为软件中断 信号的目的是用来通信的 1.硬件发生异常&#xff0c;将错误信息通知给内核&#xff0c;然后内核将相关的信号给相关的进程 2.在终端输入特殊字符产生特殊信号 3.进程调用kill()将任意信号发送…

开发人员必须掌握的几个高级命令

xargs命令 在平时的使用中,我认为 xargs 这个命令还是较为重要和方便的。我们可以通过使用这个命令,将命令输出的结果作为参数传递给另一个命令。 比如说我们想找出某个路径下以 .conf 结尾的文件,并将这些文件进行分类,那么普通的做法就是先将以 .conf 结尾的文件先找出…

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

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

GitHub Universe 2023 Watch Party in Shanghai:在开源世界中找到真我

文章目录 ⭐ 前言⭐ “我”的开源之旅⭐ 为什么要做开源⭐ 要如何做好开源⭐ 开源的深度影响⭐ 小结 ⭐ 前言 周末有幸参加了在上海举行的 GitHub Universe 2023 Watch Party&#xff0c;这是一个充满激情和活力的开源开发者日。我有幸聆听了一场特别令人印象深刻的演讲&#…

“注我“合作伙伴or竞品分析。# 持续更新

"注我"的定位 合作或者竞品介绍 请问分析一个科技产品竞品的时候应该带着什么思维、问题、角度、框架或者系统去问&#xff1f; 在分析科技产品的竞品时&#xff0c;以下思维、问题、角度、框架或系统可能会有所帮助&#xff1a; 思维&#xff1a; 竞争思维&…

【c++随笔16】reserve之后,使用std::copy会崩溃?

【c随笔16】reserve之后&#xff0c;使用std::copy会崩溃? 一、reserve之后&#xff0c;使用std::copy会崩溃?二、函数std::reserve、std::resize、std::copy1、std::resize&#xff1a;2、std::reserve&#xff1a;3、std::copy&#xff1a; 三、崩溃原因分析方案1、你可以使…

Windows下使用CMake编译lua

Lua 是一个功能强大、高效、轻量级、可嵌入的脚本语言。它支持程序编程、面向对象程序设计、函数式编程、数据驱动编程和数据描述。 Lua的官方网站上只提供了源码&#xff0c;需要使用Make进行编译&#xff0c;具体的编译方法为 curl -R -O http://www.lua.org/ftp/lua-5.4.6.…

GAN的原理分析与实例

为了便于理解&#xff0c;可以先玩一玩这个网站&#xff1a;GAN Lab: Play with Generative Adversarial Networks in Your Browser! GAN的本质&#xff1a;枯叶蝶和鸟。生成器的目标&#xff1a;让枯叶蝶进化&#xff0c;变得像枯叶&#xff0c;不被鸟准确识别。判别器的目标&…

vim + ctags 跳转, 查看函数定义

yum install ctags Package ctags-5.8-13.el7.x86_64 already installed and latest version 创建 /home/mzh/pptp-master/tags.sh #!/usr/bin/shWORKDIR/home/mzh/pptp-masterfind ${WORKDIR} -name "*.[c|h]" | xargs ctags -f ${WORKDIR}/tags find /usr/inclu…

排序算法:【冒泡排序】、逻辑运算符not用法、解释if not tag:

注意&#xff1a; 1、排序&#xff1a;将一组无序序列&#xff0c;调整为有序的序列。所谓有序&#xff0c;就是说&#xff0c;要么升序要么降序。 2、列表排序&#xff1a;将无序列表变成有序列表。 3、列表这个类里&#xff0c;内置排序方法&#xff1a;sort( )&#xff0…

大数据讲课笔记1.4 进程管理

文章目录 零、学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;进程概述1、基本概念2、三维度看待进程3、引入多道编程模型&#xff08;1&#xff09;CPU利用率与进程数关系&#xff08;2&#xff09;从三个视角看多进程 4、进程的产生和消亡&#xff08;1&#xf…

平台工程与 DevOps 和 SRE 有何不同?

在现代软件开发和运营的动态领域中 &#xff0c;平台工程、DevOps 和站点可靠性工程 (SRE) 等术语 经常使用&#xff0c;有时可以互换使用&#xff0c;这常常会导致进入或浏览这些领域的专业人员感到困惑。了解这些概念之间的细微差别对于努力构建强大且可扩展的系统的组织至关…

爱智EdgerOS之深入解析安全可靠的开放协议SDDC

一、协议简介 在 EdgerOS 的智慧生态场景中&#xff0c;许多智能设备或传感器的生命周期都与 SDDC 协议息息相关&#xff0c;这些设备可能是使用 libsddc 智能配网技术开发的&#xff0c;也有可能是因为主要功能上是使用其他技术如 MQTT、LoRa 等但是设备的上下线依然是使用上…

构建外卖小程序:技术代码实践

在这个数字化的时代&#xff0c;外卖小程序已经成为餐饮业的一项重要工具。在本文中&#xff0c;我们将通过一些简单而实用的技术代码&#xff0c;向您展示如何构建一个基本的外卖小程序。我们将使用微信小程序平台作为例子&#xff0c;但这些原理同样适用于其他小程序平台。 …