精华内容
下载资源
问答
  • 主要介绍了利用CSS3的transition属性实现滑动效果,是CSS3入门学习时的基本应用,需要的朋友可以参考下
  • CSS transition属性实现滑动式轮播图

    千次阅读 2016-12-01 22:49:59
    是的,趁着在玩轮播我用transition又写了个滑动式的轮播图,...这回我是用JS修改图片的left属性,用CSS的transition来实现动画过程。比如说一个图left: 200px; transition: left 0.3s linear;,然后我用JS把这个图的...
        

    是的,趁着在玩轮播我用transition又写了个滑动式的轮播图,是仿的哔哩哔哩哔哩哔哩。效果看下面咯。

    点我转到CodePen

    思路

    这回我是用JS修改图片的left属性,用CSS的transition来实现动画过程。比如说一个图left: 200px; transition: left 0.3s linear;,然后我用JS把这个图的left改为0,这样图片就有个0.3s的左移动画啦。

    滑动式的轮播图图片是怎么动的呢?

    clipboard.png

    “中间”为轮播图展示区。假设有3张图,我们理下逻辑。

    初始的时候,所有图片都位于“右边”。然后图1到“中间” → 图1到“左边” & 图2到“中间” → 图2到“左边” & 图3到“中间” → 图2图3到“右边” & 图1到“中间”。这样一个循环的过程。

    我用修改类名的方式来修改图片的left值。没有类名的时候图片位于右侧,有active类时图片位于中间,有left类时位于左侧。

    img{
      left: 260px;  /*图片均位于右侧*/
      transition: left 0.3s linear;  /*改变left值实现动画*/
    }
    img.active{
      left: 0;
    }
    img.left{
      left: -260px;
    }

    然后在JS里通过setInterval(code,millisec)来定时执行切换图片的函数。

    代码

    HTML

    <div id="slideshow">
      <!-- 插入轮播的图片们 -->
      <img class="active" src="http://i0.hdslb.com/bfs/archive/1058ca7f23a79f4f0ae0760ad4c08ac9c596f70e.jpg" />
      <img src="http://i0.hdslb.com/bfs/archive/e10fa2ca13cb59b264fce0f9085e1a050cc2dab5.jpg" />
      <img src="http://i0.hdslb.com/bfs/archive/86783a2c790312bb9f5f473896f9d36ec4c1da34.jpg" />
      <!-- 插入轮播的页码们 -->
      <div>
        <span class="active" name="0"></span><span name="1"></span><span name="2"></span>
      </div>
      <!-- 插入图片的描述们 -->
      <p class="active">刀剑乱舞-花丸-</p>
      <p>我太受欢迎了该怎么办</p>
      <p>少女编号</p>
    </div>

    CSS

    *{
      padding: 0; 
      margin: 0;
    }
    /*-- 轮播图整体样式-- */
    #slideshow{
      width: 260px;
      height: 248px;
      margin: 20px auto;
      border-radius: 5px; 
      overflow: hidden;
      position: relative;
    }
    /*-- 图片样式 --*/
    #slideshow img{
      position: absolute;
      top: 0;
      left: 260px;  /*图片均位于右侧*/
      transition: left 0.3s linear;  /*改变left值实现动画*/
    }
    #slideshow img.active{
      left: 0;
    }
    #slideshow img.left{
      left: -260px;
    }
    /*-- 页码样式 --*/
    #slideshow div{
      position: absolute;
      bottom: 0;
      width: 100%;
      line-height: 0;
      text-align: center;
      padding: 5px 0;
      background: rgba(0,0,0,0.7);
    }
    #slideshow span{
      display: inline-block;
      width: 15px;
      height: 10px;
      margin: 0 3px;
      border-radius: 5px;
      background: white;
      transition: width 0.3s;
    }
    #slideshow span.active{
      width: 25px;
      background: rgb(216,83,127);
    }
    /*-- 图片描述的样式 --*/
    #slideshow p{
      position: absolute;
      bottom: 20px;
      width: 100%;
      line-height: 20px;
      font-size: 14px;
      text-indent: 5px;
      color: white;
      background: rgba(0,0,0,0.4);
      cursor: default;
      opacity: 0;
      transition: opacity 0.3s linear;
    }
    #slideshow p.active{
      opacity: 1;
    }

    JS

    //---------主角:轮播图函数-------------
    function slideshow() {
      var slideshow=document.getElementById("slideshow"),
      imgs=slideshow.getElementsByTagName("img"), //图片们
      pages=slideshow.getElementsByTagName("span"), //页码们
      descrips=slideshow.getElementsByTagName("p"), //描述们
      length=imgs.length, //图片数目
      current=1; //current为当前活跃的图片、页码、描述的编号
    
      function changeSlide() { //切换图片的函数
        for (var i=0; i<length; i++) {
          if(i==current) {
            imgs[i].className="active";
            pages[i].className="active";
            descrips[i].className="active";
          } else {
            pages[i].className="";
            descrips[i].className="";
            if(i<current) {
              imgs[i].className="left";
            } else {
              imgs[i].className="";
            }
          }
        }
        current++; //自增1
        if(current>=length) {
          current=0;
        }
      }
    
      //每2s调用changeSlide函数进行图片轮播
      var slideon=setInterval(changeSlide,2000);  
    
      slideshow.onmouseover=function(){
        clearInterval(slideon); //当鼠标移入时清除轮播事件
      }
      slideshow.onmouseout=function(){
        slideon=setInterval(changeSlide,2000); //当鼠标移出时重新开始轮播事件
      }
    
      for(var i=0; i<length; i++) {  //定义鼠标移入页码事件
        pages[i].onmouseover=function(){
          current=this.getAttribute("name");  //得到当前鼠标指的页码
          changeSlide();
        }
      }
    
    }
    
    slideshow();

    完。

    展开全文
  • 与上一文章对比着看效果更佳 img { height:400px; width:1250px; /*使用relative,才能使用left、top性质*/ position:relative; top:0px; left:0px; transition:left 0.5s; } var num = 0; ...

    与上一文章对比着看效果更佳

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    img {
    	height:400px;
    	width:1250px;	
    	/*使用relative,才能使用left、top性质*/
    	position:relative;
    	top:0px;
    	left:0px;
    	transition:left 0.5s;
    }
    </style>
    </head>
    <body>
    <!--overflow:hidden性质使得超出div宽度的部分隐藏-->
    <div id="buju" style="width:250px;height:400px;margin:80px auto;border:2px black solid;overflow:hidden;">
    <img id="tt" src="55.png" alt="tupian" title="coocku"/>
    <script src="js/jquery-1.6.2.min.js"></script>
    <script>
    var num = 0;
    var x = 0;
    $(document).ready(function() {
    	
    	//setInterval("huadong()",3000);
    	huadong();
    });
    function huadong() {
    	num++;
    	
    		if(num<4) {
    			//$("img").animate({left:"-=250"},500);
    			document.getElementById("tt").style.left =x +"px";
    		}
    		else {
    			//$("img").animate({left:0},500);
    			document.getElementById("tt").style.left =0 +"px";
    			x =0;
    			num =0;	
    		}
    		x -= 250;
    		setTimeout("huadong()",3000);
    }
    </script>
    </div>
    </body>
    </html>



    展开全文
  • css滑动的效果

    千次阅读 2011-01-08 18:07:00
    一直以为只有js才能实现一些滑动效果,巧合,今天偶然看到一篇文章,知道了..css滑动效果.想想也挺简单;css:a:hover { padding-left: 6px; } Hover Over Me Hover Over Me Hover Over Me Hover Over Me 这种效果...

    一直以为只有js才能实现一些滑动效果,巧合,今天偶然看到一篇文章,知道了..css滑动的效果.想想也挺简单的;

    css:
    a:hover {
        padding-left: 6px;
     }

     

    <ul>
       <li>
          <a href="#"> Hover Over Me </a>
       </li>
       <li>
          <a href="#"> Hover Over Me </a>
       </li>
       <li>
          <a href="#"> Hover Over Me </a>
       </li>
       <li>
          <a href="#"> Hover Over Me </a>
       </li>
    </ul>


    这种效果有点生硬.
    不生硬的用法是这种:


    ul a {
        -webkit-transition: padding .4s;
        -moz-transition: padding .4s;
        -o-transition: padding .4s;
        transition: padding .4s;
     }
     a:hover {
        padding-left: 6px;
     }

    transition的两个属性(缓动类型,持续时间);
    原文链接:http://sd.csdn.net/a/20110105/289530.html
    展开全文
  • css3 transition按钮动画特效是一款多种不同效果的鼠标按钮滑动切换动画特效。
  • css3 transition按钮动画特效是一款多种不同效果的鼠标按钮滑动切换动画特效。
  • <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">... css3 滑动效果 </title> <meta name="Keywords" content=""> <meta name="Description...
    <!DOCTYPE HTML>
    <html>
     <head>
      <meta charset="utf-8">
      <title> css3 滑动块效果 </title>
      <meta name="Keywords" content="">
      <meta name="Description" content="">
      <style type="text/css">
     .top{position:relative;width:500px;height:50px;top:-50px;background:#ccc;-webkit-transition:top 1s ease;}
     .bottom{position:relative;width:500px;height:50px;margin:-50px 0 0 0;top:300px;background:#000;-webkit-transition:top 1s ease;}
     .mokuai{position:absolute;margin:100px auto 0;width:500px;height:300px;background:#999;overflow:hidden;}
    
      </style>
     </head>
     <body>
    
     <div class='mokuai' id='mokuai'>
     <div class="top" id='top'></div>
     <div class='bottom' id='bottom'></div>
     </div>
     </body>
     <script src="js/jq_mobi_min.js" type="text/javascript"></script>
     <script type="text/javascript">
     <!--
     var con=0;
     var content=document.getElementById('mokuai');
    
     content.onclick=function(){
      if(con==0){
       $('#top').css({'top':'0px'});
       $('#bottom').css({'top':'250px'});
       con=1;
      }
      else{
       $('#top').css({'top':'-50px'});
       $('#bottom').css({'top':'300px'});
       con=0;
      }
     }
     //-->
     </script>
    </html>

     

    转载于:https://www.cnblogs.com/GeekHacker/archive/2012/07/21/2603319.html

    展开全文
  • css transition学习

    2020-05-20 23:43:09
    css transition学习 transition英文意思是过渡,在css中用来展示过渡效果,它和...今天就来学一下css的transition的用法,用熟了可以做出很出彩的效果。 用法 如下所示transition属性可以有4个值,当然这4个值可以分开
  • css transition属性详解

    2015-08-09 17:31:22
    transition 已经被越来越多应用在了移动端网页展示,一期能达到原生app动画效果.比如这个屏幕的滑动. 具体属性详解可参考 http://www.w3chtml.com/css3/properties/transition/transition.html 四个属性...
  • 展开全部CSS3平滑过渡效果让宽度向左滑动的代码为:html>div#transitionhovertree{float:right;width:100px;height:100px;background:blue;transition:width2s;-moz-transition:width2s;/*Firefox4*/-webkit-...
  • 这是一款多组不同效果的css3鼠标悬停按钮滑动切换动画特效,非常漂亮的css3 transition按钮动画特效下载。
  • 如何使用 Vue过渡 与 css 实现类似jQueryslide系列滑动显示隐藏动画? 为了确保这是您需要动画,先上动图和展示 大小受限 清晰度不够 静态收缩前 收缩后 使用 <transition> 标签将要执行过渡DOM...
  • 前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用图标字体设置过渡效果(transition)获得焦点元素(:focus) ...
  • 单个元素动画一个元素显示隐藏:需要用CSSTransition将动画元素包裹起来in={this.state.show} // 一个是否执行动画标准,当in值为true就开始执行入场动画,in值为false就开始执行出场动画timeout...
  • 代码逻辑比较简单,利用css的transform和transition属性实现简单的tab切换效果 贴上代码,仅供参考: html部分: <template> <div class="container"> <div class="flex_c"> <p style=...
  • css3过渡之滑动logo

    2021-04-20 21:37:46
    css3过渡效果练习,实现双logo滑动切换 整体思路: 先准备一个父盒子box用于呈现logo,溢出部分隐藏 放入子盒子son,宽度为box两倍,用于logo之间来回切换 给son盒子添加浮动,使son盒子浮动在...
  • 用一个元素来实现鼠标滑动到某个导航背景效果,文字颜色也运用css3 transition 渐变的效果 当鼠标滑动其他导航时候,加背景元素top值也会随着变化,定位到当前导航上,同时文字字体颜色也会跟着改变; ...
  • 主要就是使用了CSS的:after伪类,再加上一些transition动画效果,设置设置宽度高度,左右距离好像就完事儿了…… 下划线从上到下出现 鼠标放上去,你会发现下划线“生长”出来了,不过页面所有的内容也往下...
  • 要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识。...制作CSS3制作手风琴图片滑动效果,我们仅需利用CSS3的Transition属性和:hover 选择器简单几步就能完成该特效。 制作过程 1,在body中...
  • 在平时我们浏览网页时候,当鼠标滑过某个链接时,经常会看到这样的效果,链接往右滑动了一下,其实想实现这种效果很简单,只要一个transition属性就可以实现,废话不多说,上代码: The HTML <ul> <...
  • 这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是:默认点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来...
  • 该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单。该特效由進擊燊提供。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。
  • CSS3 实现 div 上下滑入滑出效果

    万次阅读 2019-03-05 23:17:01
    CSS3 实现 div 上下滑入滑出效果 本篇内容: 1,首先需要用CSS3 target 选择器,配合a标签指定id选择器切换目标元素,用于选取...滑动效果源代码 &lt;!DOCTYPE html&gt; &lt;html lang="...
  • 该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单。该特效由進擊燊提供。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。有兴趣...
  • css实现点赞效果

    千次阅读 2019-10-12 18:04:11
    然后transition 中 steps控制帧率来实现掩盖滑动效果。 点赞图完全可以自己用PS制作。 <div class="box"></div> .box{ width: 50px; height: 50px; background: url(./dianzan.png) no-repeat;...
  • 最近在研究手机端页面,其中有个简单的图片滑动效果,...大概思路:把当前张显示,上一张定位在最前面,下一张定义在最后面,其他隐藏,通过touchstart、touchmove、touchend 三个事件加上css3的transition变 化效
  • 这款CSS3菜单的特点是鼠标划过时即可以各种动画方式展开和隐藏菜单项,该动画方式由CSS3中的transition-delay属性来完成,具体效果大家可以看演示。 原味地址:http://www.xuecss3.com/htmlcss-8-575-1.html ...

空空如也

空空如也

1 2 3 4
收藏数 74
精华内容 29
热门标签
关键字:

css的transition滑动效果