zoukankan      html  css  js  c++  java
  • 用css,增加按钮的一闪而过。

    像这种鼠标经过或者 DOM元素被触发事件后会有一个一闪而过的动效,是我在开发中根据动画灵感写出来的,具体代码是运用了css的after尾类,所以要大家对尾类处理器又一定了解,开整。

    首先dom结构就如上图一样,其中:

    1:是包裹这两个的元素。
    2:是这次主要操作的元素,通过Cauda来进行尾类的操作。
    3是‘恋爱攻略’。

    如上图这是主要的css样式,(这里我用到是less css处理器),其中我红圈圈的css样式,和我箭头指到的样式 是主要的代码,这里Img_Cudda,的宽度一定要是内容的高度和宽度这一点要注意。

    剩下的就交给大家细品了,说道这里应该要整理一波代码了,不能广发图片是不是,哈哈哈。,带代码如下:

        <!-- 恋爱攻略 -->DOM元素
                   <div class="Img_Cudda">
                       <div class="Cudda"></div>
                       <img  class="live_" src="" alt="">
                    </div>
      .Img_Cudda{//恋爱攻略    这是css------------------------
                     143px;
                    height: 44px; 
                    position: absolute;
                    top: 352px;
                    left: 909px;
                    overflow: hidden;
                    .live_{
                        cursor: pointer;
                    }
                    &:hover .Cudda::after{
                        display: block;
                        animation: orot 0.3s ease-in-out forwards;
                        @keyframes orot {
                           100%{
                                margin-left:300px;
                            }
                        }
                        } 
                        .Cauda{
                            display: inline-block;
                        }
                        .Cudda::after{
                            content: '';
                            position: absolute;
                             30px;
                            height: 44px;
                            margin-top: -22px;
                            overflow: hidden;
                            display: none;
                            z-index: 6;
                            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
                            background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0)));
                            webkit-transform: skewX(-25deg);
                            transform: skewX(-20deg);
                        }
                }
  • 相关阅读:
    09.MyBatis的逆向工程
    08.MyBatis整合Log4j
    07.MyBatis中的关联查询
    06.动态SQL和foreach
    05.MyBtais两种取值符号以及输入参数和输出参数
    04.MyBatis别名的设置和类型转换器
    03.Mybatis优化
    02.Mybatis的动态代理方式实现增删改查
    01.MyBatis入门
    网络安全之网络安全(数通安全)0
  • 原文地址:https://www.cnblogs.com/blur-king/p/13932131.html
Copyright © 2011-2022 走看看