当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

移动开发第二天CSS3动画

2020-05-06 00:57前端开发基础 人已围观文章来源:未知文章作者:admin

简介CSS3 动画属性 动画属性 描述 @keyframes 规定动画。 animation 所有动画属性的简写属性,除了animation-play-state属性。 ani...

CSS3 动画属性
 
动画属性 描述
 
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了animation-play-state属性。
animation-name 规定@keyframes动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是0。
animation-timing-function 规定动画的速度曲线,默认是“ease”。
animation-delay 规定动画何时开始,默认是0。
animation-iteration-count 规定动画被播放的次数,默认是1,还有infinite(无限)
animation-direction 是否反方向,默认是“normal“,alternate(反方向)   
animation-play-state 规定动画是否正在运行或暂停。默认是"running",还有"pause(停止)"。应用场景:鼠标样式
 
animation-fill-mode 规定动画结束后状态,保持forwards(不回)回到起始backwards(起始状态) 
 
动画简写
 
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
 
列子
animation; first 5s linear 2s infinite alternate;
 
 
animation: name duration timing-function delay iteration-count direction fill-mode;
 
注意: 简写停止动画不包含简写  
暂停动画:animation-play-state: puased; 经常和鼠标经过配合使用
 
动画走回来  animation-direction: alternate
 
保存的位置:animation-fill-mode:forwards
 
 
动画案例
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大数据动态图</title>
 
    <style>
        body {
            background: #555555;
        }
        
        .map {
            position: absolute;
            width: 1000px;
            height: 1000px;
            margin: 50px auto;
            background: url(images/map.png) no-repeat;
        }
        
        .cicle {
            position: absolute;
            width: 6px;
            height: 6px;
            top: 228px;
            left: 546px;
            background: #9e2500;
            border-radius: 50%;
        }
        
        .tb {
            top: 500px;
            left: 659px;
        }
        
        .gz {
            top: 540px;
            left: 552px;
        }
        /* 设置外圈阴影 定位*/
        
        .cicle div[class^="puls"] {
            position: absolute;
            width: 8px;
            height: 8px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 5px 0 #9e2500;
            border-radius: 50%;
            /* 调用动画 */
            animation: big 1.8s linear infinite;
        }
        /* 设置第二个,第三个延时时间 */
        
        .cicle div.puls_2 {
            animation-delay: 0.9s;
        }
        
        .cicle div.puls_3 {
            animation-delay: 1.8s;
        }
        /* 创建动画 */
        
        @keyframes big {
            0% {}
            25% {
                width: 12px;
                height: 12px;
                opacity: 1;
            }
            50% {
                width: 16px;
                height: 16px;
                opacity: 0.8;
            }
            70% {
                width: 24px;
                height: 24px;
                opacity: 0.5;
            }
            100% {
                width: 36px;
                height: 36px;
                opacity: 0;
            }
        }
    </style>
</head>
 
<body>
    <div class="map">
        <div class="cicle">
            <div class="puls_1"></div>
            <div class="puls_2"></div>
            <div class="puls_3"></div>
        </div>
 
        <div class="cicle tb">
            <div class="puls_1"></div>
            <div class="puls_2"></div>
            <div class="puls_3"></div>
        </div>
 
        <div class="cicle gz">
            <div class="puls_1"></div>
            <div class="puls_2"></div>
            <div class="puls_3"></div>
        </div>
 
    </div>
</body>
 
</html>
 
 
--------------------------------------
 
动画曲线
animation-timing-function: 
 
描述
linear 匀速
ease 默认
ease-in 以低速开始
ease-out 以低速结束
ease-in-out 以低速开始和结束
steps() 步数,分段完成 有了steps 不用写linear
 
wite-space:nowrap 强制文章一行内显示
 
 
steps() 应用场景 帧动画
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小熊奔跑</title>
 
    <style>
        body {
            background: rgb(70, 67, 67);
        }
        
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(images/bear.png) no-repeat;
            animation: move .5s steps(8) infinite, run 6s forwards;
        }
        /* 小熊奔跑 */
        /* 谁移动,给谁添加动画 */
        
        @keyframes move {
            0% {}
            100% {
                background-position: -1600px 0;
            }
        }
        /* 小熊移动 */
        
        @keyframes run {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
 
 
</head>
 
 
<body>
    <div></div>
</body>
 
</html>
 
 
 
----------------------------------------------------
 
CSS3 3D转换
 
3D位移: translate3d(x,y,z) 带px单位;
 
3D旋转:rotate3d(x,y,z)
透视:perspective
3D呈现 transfrom-style
 
透视写到被观察的父元素
 
 
translateZ
 
 
3D 转换
 
rotate3d
 
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
 
transform:rotate3d(x,y,z,deg);
 
 
左手法则
 
rotateX正值 往里面翻转 
   负值 往外面翻转
 
rotateY 正值 往右翻转
   负值  往左翻转
 
rotateZ 顺时针旋转
 
transform:rotate3d(x,y,z,deg);
 
3D转换
 
transform-style:preserve-3d;
 
代码给父级元素
 
生效是子元素
 
 
 
-------------------------
浏览器私有前缀
 
-moz- : firefox 火狐
-ms-: 代表IE
-webkit-: 代表safari ,chrome
-o-:代表Opear
 
-----------------------
CSS3
 
1.新的选择器
-----属性选择器 div[class="demo"]
-----结构选择器 nth-child(n) 数字、关键词、公式
nth-of-type() 根据类型去选择
-----伪元素选择器 ::before ::after 
 
2.转换transform 2D 移动translate(x,y)  旋转rotate(45deg)  缩放scale(x,y) 
3D translate3d(x,y,z) rotateX(deg) rotateY(deg) rotateZ(deg)
3.animation animation: 名称 时间 linear infinite无限;
transition 过渡: transition all 5s;
4.浏览器私有前缀
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计103篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们