CSS——动画{旋转按钮}

最新推荐文章于 2024-04-20 11:53:06 发布

书棋06

最新推荐文章于 2024-04-20 11:53:06 发布

阅读量3.7k

点赞数 1

本文链接：https://blog.csdn.net/m0_72975897/article/details/126752446

版权

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

文章目录

前言
一、动画是什么？
二、动画的属性
- 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、可以同时设置关键帧，⽤逗号（,）隔开就⾏

书棋06

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS——动画{旋转按钮}

动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发，例如hover，acitve时，动画可以⾃动触发动画transform（元素变形）可选值：transform（x,y）,平移单位px或%（设置的是元素自身高度的%），一个值代表x轴；scale（x,y）缩放无单位，是相对于原图片的，一个值代表x,y同时缩放旋转，顺时针，rotateX 以X轴旋转，rotateY 同理，以Y轴旋转skew（X，Y）,倾斜，单位deg过渡。
复制链接

扫一扫