transition动画效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
     <style type="text/css">
    /* 公用样式 */
        #main{
            width:400px;
            height:350px;
            overflow: hidden;
            position:relative;
            border:1px solid red;
        }

      #show{
          width: 260px;
          height: 300px;
          position: absolute;
          right: -240px;
          top:25px;
          overflow: hidden;
          display: flex;
          flex-direction: row;
          transform-origin:right;
          transition: all 1s ease;
      }
      .fenxiang{
          width: 24px;
          height: 88px;
          background:url('res/htmlLX/fenxiang.gif') no-repeat 0 0;
          display: block;
          position: relative;
          top:88px;
          cursor:pointer;
      }

    </style>
    <script type="text/javascript">
      function show(){
        document.getElementById("show").style.transform="translatex(0px)";
        document.getElementById("show").style.right=0;
      }
    </script>
</head>
<body>
      <div id="main">
          <div id="show" >
              
              <a class="fenxiang" οnclick="show()"></a>
              <img id="img" src="res/htmlLX/fenxiang.png" />
          </div>
      </div>
</body>
</html>

transition动画效果相关推荐

css3 transform transition 动画效果
直接记住这几个transition的配置,就可以做出来漂亮的动画效果了 1.变形--旋转 rotate('旋转值'deg) ,rotate()函数只是旋转,而不会改变元素的形状(旋转值为正顺时针旋转 ...
transform、transition 动画效果
transform 转换,变形 origin 定义旋转基点(left top center right bottom 坐标值) transform-origin: 50px 50px; transfo ...
Android Transition动画
1. 场景过渡动画场景过渡动画是指以动画的形式实现View两个场景的切换,场景过渡动画中有两个特别关键概念:Scene(场景),Transition(过渡). Scene,代表一个场景 Transi ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
性能优化：实现动画效果优先考虑css的transition
在实现页面动画时候,相比于使用js,使用css实现动画效果无疑开销要少很多.因此,推荐优先应该尽可能使用css来实现动画效果.这里面最常用的就是transition属性了.下面举一个例子: .box ...
html渐变显示动画效果,使用CSS transition和animation改变渐变状态
到目前为止,CSS的渐变属性linear-gradient和radial-gradient已经是很成熟的CSS特性了,而且repeating-linear-gradient和conic-gradien ...
如何用transition实现翻书动画效果
下面给大家介绍一个小案例,可以实现翻书的效果,以打开音乐盒为例. 这个案例主要是运用了一个transition的坐标轴,在动画效果中,要求以第二张图片的边缘进行翻页. 代码如下: 先放入两张图片在bo ...
css动画效果 transform transition @keyframes animation 涉及jquery
1.transform: translateY(100px); 但是transform在单独使用的时候并不会产生动画效果, 页面加载的时候就已经在变化后的状态了,所以需要搭配transition使用, ...
Transition(过渡动画效果)
概览这个包中的类为view提供 scenes & transitions结构 Scenes是指一个封装的视图,包括视图层次结构和各种值(布局相关和其他),一个场景可以直接被定义为一个布局层 ...

transition动画效果

transition动画效果相关推荐

最新文章

热门文章