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,一经查实,立即删除!

相关文章

数据结构的一些结论

任何一颗二叉树的叶子结点在先序、中序、后序遍历中的相对位置不变。最后一趟排序前仍可能没有在最终位置上的排序是插入排序。 B − B^- B−树第一层最少有1个节点&#xff0c;第二层最少有2个&#xff0c;第3层最少有 2 m 2 2 \frac{m}{2} 22m​,第4层最少有 2 ( m 2 ) 2 2 …

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

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

android 13.0 Camera2去掉前置摄像头闪光灯功能

1.概述 在13.0定制化开发中,对于Camera2前置摄像头拍照时闪光灯闪烁一下的问题,是必须要去除的明显影响到使用的功能, 所以根据代码来去掉前置摄像头闪光灯的问题,接下来看具体实现相关功能 2.Camera2去掉前置摄像头闪光灯的核心代码 /packages/apps/Camera2/src/com/andr…

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

连接池打满&#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…

人工智能和程序员

一、介绍人工智能和程序员 人工智能&#xff08;AI&#xff09;是一种模拟人类智能的计算机系统&#xff0c;其目的是让计算机具备类似人类的学习、推理、规划和理解能力。人工智能致力于创建能够感知、适应环境并作出决策的智能体&#xff0c;以解决各种复杂的问题。程序员是…

代码随想录算法训练营第五十六天 | 583. 两个字符串的删除操作,72. 编辑距离

目录 583. 两个字符串的删除操作 72. 编辑距离 583. 两个字符串的删除操作 题目链接&#xff1a;583. 两个字符串的删除操作 看到这一题就感觉很熟悉&#xff0c;实际上就是求最长公共子序列。 但这题出在这里的原因是为了给下一题做铺垫&#xff0c;所以还是换一种思路&#x…

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

目录 一、整数在内存中的存储 二、大小端字节序和字节序判断 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…

Java 为什么叫 Java?

Java 为什么叫 Java &#xff1f; JavaWorld 于 1996 年出版的 Java 小组访谈中提及了 Java 这个名称的由来&#xff0c;外媒 coderoasis 对此进行了整理和介绍。 诞生于 Sun Microsystems 时&#xff0c;这门语言还不叫 Java&#xff0c;而是叫 OAK 。然而 OAK 团队去注册商标…

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…

利用flask将yolov5算法封装成在线推理服务

本脚本主要参考了yolov5工程文件夹下面的detect.py,将yolov5算法封装成了一个在线的推理服务,可以接受app请求,然后推理图片,并将检测结果以json返回,该服务可以供数据标注平台请求。 from flask import * import shutil import json import os import pynvml import pand…

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

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

Java——Object类详解

我们学习的所有类、我们以后定义的所有类&#xff0c;都是Object类的子类&#xff0c;也都具备Object类的所有特性。因此&#xff0c;我们非常有必要掌握Object类的用法。 Object类的基本特性 Object类是所有Java类的根基类&#xff0c;也就意味着所有的Java对象都拥有Object…

jQuery实现3D轮播图

通过CSS3的3D变换和jQuery Transit插件实现了一个3D旋转的图片轮播效果 HTML部分&#xff1a; div id“banner”&#xff1a;定义了一个id为"banner"的div标签&#xff0c;作为图片轮播的容器。 ul: 在"banner"中定义了一个无序列表&#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("…