CSS特效014:模仿钟摆效果

CSS常用示例100+专栏目录

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

文章目录

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

css实战中,怎么实现钟摆的效果呢? 主要实现的方法是利用不同的时间旋转的角度,keyframes中设置了正负50度等时间节点的位置旋转角度,达到不同点不同状态的效果。

效果图

在这里插入图片描述

源代码

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2023-11-19
*/
<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: mediumaquamarine;color: #fff;}.dajianshi {margin: 100px auto 0;width: 6px;height: 240px;background: gray;border-radius: 8px;position: relative;animation: clock 3s linear infinite;transform-origin: top;        }/* 绘制摆球 */.dajianshi::after {content: '';width: 50px;height: 50px;border-radius: 50%;background-color: #222;position: absolute;bottom: 0;left: -20px;}/* 钟摆动画rotate旋转起来 */@keyframes clock {0% {transform: rotate(0deg);}25% {transform: rotate(50deg);}50% {transform: rotate(0deg);}75% {transform: rotate(-50deg);}100% {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/147648.shtml

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

相关文章

buuctf-web-p6 [NPUCTF2020]web 狗

java: HelloWorld.class import java.io.PrintStream;public class HelloWorld {public static void main(String[] paramArrayOfString){System.out.println("众所周知&#xff0c;你是一名WEB选手&#xff0c;掌握javaweb也是一项必备技能&#xff0c;那么逆向个java应…

Shell脚本:Linux Shell脚本学习指南(第一部分Shell基础)一

你好&#xff0c;欢迎来到「Linux Shell脚本」学习专题&#xff0c;你将享受到免费的 Shell 编程资料&#xff0c;以及很棒的浏览体验。 这套 Shell 脚本学习指南针对初学者编写&#xff0c;它通俗易懂&#xff0c;深入浅出&#xff0c;不仅讲解了基本知识&#xff0c;还深入底…

高阶数据结构---树状数组

文章目录 楼兰图腾一个简单的整数问题 一个简单的整数问题2谜一样的牛 一、楼兰图腾OJ链接 二、一个简单的整数问题OJ链接 三、一个简单的整数问题2OJ链接 四、谜一样的牛OJ链接

云原生微服务架构图

云原生微服务架构的具体架构图会根据应用程序的需求、规模和业务场景而有所不同。以下是一个通用的云原生微服务架构图&#xff0c;具体每层的组件可能有所不同&#xff1a; 用户界面层&#xff1a; Web应用或移动应用&#xff1a; 提供用户访问和交互的前端应用。API Gateway&…

【深度学习实验】网络优化与正则化(六):逐层归一化方法——批量归一化、层归一化、权重归一化、局部响应归一化

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、优化算法0. 导入必要的库1. 随机梯度下降SGD算法a. PyTorch中的SGD优化器b. 使用SGD优化器的前馈神经网络 2.随机梯度下降的改进方法a. 学习率调整b. 梯度估计修正 3. 梯度估计修正&#xff1a;动量法Momen…

Elasticsearch 应用

Elasticsearch 的应用 本文使用的版本为&#xff1a;7.14.0 todo:前端部分 Kibana的开发工具 IK分词器粗粒度 # 请求,通过【ik_smart】最粗粒度划分 GET _analyze {"analyzer": "ik_smart","text":"中国共产党" }# 返回 {"to…

Linux:进程替换和知识整合

文章目录 进程程序替换替换原理进程替换的理解 环境变量与进程替换命令行解释器实现逻辑 进程程序替换 前面已经学习了子进程的创建&#xff0c;但是子进程的创建不管怎么说&#xff0c;都是父进程代码的一部分&#xff0c;那么实际上如果想要子进程执行新的程序呢&#xff1f…

GDPU 数据结构 天码行空10

目录 数据结构实验十 树遍历应用一、【实验目的】二、【实验内容】三、【实验源代码】⭐ CPP版⭐ c语言版 四、实验结果 数据结构实验十 树遍历应用 一、【实验目的】 1、了解树的建立方法 2、掌握树与二叉树的转化及其遍历的基本方法 3、掌握递归二叉树遍历算法的应用 二、…

UiPath Studio 2023.10 Crack

UiPath Studio是一款功能强大且用户友好的集成开发环境 (IDE)&#xff0c;专为机器人流程自动化 (RPA) 设计。它由自动化技术领域的领先公司UiPath开发。 以下是 UiPath Studio 的一些主要功能和组件&#xff1a; 图形用户界面 (GUI)&#xff1a;UiPath Studio 具有直观且用户友…

【机器学习】 逻辑回归算法:原理、精确率、召回率、实例应用(癌症病例预测)

1. 概念理解 逻辑回归&#xff0c;简称LR&#xff0c;它的特点是能够将我们的特征输入集合转化为0和1这两类的概率。一般来说&#xff0c;回归不用在分类问题上&#xff0c;但逻辑回归却能在二分类(即分成两类问题)上表现很好。 逻辑回归本质上是线性回归&#xff0c;只是在特…

2311rust,1.31版本更新

1.31.0稳定版 Rust1.31可能是最激动人心的版本! 使用Cargo创建一个新项目: cargo new foo以下是Cargo.toml的内容: [package] name "foo" version "0.1.0" authors ["名字"] edition "2018" //版本. [dependencies]在[package]…

数据采集与大数据架构分享

实现场景 要实现亿级数据的长期收集更新&#xff0c;并对采集后的数据进行整理和加工&#xff0c;用于人工智能的训练数据素材集。 数据采集 java支持的爬虫框架还是有很多的&#xff0c;如&#xff1a;webMagic、Spider、Jsoup等添加链接描述 pipeline处理管道 数据并发开发…

2023年【危险化学品经营单位安全管理人员】考试题及危险化学品经营单位安全管理人员模拟试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 危险化学品经营单位安全管理人员考试题是安全生产模拟考试一点通总题库中生成的一套危险化学品经营单位安全管理人员模拟试题&#xff0c;安全生产模拟考试一点通上危险化学品经营单位安全管理人员作业手机同步练习。…

操作系统(五)| 文件系统上 结构 存取方式 文件目录 检索

文章目录 1 文件系统概述2 文件的结构与存取方式2.1 磁盘2.2 文件的物理结构2.2.1 连续结构2.2.2 链式结构2.2.3 索引结构 2.3 文件的存取方式 3 文件目录3.1 基本概念3.2 目录结构单级目录结构多级目录结构 3.3 文件目录检索3.3.1 目录检索文件寻址 3.4 文件目录的实现 1 文件…

4、FFmpeg命令行操作9

FFmpeg命令提取音视频数据 保留封装格式 ffmpeg -i test.mp4 -acodec copy -vn audio.mp4 ffmpeg -i test.mp4 -vcodec copy -an video.mp4 提取视频 保留编码格式:ffmpeg -i test.mp4 -vcodec copy -an test_copy.h264 强制格式:ffmpeg -i…

从0开始学习JavaScript--JavaScript 字符串与文本内容使用

JavaScript中的字符串和文本内容处理是前端开发中的核心技能之一。本文将深入研究字符串的创建、操作&#xff0c;以及文本内容的获取、修改等操作&#xff0c;并通过丰富的示例代码&#xff0c;帮助读者更全面地了解和应用这些概念。 JavaScript 字符串基础 字符串是JavaScr…

Spark算子 - Python

第1关&#xff1a;Transformation - map # -*- coding: UTF-8 -*- from pyspark import SparkContextif __name__ "__main__":#********** Begin **********## 1.初始化 SparkContext&#xff0c;该对象是 Spark 程序的入口sc SparkContext("local",&qu…

c++23中的新功能之十九继承的CTAD

一、继承 在c编程中&#xff0c;一定是脱离不开继承的。而继承中有很多小的细节需要关注&#xff0c;比如如何显示的使用父类的构造函数&#xff1f;如何通过构造函数来推导模板参数等等。这些小的细节&#xff0c;其实都是在实际应用中对一些相关技术的不断完善。 二、继承的…

微服务实战系列之Nacos

导语 欢迎来到 “Nacos” 的世界&#xff01; Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service的首字母简称&#xff0c;一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 Nacos 致力于帮助您发现、配置和管理微服务。Nacos 提供了一组简单…

Ubuntu环境下以编译源码的方式安装Vim

目录 1. Ubuntu环境 2. 下载编译vim 2.1 效果截图 3. 配置环境变量 1. Ubuntu环境 Linux chris-166 6.2.0-36-generic #37~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Mon Oct 9 15:34:04 UTC 2 x86_64 x86_64 x86_64 GNU/Linux 2. 下载编译vim // 源码下载 chris_166chris-16…