CSS特效022:小球抛物线效果

CSS常用示例100+专栏目录

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

文章目录

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

css实战中,怎么绘制小球抛物线效果呢?这里利用radial-gradient将小球立体化,通过cubic-bezier来使得小球抛物线化,注意的是横向和纵向的一个合并效果。

效果图

在这里插入图片描述

源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-30
*/
<template><div class="container"><div class="top"><h3>小球抛物线效果</h3><div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi"></div></div>
</template><style scoped>.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: blueviolet;color: #fff;}.dajianshi {height: 100px;width: 100px;		border-radius: 50%;		position: absolute;top: 40px;left: 40px;z-index: 10;animation: to-h 2s 0.4s 1 linear;animation-fill-mode: forwards;}.dajianshi:after {content: '';height: 100px;width: 100px;display: block;border-radius: 50%;background: radial-gradient(circle, #fff 20%, #888 60%, #000);box-shadow: inset 0 0 50px #ddd, 0 0 50px rgba(0,0,0,.7);animation: to-v 2s 0.4s 1 cubic-bezier(.66, .1, 1, .41);animation-fill-mode: forwards;}@keyframes to-v {0% {transform: translateY(40px);}100% {transform: translateY(1000px);}}@keyframes to-h {0% {transform: translateX(40px) scale(1);}100% {transform: translateX(700px) scale(0.45);}}
</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/184347.shtml

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

相关文章

open3d-点云及其操作

open3d提供了一个专门用于点云的数据结构 PointCloud。 class PointCloud(Geometry3D):color # 颜色normals # 法向量points # 点云def __init__(self, *args, **kwargs):"""__init__(*args, **kwargs)Overloaded function.1. __init__(self: open3d.cpu.py…

数据探索:五款免费数据可视化工具概览

数据可视化是解读和传达数据的重要方式&#xff0c;而现在有许多免费的工具可供选择&#xff0c;让您在探索数据时更轻松、更有趣。以下是五款推荐的免费数据可视化工具&#xff1a; Tableau Public&#xff1a; Tableau Public是一款功能强大的可视化工具&#xff0c;能够创建…

宏定义中 ## 和 # 的作用

1. ## 的作用 ## 称为连接符&#xff0c;用来将宏参数或其他的串连接起来。 例1&#xff1a; > #define COMBIN(arg) my##arg则> COMBIN(abc)相当于 myabc 例2&#xff1a;#define CON1(a, b) a##e##b #define CON2(a, b) a##b##00 那么&#xff1a;printf("%f\…

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《基于分布鲁棒优化的广义共享储能容量配置方法》

这个标题涉及到储能系统的容量配置方法&#xff0c;具体而言&#xff0c;是一种基于分布鲁棒优化的广义共享储能容量配置方法。让我们逐步解读&#xff1a; 基于分布鲁棒优化&#xff1a; 这表明该方法采用了一种优化技术&#xff0c;即分布鲁棒优化。分布鲁棒优化通常是指在考…

大数据-之LibrA数据库系统告警处理(ALM-37016 MPPDBServer执行XLOG日志归档命令异常)

告警解释 当集群中的CN实例或者DN实例执行归档命令归档XLOG日志失败时&#xff0c;产生该告警。 在下次执行成功时告警自动恢复。 告警属性 告警ID 告警级别 可自动清除 37016 严重 是 告警参数 参数名称 参数含义 ServiceName 产生告警的服务名称 RoleName 产生…

c++ 执行系统命令

示例一&#xff1a; #include <cstdlib> // 必须包含这个头文件来使用system()int main() {system("sleep 10"); // 塞执行return 0; }程序会等待10秒后&#xff0c;执行完成使用system("sleep 10 &");可以实现非阻塞执行 示例二&#xff1a; …

11.29 C++ 作业

自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数: 初始化函数:void init(int w, int h) 更改宽度的函数:set_w(int w) 更改高度的函数:set_h(int h) 输出该矩形的周长和面积函数:void show() #include <io…

PHP:处理数据库查询数据

注&#xff1a; DB_num_rows($result5)可以替换为mysqli_num_rows($result5) DB_fetch_array($result5)可以替换为mysqli_fetch_assoc($result5) 一、查询单个数据 代码解析 1、SQL语句 查询表www_users中当userid等于变量$_SESSION[UserID]时的depart_code值 $sql &qu…

两台电脑如何快速传输几百G文件,这款文件传输软件真快

