CSS——动画{旋转按钮}

article/2025/11/3 16:36:41

前面我们一直在学习样式，学习布局，什么浮动啊，定位呀，还有弹性盒子，那么今天我们来看一点不一样的——动画！

文章目录

  • 前言
  • 一、动画是什么？
  • 二、动画的属性
    • 1.过渡
    • 2.实际应用和代码演示
  • 总结

前言

动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发， 例如hover，acitve时，动画可以⾃动触发动画

transform（元素变形）

可选值：

transform（x,y）,平移 单位px或%（设置的是元素自身高度的%），一个值代表x轴；

scale（x,y）缩放 无单位，是相对于原图片的，一个值代表x,y同时缩放

rotate（deg）；旋转，顺时针，rotateX 以X轴旋转，rotateY 同理，以Y轴旋转

skew（X，Y）,倾斜，单位deg

过渡

transition：属性1，属性2 过渡时间(transition-duration) 过渡速度效果(transition-delay) 过渡开始时间(transition-timing-function)

              属性名(transition-property)：当有多个的属性名是用，隔开

              过渡速度效果：linear 匀速

                           ease 慢-快-慢

                           ease-in 慢速开始

                           ease-out 慢速结束

                           ease-in-out 以慢开始与结束

                           cubic-bezier(n,n,n,n) 贝塞尔曲线  n 取值[0 1]

二、动画

1、使用步骤：

①运用关键帧创建一个动画@keyframes name {}

②animation调用关键帧

2、定义

animation：name(animation-name) 时间(animation-duration) 速度曲线(animation-timing-function) 延迟时间(animation-delay)

         播放次数(animation-iteration-count) 是否反方向播放动画(animation-direction)

                 name：与关键帧名字相同

                 速度曲线：linear 匀速

                          ease 慢-快-慢

                          ease-in 慢速开始

                          ease-out 慢速结束

                          ease-in-out 以慢开始与结束

                          cubic-bezier(n,n,n,n) 贝塞尔曲线  n 取值[0 1]

                          steps(n):数值，n代表动画完成要几步

                 播放次数：n 数值，

                          infinite 循环播放

                 播放方向：normal 默认值，正常播放

                          alternate 轮流反方向

                 执行状态: animation-play-state

                 可选值：  running 默认值  动画执行

                          paused  动画暂停              

                 填充模式: animation-fill-mode

                  可选值：

                          none默认值 动画执行完毕 元素回到原来的位置

                          forwards 动画执行完毕，会停止在动画结束的位置

                          ackwards 动画延时等待时，元素就会处于开始位置

                          both 结合了forwards和ackwards的特点*/

               运行的方向:animation-direction

                 可选值

                    normal  默认值： 从from向to运行，每次都是这样

                    reverse  从to到from运行，每次都是这样

                    alternate  从from向to运行，重复执行动画时反向执行

                    alternate-reverse  从to向from运行，重复执行动画时反向执行

1.旋转按钮

当鼠标hover的时候，按钮有一个旋转和放大的效果

 

 

 

代码如下（示例）：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>旋转按钮</title><style>.button {width: 500px;height: 100px;margin: 50px auto;}.nav {width: 100px;height: 100px;background-repeat: no-repeat;display: inline block;float: left;}@keyframes move {from{ transform: rotate(0deg);}t {transform: rotate(360deg);}}img:hover {transform: rotate(360deg) scale(2);transition:all 2s;}</style></head><body><div class="button"><div class="nav one"><img src="./images/delicious.png" alt=""></div><div class="nav two"><img src="./images/facebook.png" alt=""></div><div class="nav three"><img src="./images/rss.png" alt=""></div><div class="nav four"><img src="./images/twitter.png" alt=""></div><div class="nav five"><img src="./images/yahoo.png" alt=""></div></div></body>
</html>

