IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> CSS——动画{旋转按钮} -> 正文阅读

[游戏开发]CSS——动画{旋转按钮}

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

文章目录


前言

动画和过渡类似,都是可以实现?些动态效果,不同的是过渡需要在某个属性发?变化时才能触发, 例如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、可以同时设置关键帧,?逗号(,)隔开就?

  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-09-13 11:49:37  更:2022-09-13 11:52:00 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/23 17:15:14-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码