当我们需要传输数百GB的文件时&#xff0c;使用传统工具对于大型文件传输来说往往效率低下。这些方法可能需要数小时&#xff0c;甚至数天才能完成传输。然而&#xff0c;现代生活和工作中&#xff0c;我们经常需要以更快速、更高效的方式传输大文件&#xff0c;无论是因为工作…

第72讲:MySQL数据库锁机制剖析:行级锁、间隙锁与临键锁详解及应用指南

文章目录 1.行级锁的概念2.行锁的概念以及基本使用2.1.行锁的概念2.2.常见的SQL语句所对应的行锁类别2.3.行锁的基本使用 3.间隙锁和临键锁的概念以及基本使用3.1.间隙锁和临键锁的概念3.2.间隙锁和临键锁的基本使用 1.行级锁的概念 行级锁指的是&#xff0c;每次操作锁住的是…

11.兔子生崽问题【2023.11.26】

1.问题描述 有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第三个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c;问 第二十个月的兔子对数为多少对&#xff1f; 2.解决思路 3.代码实现 #include<stdio.h> int mai…

儿童绘本故事之乐小鱼的龙舟体验

《乐小鱼的龙舟体验》 Chapter 1: 破浪前行的盛宴在2023年11月26日的清晨&#xff0c;顺德迎来了一场震撼心灵的盛宴——中国龙舟大奖赛。湖面上&#xff0c;龙舟竞渡&#xff0c;破浪前行&#xff0c;为这座城市注入了一份激情的节奏。On the morning of November 26, 2023, …

揭秘近期CSGO市场小幅回暖的真正原因

揭秘近期CSGO市场小幅回暖的真正原因 最近市场小幅度回暖&#xff0c;第一个原因则是到处都在说buff要开租赁了&#xff0c;市场要开始爆燃了。童话听到这些消息实在是绷不住了&#xff0c;出来给大家讲一下自己的看法&#xff0c;大家理性思考一下。 Buff出不出租赁跟市场燃不…

MacBook续命,XCode硬盘占用问题

MacBook续命&#xff0c;XCode硬盘占用问题 参考资料 xcode由于真机运行的时候需要把真机的配置拷贝到 &#xff5e;/Library/Developer/Xcode/iOS\ DeviceSupport 这个文件夹下&#xff0c;这样运行一段时间之后&#xff0c;这个文件夹就大到占满了存储空间&#xff0c;之后…

Structured Streaming的模型介绍与实际操作

微批处理&#xff08;Micro-Batching&#xff09; 微批处理是 Structured Streaming 默认的处理模型。 微批处理 (Micro-batching): 在微批处理模型中&#xff0c;实时数据流被分割成小的批次。这些批次按顺序处理&#xff0c;每个批次处理像一个小的批处理作业。处理完一个…

恋上数据结构与算法之二叉堆

文章目录 需求分析Top K 问题堆堆的基本接口设计二叉堆(Binary Heap)最大堆添加思路交换位置的优化实现 删除思路流程图解实现 replace批量建堆自上而下的上滤自下而上的下滤效率对比复杂度计算实现 完整代码 最小堆比较器解析Top K 问题问题分析代码实现内部方法分析问题 2 堆…

【程序员养生心得】—— 编程之路,健康同行

身为程序员&#xff0c;我们似乎总和亚健康、熬夜、颈椎病等标签紧密相连。但工作虽重要&#xff0c;健康价更高。在此&#xff0c;我想与大家分享一些在编程之路上的养生心得&#xff0c;希望我们都能在职业发展的同时&#xff0c;照顾好自己。 定时休息&#xff0c;活动身体&…

小程序云开发中引入vant

首先看一下云开发中的小程序的目录结构 安装 vant 上面是官方的方法 具体到我们的项目是这样子的 最后&#xff0c;构建一下就可以了

rv1126-rv1109-rk809

是这样的,新来板子走的是rk809部分 然后我的编译方式里面没有,走的是别的方式,打印到log如下,然后就卡死 DDR V1.09 8fef64cfb9 wesley.yao 22/10/25-20:03:00 DDR4, 328MHz BW=16 Col=10 Bk=4 BG=2 CS0 Row=15 CS=1 Die BW=16 Size=512MB change to: 328MHz change to: 528MHz…

重要端口及服务速查

重要端口及服务 TCP/UDP端口列表K8s端口列表portservicedescription21ftp/tftp/vsftpd文件传输协议爆破/嗅探/溢出/后门22ssh远程连接爆破/openssh漏洞23telnet远程连接爆破/嗅探/弱口令25smtp邮件服务邮件伪造53dns域名解析系统域传送/劫持/缓存投毒/欺骗67/68dhcp服务劫持/欺…