2.侧边栏动画效果

 

 

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>练习一</title><style>*{padding: 0;margin: 0;}.box{margin: 0 auto;position: relative;}ul{position: fixed;right: 0;top: 40%;list-style: none;}li{position: relative;margin-bottom: 4px;}a{width: 36px;height: 36px;display: block;line-height: 36px;background: #414141;border-radius: 4px 0 0 4px;}span{position: absolute;top: 0;background: #414141;width: 50px;height: 36px;line-height: 36px;padding: 0 20px;font-size: 12px;color: #fff;border-radius: 4px 0 0 4px;opacity: 0;}.a{background: #414141 url("./images/toolbar_05.png") center no-repeat;}.b{background: #414141 url("./images/toolbar_10.png") center no-repeat;}.c{background: #414141 url("./images/toolbar_15.png") center no-repeat;}.d{background: #414141 url("./images/toolbar_19.png") center no-repeat;}li:hover span{background: #C84D49;animation: move 0.2s linear both;}li:hover a{background-color: #bb1914;border-radius: 0;}@keyframes move{0% {display: none;left: 0;}100% {opacity: 1;left: -90px;}}
</style>
</head>
<body><div class="box"><ul><li><a href="#" class="a"></a><span>购物车</span></li><li><a href="#" class="b"></a><span>我的喜欢</span></li><li><a href="#" class="c"></a><span>我的收藏</span></li><li><a href="#" class="d"></a><span>我的钱包</span></li></ul></div>
</body>
</html>

总结

注意：

1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置

 transition-timingfunction 过渡变化曲线（缓动效 果）（选填）

*ease [i:z] 默认值， 慢速开始，先加速，然 后再减速

*linear 匀速运动 ease-in 先慢后快 加速运动 ease-out 先快后慢 减速运动 ease-in-out 以慢速开 始和结束的过渡效果

*steps()分布执⾏过渡 效果 cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数， 值是0-1之间的数值 4 transition-delay 过渡效果的延迟，等待 ⼀段时间后执⾏过渡 （选填） 时间的单位：s和ms 1s=1000ms 5 transition 同时设置过渡相关的所 有属性（选填） 只有⼀个要求，如果要 写延迟， 则两个时间中,第⼀ 个写过渡时间，第⼆个 写延迟时间 2、动画 2.1动画的理解 2、可以同时设置关键帧，⽤逗号（,）隔开就⾏


http://chatgpt.dhexx.cn/article/0j4FLojL.shtml

相关文章

css实现加载旋转动画

css实现加载旋转动画

先看效果&#xff1a; 完整代码如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport&q…
阅读更多...
CSS基础学习——动画

CSS基础学习——动画

一、CSS3 2D变形&#xff08;利用Transfrom方法&#xff09; 1、rotate&#xff08;angle&#xff09; 元素顺时针旋转给定的角度。允许负值&#xff0c;元素将逆时针旋转。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8…
阅读更多...
深度学习与神经网络

深度学习与神经网络

文章目录 引言1. 神经网络1.1 什么是神经网络1.2 神经元1.3 多层神经网络 2. 激活函数2.1 什么是激活函数2.2 激活函数的作用2.3 常用激活函数解析2.4 神经元稀疏 3. 设计神经网络3.1 设计思路3.2 对隐含层的感性认识 4. 深度学习4.1 什么是深度学习4.2 推理和训练4.3 训练的相…
阅读更多...
【深度学习】你心目中 idea 最惊艳的深度学习领域论文是哪篇？

【深度学习】你心目中 idea 最惊艳的深度学习领域论文是哪篇？

科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名。 我们来看看各路大神是怎么评价的。 论文链接 https://arxiv.org/abs/1410.3916 关于计算机视觉领域&#xff0c;taokongcn分享了几个重要的工作。 1. Fully Convolutional Netw…
阅读更多...
深度学习笔记(三)Cv方向

深度学习笔记(三)Cv方向

一.批量归一化和残差网络 批量归一化 对输入的标准化&#xff08;浅层模型&#xff09; 处理后的任意一个特征在数据集中所有样本上的均值为0、标准差为1。 标准化处理输入数据使各个特征的分布相近。 批量归一化&#xff08;深度模型&#xff09; 利用小批量上的均值和标准差…
阅读更多...
R-C3D:用于时间活动检测的区域3D网络

R-C3D:用于时间活动检测的区域3D网络

论文&#xff1a;R-C3D: Region Convolutional 3D Network for Temporal Activity Detection&#xff08;2017&#xff09; 主要贡献 1.提出一个包括活动候选区和任意长度活动的分类的端到端模型。如下图所示 2.提出在候选区生成和分类部分共享全卷积C3D特征&#xff0c;实现了…
阅读更多...
[翻译]循环神经网络不可思议的有效性

[翻译]循环神经网络不可思议的有效性

[翻译]循环神经网络不可思议的性能 循环神经网络&#xff08;RNN&#xff09;具有神奇的功能。我还记得当我训练我的第一个关于图像字幕的循环网络。在训练了几十分钟后&#xff0c;模型的雏形&#xff08;使用相当随意选择的超参数&#xff09;开始产生对图像有意义的描述&am…
阅读更多...
NNDL 作业8：RNN - 简单循环网络

NNDL 作业8：RNN - 简单循环网络

目录 1. 使用Numpy实现SRN 2. 在1的基础上&#xff0c;增加激活函数tanh 3. 分别使用nn.RNNCell、nn.RNN实现SRN 4. 分析“二进制加法” 源代码&#xff08;选做&#xff09; 5. 实现“Character-Level Language Models”源代码&#xff08;必做&#xff09; 6. 分析“序…
阅读更多...
elman神经网络 python实现_使用深度神经网络进行风格转换（Python实现）

elman神经网络 python实现_使用深度神经网络进行风格转换（Python实现）

在论文(Image Style Transfer Using Convolutional Neural Networks)中(https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf)&#xff0c;风格转换使用了19层VGG网络中的特征&#xff0c;它由一系列卷积层和池…
阅读更多...
深度学习知识图谱笔记

深度学习知识图谱笔记

最近花了几天时间对目前常用神经网络模型(backbone)&#xff0c;生成对抗GAN&#xff0c;模型压缩&#xff0c;NPL&#xff0c;距离计算&#xff0c;优化器进行了分类整理&#xff0c;用简短的几句话对相关特性进行了总结描述&#xff0c;如有误请指正&#xff0c;方便强化记忆…
阅读更多...
深度强化学习综述论文 A Brief Survey of Deep Reinforcement Learning

深度强化学习综述论文 A Brief Survey of Deep Reinforcement Learning

A Brief Survey of Deep Reinforcement Learning 深度强化学习的简要概述 作者&#xff1a; Kai Arulkumaran, Marc Peter Deisenroth, Miles Brundage, Anil Anthony Bharath 文章目录 摘要 Abstract1. 引言 Introduction2. 奖励驱动行为 Reward-Driven Behavior2.1. 马尔科夫…
阅读更多...
深度学习领域，最惊艳的论文！

深度学习领域，最惊艳的论文！

科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名&#xff0c;以下介绍了一些知乎作者心中白月光般存在的深度学习领域论文&#xff0c;看看是否你们拥有同样心目中的The one。 提名一 ResNet和Transformer 作者&#xff1a;王…
阅读更多...
深度学习领域，你心目中 idea 最惊艳的论文是哪篇？

深度学习领域，你心目中 idea 最惊艳的论文是哪篇？

点击上方“视学算法”&#xff0c;选择加"星标"或“置顶” 重磅干货&#xff0c;第一时间送达 来源丨知乎问答&#xff08;回答均已授权&#xff09; 编辑丨极市平台 科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名&a…
阅读更多...
深度学习：STGCN学习笔记

深度学习：STGCN学习笔记

目录标题 基于图神经网络的图分类问题GCN在行为识别领域的应用主要任务研究思路 ST-GCN(SpatialTemporal Graph Convolutional Networks for Skeleton-Based Action Recognition)解读原论文解决问题主要贡献核心思想简介OpenPose 预处理基于人体关键点构造graph构造单帧graph&a…
阅读更多...
神经网络中神经元是什么_是什么使神经网络脆弱

神经网络中神经元是什么_是什么使神经网络脆弱

神经网络中神经元是什么 What do the images below have in common? 以下图片有什么共同点&#xff1f; Most readers will quickly catch on that they are all seats, as in places to sit. It may have taken you less than a second to recognize this common characteri…
阅读更多...
卷积神经网络超详细介绍

卷积神经网络超详细介绍

文章目录 1、卷积神经网络的概念2、 发展过程3、如何利用CNN实现图像识别的任务4、CNN的特征5、CNN的求解6、卷积神经网络注意事项7、CNN发展综合介绍8、LeNet-5结构分析9、AlexNet10、ZFNet10.1 意义10.2 实现方法10.3 训练细节10.4 卷积网络可视化10.6 总结 11、VGGNet11.1 结…
阅读更多...
经典神经网络

经典神经网络

文章目录 第四章 经典网络解读4.1 LeNet-54.1.1 模型介绍4.1.2 模型结构4.1.3 模型特性 4.2 AlexNet4.2.1 模型介绍4.2.2 模型结构4.2.3 模型特性 4.3 ZFNet4.3.1 模型介绍4.3.2 模型结构4.3.3 模型特性 4.4 Network in Network4.4.1 模型介绍4.4.2 模型结构4.4.3 模型特点 4.5…
阅读更多...
卷积神经网络 CNN 学习

卷积神经网络 CNN 学习

什么是神经网络 人工神经网络&#xff08;artificial neural network&#xff0c;ANN&#xff09;&#xff0c;简称神经网络&#xff08;neural network&#xff0c;NN&#xff09;&#xff0c;是一种模仿生物神经网络的结构和功能的数学模型或计算模型。神经网络由大量的人工…
阅读更多...
【CS224W】(task7)标签传播与节点分类（semi-supervised）

【CS224W】(task7)标签传播与节点分类（semi-supervised）

note 对某一节点的标签进行预测&#xff0c;需要其本身特征、邻居的标签和特征。message passing的假设是图中相似的节点之间会存在链接&#xff0c;也就是相邻节点有标签相同的倾向。这种现象可以用homophily&#xff08;相似节点倾向于聚集&#xff09;、influence&#xff…
阅读更多...
4.经典网络

4.经典网络

文章目录 第四章 经典网络解读4.1 LeNet-54.1.1 模型介绍4.1.2 模型结构4.1.3 模型特性 4.2 AlexNet4.2.1 模型介绍4.2.2 模型结构4.2.3 模型特性 4.3 ZFNet4.3.1 模型介绍4.3.2 模型结构4.3.3 模型特性 4.4 Network in Network4.4.1 模型介绍4.4.2 模型结构4.4.3 模型特点 4.5…
阅读更多...
推荐文章

Copyright @ 2022~2023