css3的一个小demo（箭头hover变化）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6 a{text-decoration: none;
 7     color: #EE7A23;}
 8
 9         .select-self-area .select-btn .i-up-down {
10             width: 8px;
11             top: 0;
12             left: 0; }
13         .select-self-area .select-btn .i-up-down i {
14             width: 5px;
15             height: 2px;
16             background-color: #605F5F; }
17
18         .select-self-open .i-up-down .i-up-down-l {
19             left: 0;
20             -ms-transform: rotate(-40deg);
21             transform: rotate(-40deg);
22             transition: transform .3s ease-out; }
23         .select-self-open .i-up-down .i-up-down-r {
24             right: 0;
25             -ms-transform: rotate(40deg);
26             transform: rotate(40deg);
27             transition: all .3s ease-out; }
28
29
30
31         .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l {
32             -ms-transform: rotate(-40deg);
33             transform: rotate(-40deg);
34             transition: all .3s ease-out; }
35         .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r {
36             -ms-transform: rotate(40deg);
37             transform: rotate(40deg);
38             transition: all .3s ease-out; }
39
40         .i-up-down {
41             position: relative;
42             display: inline-block;
43             width: 14px;
44             height: 6px;
45             vertical-align: middle;
46             z-index: 2;
47             -ms-transform: translateY(2px);
48             transform: translateY(2px);
49             transition: transform .3s ease-out; }
50         .i-up-down i {
51             position: absolute;
52             top: 0;
53             width: 8px;
54             height: 1px;
55             background: #EE7A23; }
56         .i-up-down .i-up-down-l {
57             left: 0;
58             -ms-transform: rotate(40deg);
59             transform: rotate(40deg);
60             transition: transform .3s ease-out; }
61         .i-up-down .i-up-down-r {
62             right: 0;
63             -ms-transform: rotate(-40deg);
64             transform: rotate(-40deg);
65             transition: transform .3s ease-out; }
66
67
68     </style>
69     <title>箭头显示</title>
70 </head>
71 <body>
72 <div class="shipping-addr-more">
73     <a class="addr-more-btn up-down-btn" href="#">
74         more<!--利用css3样式旋转，使箭头变化-->
75         <i class="i-up-down">
76             <i class="i-up-down-l"></i>
77             <i class="i-up-down-r"></i>
78         </i>
79     </a>
80 </div>
81 </body>
82 </html>

<!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>

时间： 2024-07-30 08:52:48

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

javascript 跟随鼠标移动的提示框的一个小demo

下面提供一种跟随鼠标移动的提示框的思路,方便在以后工作中应用,主要是应用到鼠标移动产生的数值来进行移动提示框的定位... CSS代码 .box{height:100px;width:100px;background:orange;position:relative;margin:40px;} .move{height:20px;width:20px;background:red;position:absolute;left:0px;top:0px;display:none;} HTML代码

jQuery 中 ajax 提交数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名问题 ... ajax02.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="form&qu

jQuery 中 ajax 请求数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名和文件图片路径问题 ... ajax01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ajax小例子 </title> </head> <body> <!--

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

最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 1 #define kScreenWidth [UIScreen mainScreen].bounds.size.width 2 #define kScreenHeight [UIScreen mainScreen].bounds.size.height 3 4 #import "mainViewController.h" 5 6 @interface mainViewController

一个小demo的开发日记（〇）

在大概两周(三周?)前,出于某些原因(w)我做了个小demo.(虽然因为各种各样的原因导致做它的时间只有一周多了…所以它还远没有完成OTL) 在目前看来,它主要的亮点啊啥的之类的东西大概可以用下面的(g)视(i)频(f)来代表w: 大概就是一个树木生长的过程,以及一个日夜交替(晚上的星星被gif几乎快压没了). (实际上才没这么点东西!但是没做完什么的TAT) 所用工具是Unity,不过为了性能全写的是Unlit Shader(按我的理解应该是不参与Unity5.x的GI(全局光照).这个Unl

CSS3实现一个小风车【纯DOM+CSS3】

前言用CSS3实现了一个小风车的效果...转转转,挺简单.. 效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小风车-转啊转</title> <style type="text/css"> html { font-size: 10px; } html * {

Cocos实战篇[3.4]——仿COC的一个小Demo总结

[唠叨] 今天结束了本学期任务最为艰巨的项目实训课程,由于项目组里其他成员基本都已经找到实习了,然后他们都去实习了.只留下我和一个小伙伴在一起搞项目实训的小游戏.经过一个月与小伙伴的配合开发,做了一个勉强可以玩的一个小游戏demo,因为平时其他课程也比较繁重,所以游戏做得非常烂~(>_<)~. 我们本来打算做一款类似COC.海盗奇兵.口袋侏罗纪.城堡争霸的城战类的单机Demo.结果--哎说多了都是泪啊,经验不足,吸取教训了. [经验教训] 由于时间比较紧张,加上自身也没有大项目开发的经验,所以

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

这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览首先我们来看一下这个小demo的具体效果. 这个demo中,主要包括了三个步骤,也分别对应了三个功能,分别是注册,登录与留言板功能.而这三个功能基本都借助了前后台交互的几种技术,下面,本K就给大家分别展示一下这三个功能实现的代码. 二.功能实现 1.注册功能与登录功能 1.1 代码展示 1.1.1 注册功能 (1)前段部分 <!DOC

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

昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方法. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text