CSS特效026:扇骨打开关闭的动画

CSS常用示例100+专栏目录

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

文章目录

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

css实战中,怎么绘制扇骨打开关闭的动画呢?这里利用transform的rotate旋转特性,并且在不同的百分比时间段,控制的位置不同。同时利用cubic-bezier,是的旋转起来更为丝滑。

效果图

在这里插入图片描述

源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-12-05
*/
<template><div class="container"><div class="top"><h3>扇骨打开关闭的动画</h3><div class="author">大剑师兰特, 还是大剑师兰特,gis-dajianshi</div></div><div class="dajianshi"><div class="one"></div><div class="one"></div><div class="one"></div><div class="one"></div><div class="one"></div><div class="one"></div></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: black;color: #fff;}.dajianshi {width: 100%;height: 400px;text-align: center;position: relative;}.one {width: 70px;height: 280px;position: absolute;top: 100px;border-radius: 5px;border-top: solid 2px rgba(0, 0, 0, .2);border-left: solid 3px rgba(255, 255, 255, .2);border-bottom: solid 3px rgba(0, 0, 0, .2);text-align: center;box-sizing: border-box;transform-origin: center 90%;display: inline-block;backface-visibility: hidden;margin-left: -35px;transform: rotate(0deg);}.one:before {width: 16px;height: 16px;content: "";background-color: white;display: inline-block;border-radius: 8px;bottom: 10px;position: absolute;margin-left: -8px;}.one:nth-child(1) {background-color: purple;animation: purple-move 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;}.one:nth-child(2) {background-color: blue;animation: blue-move 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;}.one:nth-child(3) {background-color: green;animation: green-move 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;}.one:nth-child(4) {background-color: yellow;animation: yellow-move 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;}.one:nth-child(5) {background-color: orange;animation: orange-move 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;}.one:nth-child(6) {background-color: red;animation: red-move 5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;}@keyframes purple-move {0% {transform: rotate(0deg);}30%,70% {transform: rotate(-60deg);}90%,10% {transform: rotate(0deg);}}@keyframes blue-move {0% {transform: rotate(0deg);}30%,70% {transform: rotate(-40deg);}90%,10% {transform: rotate(0deg);}}@keyframes green-move {0% {transform: rotate(0deg);}30%,70% {transform: rotate(-15deg);}90%,10% {transform: rotate(0deg);}}@keyframes yellow-move {0% {transform: rotate(0deg);}30%,70% {transform: rotate(15deg);}90%,10% {transform: rotate(0deg);}}@keyframes orange-move {0% {transform: rotate(0deg);}30%,70% {transform: rotate(40deg);}90%,10% {transform: rotate(0deg);}}@keyframes red-move {0% {transform: rotate(0deg);}30%,70% {transform: rotate(60deg);}90%,10% {transform: rotate(0deg);}}
</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/199173.shtml

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

相关文章

vue创建项目,使用可视化界面安装插件

安装项目&#xff1a; vue create vue-app 选择默认配置就行&#xff0c;也可以按需选择自定义配置 vue ui通过可视化管理项目 通过可视化安装全家桶插件

连接池打满,导致页面夯住

连接池打满&#xff0c;导致页面夯住 1、背景生产环境中访问系统&#xff0c;页面延迟卡顿 2、排产思路 1&#xff09;、查看日志是排查问题的第一要素&#xff08;个人认为&#xff09;&#xff1b;查看日志发现使用com.alibaba.druid.pool设置最大连接数为100&#xff0c;已…

【android开发-15】android中广播broadcast用法详解

1&#xff0c;broadcast类型 在Android中&#xff0c;Broadcast是一种用于在应用程序组件之间传递消息的机制。它允许一个组件&#xff08;发送者&#xff09;将消息发送给其他组件&#xff08;接收者&#xff09;&#xff0c;即使它们之间不存在直接的联系。 Android中的Bro…

挑战音频爬虫的技术迷宫:Watir和Ruby的奇妙合作

概述 音频爬虫是一种可以从网站上抓取音频文件的程序。音频爬虫的应用场景很多&#xff0c;比如语音识别、音乐推荐、声纹分析等。然而&#xff0c;音频爬虫也面临着很多技术挑战&#xff0c;比如音频文件的格式、编码、加密、隐藏、动态加载等。如何突破这些技术障碍&#xf…

整数和浮点数在内存中的存储​(大小端详解)

目录 一、整数在内存中的存储 二、大小端字节序和字节序判断 2.1为什么有大小端?​ 2.2请简述大端字节序和小端字节序的概念&#xff0c;设计一个小程序来判断当前机器的字节序。&#xff08;10分&#xff09;-百度笔试题 方法一&#xff08;char*强制类型转换&#xff09…

迅为RK3588开发板定制Ubuntu和Debian系统-系统定制(无法联网)

在上一个小节中讲解了 ubuntu 和 debian 文件系统的定制&#xff0c;但那是在可以运行脚本正常构 建系统的前提下&#xff0c;而本小节则是针对部分特殊用户无法联网的情况。 在 source 目录下存放了已经构建完成的压缩包&#xff0c;如下图所示 然后使用以下命令将该压缩包解…

Hive SQL的各种join总结

