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.mzph.cn/news/223312.shtml

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

相关文章

高级C#技术(二)

前言 本章为高级C#技术的第二节也是最后一节。前一节在下面这个链接 高级C#技术https://blog.csdn.net/qq_71897293/article/details/134930989?spm1001.2014.3001.5501 匿名类型 匿名类型如其名&#xff0c;匿名的没有指定变量的具体类型。 举个例子&#xff1a; 1 创建…

SpringBoot运维中的高级配置

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

k8s1.24+prometheus+grafana容器监控与告警

快速部署k8s-1.24 基础配置[三台centos] 1.关闭防火墙与selinux systemctl stop firewalld systemctl disable firewalld sed -i ‘s/enforcing/disabled/’ /etc/selinux/config setenforce 0 2.添加host记录 cat >>/etc/hosts <<EOF 192.168.180.210 k8s-master…

2023年【烟花爆竹经营单位主要负责人】免费试题及烟花爆竹经营单位主要负责人模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 烟花爆竹经营单位主要负责人免费试题参考答案及烟花爆竹经营单位主要负责人考试试题解析是安全生产模拟考试一点通题库老师及烟花爆竹经营单位主要负责人操作证已考过的学员汇总&#xff0c;相对有效帮助烟花爆竹经营…

前端复制文本、下载图片

复制文本 // 复制 copy(data) {var oInput document.createElement("input");oInput.value data;document.body.appendChild(oInput);oInput.select();document.execCommand("Copy");oInput.style.display "none"; }input不能识别\n&#xf…

vscode报错:建立连接:XHR failed

文章目录 问题解决方案 问题 Windows端ssh远程连接Linux端&#xff0c;Windows端vscode报错&#xff1a;“…XHR failed.” 解决方案 参考&#xff1a;解决 Windows 端 VS Code “无法与 “…“ 建立连接&#xff1a;XHR failed.” 问题 亲测有效。 总结&#xff1a; linux…

TreeSelect 树型选择控件 编辑回显时所选的值与展开后的数据不对应 解决方案

一、业务场景&#xff1a; 最近在使用Vue框架和antd-vue组件库的时候&#xff0c;发现在做编辑回显时** TreeSelect 树型选择控件** 组件的选中的值能拿到&#xff0c;但是在下拉列表的回显位置有偏差。为了大家后面遇到和我一样的问题&#xff0c;给大家分享一下 二、bug信息…

基于ssm毕业生就业管理平台论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本毕业生就业管理平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据信…

Mesh里面的MFB是什么文件,工程重置了能否还原?

答&#xff1a;模方工程重置了以后&#xff0c;如果有备份可以还原。 模方是一款针对实景三维模型的冗余碎片、水面残缺、道路不平、标牌破损、纹理拉伸模糊等共性问题研发的实景三维模型修复编辑软件。模方4.1新增自动单体化建模功能&#xff0c;支持一键自动提取房屋结构&am…

JVM垃圾回收算法

自动化的管理内存资源&#xff0c;垃圾回收机制必须要有一套算法来进行计算&#xff0c;哪些是有效的对象&#xff0c;哪些是无效的对象&#xff0c;对于无效的对象就要进行回收处理。 常见的垃圾回收算法有&#xff1a;引用计数法、标记清除法、标记压缩法、复制算法、分代算…

如何消除视频中的背景噪音

如果你在繁忙的街道上、刮风的日子、或在其他有嘈杂声音的周围拍摄视频&#xff0c;则会产生令人烦恼的噪音。幸运的是&#xff0c;从视频中消除背景噪音并不是一件困难的事情&#xff0c;因为有许多可靠的降噪软件可以提供帮助。本文就收集了3种最佳方法&#xff0c;可帮助你轻…

基于AnolisOS国产操作系统打造Python3.11.0容器基础开发环境

一 背景 随着国内操作系统市场的不断发展&#xff0c;AnolisOS作为一款优秀的国产操作系统&#xff0c;逐渐受到了广大开发者的关注。为了满足Python开发者的需求&#xff0c;本文将介绍如何基于AnolisOS打造Python3.11.0容器基础开发环境&#xff0c;为开发者提供更高效、更稳…

C语言——从终端输入 3 个数 a、b、c,按从大到小的顺序输出。

方式一 #include <stdio.h> int main() {int a, b, c, temp;printf("请输入三个数&#xff1a;\n");scanf("%d %d %d", &a, &b, &c);if (a < b) {temp a;a b;b temp;}if (a < c) {temp a;a c;c temp;}if (b < c) {temp…

[RoarCTF 2019]Easy Calc1 wp

[RoarCTF 2019]Easy Calc1 wp 预测试 手工测试 这个页面实现了一个简单的计算器功能&#xff0c;当输入 11 时能正确返回执行结果 2&#xff0c; 但当输入 11&&ifconfig 之类的表达式时&#xff0c;会出现弹窗&#xff1a; 查看源码 前端页面调用了一个函数&#xf…

掌握 RPC 接口测试:一篇详尽的接口测试手册

RPC 是什么&#xff1f; 远程过程调用协议&#xff08;RPC&#xff09;是一种技术&#xff0c;它允许在不同的机器上执行函数&#xff0c;就好像这些函数是本地调用一样。简单地说&#xff0c;客户端系统透明地从网络上的远程服务器软件请求服务&#xff0c;而无需理解复杂的网…

借助文档控件Aspose.Words,在Java中比较 Word、PDF 和 PPT 文档

文档比较是各个领域的一项关键任务&#xff0c;包括法律、出版和内容管理。它确保准确跟踪和审查对合同、报告或法律协议等文档的更改。Java 开发人员经常寻求高效可靠的方法来执行文档比较&#xff0c;而Aspose提供了强大的解决方案。在这篇博文中&#xff0c;我们将探讨如何高…

浏览器的事件循环机制(Event loop)

事件循环 浏览器的进程模型 何为进程&#xff1f; 程序运行需要有它自己专属的内存空间&#xff0c;可以把这块内存空间简单的理解为进程 每个应用至少有一个进程&#xff0c;进程之间相互独立&#xff0c;即使要通信&#xff0c;也需要双方同意。 何为线程&#xff1f; …

C语言——字符函数和字符串函数(二)

&#x1f4dd;前言&#xff1a; 上一篇文章C语言——字符函数和字符串函数&#xff08;一&#xff09;对字符函数和字符串函数strlen&#xff0c;strcpy和strncpy&#xff0c;strcat和strncat进行了初步的讲解 这篇文章主要再讲解几个我们常用到的其他字符串函数&#xff08;附…

什么是加密和解密?如何进行数据加密和解密操作?

引言 数据加密和解密是信息安全领域中至关重要的概念。在现代通信和数据传输中&#xff0c;加密技术被广泛应用以确保数据的机密性和完整性。本文将介绍什么是加密和解密&#xff0c;以及如何在C语言中进行数据加密和解密的基本操作。 什么是加密和解密&#xff1f; 加密&am…

teamCity使用

1.server部署 2.地址 http://10.172.48.7:32204/favorite/projects?modebuilds 3.新增项目 拉取git项目 编辑配置 复制其他项目配置 步骤1.Maven 步骤2 build image 步骤3 push image 步骤4 deploy to k8s