建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > HTML5教程 >

纯css3实现下拉箭头、关闭按钮旋转效果

更新时间:2022-11-28整理编辑:建站学习网阅读:0

说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢,因此,在使用一些复杂的特效时,大家需要考虑清楚。不过这样的现象毕竟为数不多。其实很多CSS3技术能够在任何情况下都大幅提高页面的性能。就这一条足以让我们使用CSS3。


HTML代码:

<span class="closeBox" style="margin:0px 120px;">
        <img src="images/cross26.png" class="close">
</span>

CSS代码:

.closeBox{    
    display: inline-block;    
    width: 50px;    
    height: 50px;    
    transition: transform 0.5s;
    -moz-transition: -moz-transform 0.5s; /* Firefox 4 */
    -webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
    -o-transition: -o-transform 0.5s;
}
.closeBox img{
    width: 100%;
}
.closeBox:hover{    
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

纯css3实现下拉箭头、关闭按钮旋转效果


HTML代码:

<div class="menu" id="cssmenu">
      <ul class="clearfix">
          <li class="has-sub">
              <a href="">信息公開<img src="./img/xia.png"></a>
              <ul>
                  <div class="ul">
                      <li><a href="">資訊</a></li>
                      <li><a href="">白皮書</a></li>
                      <li><a href="">關於我們</a></li>
                      <li><a href="">幫助中心</a></li>
                  </div>
              </ul>
           </li>
      <ul>
</div>

CSS代码:

.menu>ul>li.has-sub a img{
    margin-left: 10px;
    transition: transform 0.5s;
}
.menu>ul>li.has-sub a:hover>img{
    transform: rotate(180deg);
}


本文网址:https://www.dedexuexi.com/wysj/html5/3628.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:下拉箭头
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
HTML5新手入门指南
« 上一篇2017年05月09日
如何利用html+css设置菜单栏缓慢下拉效果?
2017年05月09日下一篇 »
  • CSS代码鼠标经过图片变换图片的几种方法
    0阅读
    CSS代码鼠标经过图片变换图片方法如下:方法一:在css中,可以利用“:hover”选择器和“background-image”属性实现鼠标滑过改变图片效果,只需要给图片元素添加“图片元素:hover{background-image:url(新的图片路径);”样式即可。
  • 如何利用html+css设置菜单栏缓慢下拉效果?
    0阅读
    如何利用html+css设置菜单栏缓慢下拉效果?解决方法和相关代码分享如下:方法一:过渡(transition)对forum_box开启绝对定位(absolute),让里面的li从其父元素中脱离出去,不然会把之后的内容往右挤,并且设置overflow:hidden,设置高度为0,鼠标移入后再设置相应...
  • 使用HTML5的Canvas绘制曲线的简单方法
    0阅读
    Canvas2D自带的曲线方法 最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的东西,主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用
  • html两个文字之间有一个空格的解决办法
    0阅读
    碰到过这样一位朋友,在编写的html代码里面出现两个文字间有空格的情况,两个文字之间他没有加空格符,也没有代码。 这个情况在html编码使用不太多或不太熟练的情况下,很难找出问题。
  • 使用HTML5的Notification API制作web通知的教程
    0阅读
    在使用网页版Gmail的时候,每当收到新邮件,屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification API,我们也可以轻松实现这样的功能。 确保浏览器支持 如果你在特定版本的浏览器
 
QQ在线咨询