说明 Hive join语法有6中连接 inner join&#xff08;内连接&#xff09;、left join&#xff08;左连接&#xff09;、right join&#xff08;右连接&#xff09;、full outer join&#xff08;全外连接&#xff09;、left semi join&#xff08;左半开连接&#xff09;、cr…

prime靶机打靶记录

靶机下载地址 https://download.vulnhub.com/prime/Prime_Series_Level-1.rar nmap搜索目标 使用nmap -sn 192.168.41.0/24找到目标靶机192.168.41.136 扫描端口&#xff0c;因为是靶机&#xff0c;所以速率直接调了10000 扫出来两个端口22和80&#xff0c;进行详细的扫描 没…

matlab cell转三维矩阵

问题描述 我有一个cell类型的wlf变量&#xff0c;16行4列&#xff0c;每个单元格都是[1000,1]的矩阵&#xff0c;如下图所示 业务含义&#xff1a;代表16个医院的4个业务指标的1000次模拟值&#xff08;蒙特卡洛模拟&#xff09; 我想要处理成[16,4,1000]的三维矩阵&#xff0…

分享116个图片JS特效,总有一款适合您

分享116个图片JS特效&#xff0c;总有一款适合您 116个图片JS特效下载链接&#xff1a;https://pan.baidu.com/s/1WvUvmG1adR2EJG97MiGj3A?pwd6666 提取码&#xff1a;6666 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整…

基于vue+node.js智慧校园学生办证系统

基于vuenode.js智慧校园学生办证系统 摘要&#xff1a;随着计算机技术和网络技术的飞快发展&#xff0c;它加速了国内信息化建设的进程&#xff0c;信息技术对管理改革产生了深远的影响。为了适应新时代的发展趋势&#xff0c;各行各业都高度重视信息化建设。在教育领域&#…

header二

第二题就是在referer添加SQL语句进行注入和上一题步骤一样 第三题 再用上面那个方法就行不通了&#xff0c;多加了一层过滤 1and updatexml(1,"1",1),1) -- 1 1and updatexml(1,concat("1",(select database())),1),1) -- 1 1and updatexml(1,concat("…

律所信息化建设成为趋势,Alpha系统助力律所数字化升级

近些年来&#xff0c;越来越多的律所借助数字化技术进行信息化建设&#xff0c;围绕“智慧律所”建设做了大量的努力。为尽快完成这一目标&#xff0c;经过深入研判&#xff0c;多数律所决定引进“Alpha法律智能操作系统”。该系统以其强大功能为律所智慧化建设注入催化剂。 据…

Python小案例:打印三角形

打印不同形状以及方向的三角形 分析 需要利用循环打印规则 代码部分 userint(input("请输入打印行数&#xff1a;"))# 打印正向直角三角形 def Triangls_01(user_input):for i in range(1,user_input):print("*"*i)# 打印倒向直角三角形 def Triangls_0…

训练lora小模型

训练lora小模型 一&#xff0c;安装部署本地训练环境1&#xff0c;下载源码2&#xff0c;下载模型 二&#xff0c;准备数据1&#xff0c;准备图片2&#xff0c;标注图片 三&#xff0c;修改配置1&#xff0c;修改文件名2&#xff0c;修改配置文件 &#xff0c;install.ps1 四&a…

如何压缩GIF图片?三个方法轻松解决!

GIF图片格式大&#xff0c;社交平台对其有限制&#xff0c;需用图片处理工具压缩。嗨格式压缩大师、PS、EZGIF三种工具可实现压缩。 GIF图片由于其图片格式&#xff0c;本身就会很大&#xff0c;但是微信QQ还有一些其他的社交平台对上传的表情包是有限制的&#xff0c;这个时候…

浅析预付费用户电能管理系统的设计与应用

贾丽丽 安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a;该设计解决了IC卡预付费电能表存在的问题&#xff0c;同时继承了先购电后用电的管理模式.电力部门的管理微机通过RS485网络对电能表进行管理&#xff0c;以防止用户窃电&#xff1b;选用射频卡作为用户卡以…

利用 EC2 和 S3 免费搭建私人网盘

网盘是一种在线存储服务&#xff0c;提供文件存储&#xff0c;访问&#xff0c;备份&#xff0c;贡献等功能&#xff0c;是我们日常中不可或缺的一种服务。 &#x1f4bb;创建实例 控制台搜索EC2 点击启动EC2 选择AMI 选择可免费试用的 g代表采用了Graviton2芯片。 配置存储 配…

物联网水表和4G水表的区别有哪些?

随着科技的发展&#xff0c;水表也不再是传统的机械表&#xff0c;而是经过数字化和智能化改造的物联网水表和4G水表。这两种水表具有很多的不同点。那么&#xff0c;物联网水表和4G水表的区别有哪些&#xff1f; 首先&#xff0c;物联网水表和4G水表的通信方式不同。物联网水表…

Zabbix监控接收SNMPTrap消息与SNMPTT结合

一.SNMP 协议 1.协议介绍 snmp 协议是日常使用的较多的一种协议&#xff0c;绝大多数网络设备/存储等都支持 snmp 协议&#xff0c;通过此协议可以实现设备状态的监控及管理。 2.主要组成 SNMP 协议包括以下三个部分: SNMP Agent&#xff1a;负责处理 snmp 请求&#xff0c…