<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style type="text/css">

 a{text-decoration: none;

     color: #EE7A23;}

         .select-self-area .select-btn .i-up-down {

             width: 8px;

             top: 0;

             left: 0; }

         .select-self-area .select-btn .i-up-down i {

             width: 5px;

             height: 2px;

             background-color: #605F5F; }

         .select-self-open .i-up-down .i-up-down-l {

             left: 0;

             -ms-transform: rotate(-40deg);

             transform: rotate(-40deg);

             transition: transform .3s ease-out; }

         .select-self-open .i-up-down .i-up-down-r {

             right: 0;

             -ms-transform: rotate(40deg);

             transform: rotate(40deg);

             transition: all .3s ease-out; }

         .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l {

             -ms-transform: rotate(-40deg);

             transform: rotate(-40deg);

             transition: all .3s ease-out; }

         .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r {

             -ms-transform: rotate(40deg);

             transform: rotate(40deg);

             transition: all .3s ease-out; }

         .i-up-down {

             position: relative;

             display: inline-block;

             width: 14px;

             height: 6px;

             vertical-align: middle;

             z-index: 2;

             -ms-transform: translateY(2px);

             transform: translateY(2px);

             transition: transform .3s ease-out; }

         .i-up-down i {

             position: absolute;

             top: 0;

             width: 8px;

             height: 1px;

             background: #EE7A23; }

         .i-up-down .i-up-down-l {

             left: 0;

             -ms-transform: rotate(40deg);

             transform: rotate(40deg);

             transition: transform .3s ease-out; }

         .i-up-down .i-up-down-r {

             right: 0;

             -ms-transform: rotate(-40deg);

             transform: rotate(-40deg);

             transition: transform .3s ease-out; }

     </style>

     <title>箭头显示</title>

 </head>

 <body>

 <div class="shipping-addr-more">

     <a class="addr-more-btn up-down-btn" href="#">

         more<!--利用css3样式旋转，使箭头变化-->

         <i class="i-up-down">

             <i class="i-up-down-l"></i>

             <i class="i-up-down-r"></i>

         </i>

     </a>

 </div>

 </body>

 </html>

主要是利用css3的transform的旋转变化来修改

其中transtion语法：

transition: property duration timing-function delay;
transition:  过渡效果的 CSS 属性的名称  渡效果需要多少秒或毫秒  过渡效果何时开始

ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in    规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out    规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

css3的一个小demo（箭头hover变化）的更多相关文章

  1. java线程间通信：一个小Demo完全搞懂

    版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程系列文章只是自己知识的总结梳理,都是最基础的玩意,已经掌握熟练的可以绕过. 一.从一个小Demo说起 上篇我们聊到了Java多线程的同步 ...

  2. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  3. Visual Studio 2017 - Windows应用程序打包成exe文件（2）- Advanced Installer 关于Newtonsoft.Json，LINQ to JSON的一个小demo mysql循环插入数据、生成随机数及CONCAT函数 .NET记录-获取外网IP以及判断该IP是属于网通还是电信 Guid的生成和数据修整（去除空格和小写字符）

    Visual Studio 2017 - Windows应用程序打包成exe文件(2)- Advanced Installer   Advanced Installer :Free for 30 da ...

  4. 一周一个小demo — 前端后台的交互实例

    这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...

  5. 从一个小demo开始，体验“API经济”的大魅力

    写在前面 “API经济”这个词是越来越火了,但是"API经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...

  6. 学习react，动手实现一个小demo（仿知乎问答）

    学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...

  7. 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~

    昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...

  8. 环形文字 + css3制作图形 + animation无限正反旋转的一个小demo

    少啰嗦,先看效果图: (注意文字和太极图均可旋转,太极图使用css写成的!) css: /*太极图css--*/ .Taiji { margin: 100px; width: 192px; heigh ...

  9. 写一个小demo过程中遇到的各种问题 学生管理考勤系统（网页模拟）

    添加与新增一些小玩意的1.0.3版本:传送门 各位带哥,这不是你们要的c++.java.c#作业哈 课上要求做个小作业,学生管理考勤系统,原本想着是个练手的好机会,结果只证实了我还是个弟中弟. 设想的 ...

随机推荐

  1. 【GIS】Cesium GLTF

    cd D:\GISSoft\3DsMax2017\COLLADA2GLTF-v2.1.4-windows-Release-x64 COLLADA2GLTF-bin.exe -f tree05.DAE ...

  2. java serialize 浅谈

    对象的串行化(Serialization) 一.串行化的概念和目的 1.什么是串行化 对象的寿命通常随着生成该对象的程序的终止而终止.有时候,可能需要将对象的状态保存下来,在需要时再将对象恢复.我们把 ...

  3. Git和GitHub入门基础

    -----------------------------------------//cd F:/learngit // 创建仓库git init  // 在当前目录下创建空的git仓库------- ...

  4. iOS提交审核：您的 App 正在使用广告标识符 (IDFA)

    本文转载至  https://mp.weixin.qq.com/s?__biz=MzA3NzM0NzkxMQ==&mid=401172721&idx=1&sn=a369cf1b ...

  5. codeforces水题100道 第二十二题 Codeforces Beta Round #89 (Div. 2) A. String Task (strings)

    题目链接:http://www.codeforces.com/problemset/problem/118/A题意:字符串转换……C++代码: #include <string> #inc ...

  6. Android中实现定时器的3中方法

    在Android开发中,定时器一般有以下3种实现方法: 一.采用Handler与线程的sleep(long)方法: 二.采用Handler的postDelayed(Runnable, long)方法: ...

  7. open-falcon之query

    功能 query组件,提供统一的绘图数据查询入口.query组件接收查询请求,根据一致性哈希算法去相应的graph实例查询不同metric的数据,然后汇总拿到的数据,最后统一返回给用户. 配置文件 { ...

  8. poj_1042 贪心算法

    poj 1042 gone fishing 题目要求: 由有n个湖, 按照顺序排列,一个人从第一个湖向最后一个湖行进(方向只能从湖0到湖n-1),途中可以在湖中钓鱼.在每个湖中钓鱼时,开始的5分钟内可 ...

  9. jQuery事件处理（四）

    看了几天,决定整理一下jQuery事件处理的整体设计思路 1.通过add方法给选中的元素注册事件处理程序(通过缓存系统将事件储存到cache,而不是绑定到元素上) a.在存储之前,会为事件处理程序增加 ...

  10. slideout

    这里在原有slideout.js增加了shade的遮罩功能 核心: 1,此插件的使用需要配合dom来用: <!-- 左边 --> <nav id="menu" c ...