<!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. 【RF库Collections测试】Remove Values From List

    Name:Remove Values From ListSource:Collections <test library>Arguments:[ list_ | *values ]Remo ...

  2. Ansible常用模块使用

    Ansible官方提供了非常多的模块,还有若干第三方模块,我们也可以自己编写模块. Ansible对远程服务器的操作实际是通过模块完成的,先将模块拷贝到远程服务器,完成操作后,然后在远程服务器上删除该 ...

  3. MPAndroidChart market右边显示不全问题

    //lineChart.setMarkerView(new CustomChartMarkerView(activity, R.layout.line_chart_maker));//add mark ...

  4. linux下getsockopt和setsockopt详解及测试

    linux下getsockopt和setsockopt详解及测试 NAME 名字 getsockopt, setsockopt - get and set options on sockets 获取或 ...

  5. React Native(四)——顶部以及底部导航栏实现方式

    效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...

  6. centos7/nginx/tornado错误异常收集

    临时方法 – 设置系统参数 使用命令setenforce 附: setenforce 设置SELinux 成为enforcing模式 setenforce 设置SELinux 成为permissive ...

  7. thinkphp5.0 实现图片验证效果且能点击图片刷新图片

    思路与文件上传相同,只是验证码一个方法: <img src="{:captcha_src()}" /> 后台文件:app\ceshi\yam <?php name ...

  8. 【github】添加 ssh 秘钥

    1 生成秘钥 打开shell 备注: 123@example.com 为邮箱地址 ssh-keygen -t rsa -C "123@example.com" 此处选Y ,其他都是 ...

  9. linux 文件编码问题

    iconv -f UTF- -t gb18030 file_input -o file_output 上述命令不一定有用. 大概了解下文件编码,和vim里面的编码情况. 1 字符编码基础知识 字符编码 ...

  10. echarts - 树图实现四个层级

    我相信很多人和我一样,制作echats图标时,都会先去demo官网找相同的或者近似的效果,然后再此基础上改进成我们想要的那个. 但是近期混迹某微信群时,我看到一个群友抛出问题说,echarts画树状图 ...