zoukankan      html  css  js  c++  java
  • CSS进阶

    CSS简单动画及二三维常用变换

    /*向右移动*/
    .moveRight{
        background-color:#FFF121;
        position:relative;
        animation:moveRightFrame 5s;/*infinite 循环*/
        animation-delay:3s;/*延时*/
        animation-iteration-count:2;/*循环次数*/
        animation-direction:alternate;/*是否轮流反向播放 normal或alternate */
    }
    
    @keyframes moveRightFrame{
        from {left:0px;}
        to {left:200px;}
    }
    @-webkit-keyframes moveRightFrame{/*谷歌浏览器*/
        from {left:0px;}
        to {left:200px;}
    }
    
    /*指定变化过程*/
    @keyframes moveRightFrame1{
        0% {left:0px;}
        25% {left:100px;}
        50% {left:400px;}
        100% {left:800px;}
    }
    @-webkit-keyframes moveRightFrame1{/*谷歌浏览器*/
        0% {left:0px;}
        25% {left:100px;}
        50% {left:400px;}
        100% {left:800px;}
    }
    
    /*属性变化 直接设置标签的style会覆盖此处属性*/
    .propertyChange{
        width:100px;
        background-color:red;
        transition:width 3s, background-color 5s;
        -webkit-transition:width 3s, background-color 5s;
    }
    .propertyChange:hover{
        width:300px;
        background-color:yellow;
    }
    
    /*2D 变换移动 转动 缩放 拉伸*/
    /*旋转*/
    .roateStyle{
        width:100px;
        background-color:red;
        transform:rotate(45deg);
        -ms-transform:rotate(45deg); /* Internet Explorer */
        -moz-transform:rotate(45deg); /* Firefox */
        -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
        -o-transform:rotate(45deg); /* Opera */
    }
    /*移动*/
    .translateStyle{
        width:100px;
        background-color:red;
        transform:translate(50px,100px);
        -ms-transform:translate(50px,100px); /* IE 9 */
        -moz-transform:translate(50px,100px); /* Firefox */
        -webkit-transform:translate(50px,100px); /* Safari and Chrome */
        -o-transform:translate(50px,100px); /* Opera */
    }
    /*缩放*/
    .scaleStyle{
        width:100px;
        background-color:red;
        transform:scale(2,4);
        -ms-transform:scale(2,4); /* IE 9 */
        -moz-transform:scale(2,4); /* Firefox */
        -webkit-transform:scale(2,4);/* Safari and Chrome */
        -o-transform:scale(2,4); /* Opera */
    }
    /*翻转*/
    .skewStyle{
        width:400px;
        /*background-color:red;*/
        border:2px solid black;
        -webkit-transform-style: preserve-3d;/*内部元素3D*/
        -webkit-perspective:150;/*视图距离 透视效果*/
        transform: skew(0deg,20deg);
        -ms-transform: skew(0deg,20deg);    /* IE 9 */
        -webkit-transform: skew(0deg,0deg);    /* Safari and Chrome */
        -o-transform: skew(0deg,20deg);    /* Opera */
        -moz-transform: skew(0deg,20deg);    /* Firefox */
    }
    
    /*3D变换*/
    .skew3D{
        width:100px;
        background-color:yellow;
        /**-webkit-transform-style: preserve-3d;**/
        -webkit-transform: rotateY(130deg);
    }
    
    /*旋转动画*/
    .roatAnimation{
        width:100px;
        /*background-color:yellow;*/
        animation:roatAnimationFrame 3s;
        animation-iteration-count:6;/*循环次数*/
        animation-direction:normal;/*是否轮流反向播放 normal或alternate */
    }
    
    @keyframes roatAnimationFrame{
        from{-webkit-transform: rotateX(0deg)}
        to{-webkit-transform: rotateX(360deg)}
    }
    
    
    /*背景渐变*/
    .sky{
        width:100%;
        height:300px;
        /**    可以设置由上向下 或 左向右 或 指定一定的角度,还可以指定变化的曲线
         *    指定角度后就不可以指定由哪儿到哪儿
         **/
        /*background:-webkit-linear-gradient(top, #0066FF 0%,#ffffee 60%,#ffffff 100%);*/
         background: -webkit-linear-gradient(90deg, #ffffff, #0099FF);
        
    }
    
    
    
    /*滤镜 在线编辑器:http://www.cssfilters.co/#*/
    .filter {
      position: relative;
      -webkit-filter: contrast(150%) saturate(110%);
      filter: contrast(150%) saturate(110%);
    }
    .filter::before {
      content: "";
      display: block;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;
      pointer-events: none;
      mix-blend-mode: multiply;
      background: -webkit-radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
      background: radial-gradient(50% 50%, circle closest-corner, rgba(0, 0, 0, 0) 70, rgba(34, 34, 34, 1));
    }
    
    /*实心圆  增加缩放,移动*/
    .circle_block{
        width: 200px;
        height: 200px;
        position:relative;
        background-color: red;
        color: white;
        text-align: center;
        border-radius: 100px;
        animation:scale1_5 5s infinite,moveRightFrame 3s infinite;
        animation-direction:alternate;
        
        
    }
    @keyframes scale1_5{
        from{ width: 200px;    height: 200px; border-radius: 100px;}
        to{ width: 100px;    height: 100px; border-radius: 50px;}
    }
    
    /*六边形*/
    .hexagon{
        width: 100px;
        height: 55px;
        background: #fc5e5e;
        position: relative;
        margin: 10px auto;
    }
    
    .hexagon:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #fc5e5e;
    }
    
    .hexagon:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #fc5e5e;
    }
    
    /*星星*/
    .star {
        width: 0;
        height: 0;
        margin: 50px 0;
        color: #fc2e5a;
        position: relative;
        display: block;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -moz-transform: rotate(35deg);
        -webkit-transform: rotate(35deg);
        -ms-transform: rotate(35deg);
        -o-transform: rotate(35deg);
    }
    
    .star:before {
        height: 0;
        width: 0;
        position: absolute;
        display: block;
        top: -45px;
        left: -65px;
        border-bottom: 80px solid #fc2e5a;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        content: '';
        -webkit-transform: rotate(-35deg);
        -moz-transform: rotate(-35deg);
        -ms-transform: rotate(-35deg);
        -o-transform: rotate(-35deg);
    }
    
    .star:after {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        display: block;
        top: 3px;
        left: -105px;
        color: #fc2e5a;
        border-right: 100px solid transparent;
        border-bottom: 70px solid #fc2e5a;
        border-left: 100px solid transparent;
        -webkit-transform: rotate(-70deg);
        -moz-transform: rotate(-70deg);
        -ms-transform: rotate(-70deg);
        -o-transform: rotate(-70deg);
    }
    View Code

    index.html

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="cssAnimation.css"/>
        </head>
        <body>
            <div class="skewStyle" style="height:200px;">
                <div class="roatAnimation" style="height:50px;">
                <font size=10>你好</font>
                </div>
            </div>
            
            <div class="sky">
                <div class="circle_block"></div>
                <div class="hexagon"></div>
            </div>
            <div class="star"></div>
            <figure class="filter">
              <img src="http://g.hiphotos.baidu.com/image/pic/item/03087bf40ad162d9ec74553b14dfa9ec8a13cd7a.jpg">
            </figure>
            
        </body>
    </html>

    总的来说,CSS可以制作简单的动画,此类动画实质是两种状态之间的缓慢切换!如:位置、颜色、角度等!

  • 相关阅读:
    JDK1.7.0环境变量配置【Windows】
    QQ游戏百万人同时在线服务器架构实现
    C#关于AutoResetEvent的使用介绍[转载]
    ConcurrentDictionary:.NET 4.0中新的线程安全的哈希表
    大型网站采用的具有稳定性的系统构架
    简单使用Enterprise Library 5.0 中的Cache功能
    来电显示MODEM的的选购指南
    浅谈大型网站动态应用系统架构
    log4net工程中使用备忘
    稳定高效大型系统架构集群中间件开发
  • 原文地址:https://www.cnblogs.com/tengpan-cn/p/6189720.html
Copyright © 2011-2022 走看看