CSS——动画{旋转按钮}

这篇具有很好参考价值的文章主要介绍了CSS——动画{旋转按钮}。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

文章目录

  • 前言
  • 一、动画是什么?
  • 二、动画的属性
    • 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的时候,按钮有一个旋转和放大的效果

CSS——动画{旋转按钮}

 

CSS——动画{旋转按钮}

 CSS——动画{旋转按钮}

 

代码如下(示例):

<!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.侧边栏动画效果

CSS——动画{旋转按钮}

 

CSS——动画{旋转按钮}

 

代码如下(示例):

<!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、可以同时设置关键帧,⽤逗号(,)隔开就⾏文章来源地址https://www.toymoban.com/news/detail-419002.html

到了这里,关于CSS——动画{旋转按钮}的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包