美文网首页
css3 高光扫描 ! 干货!

css3 高光扫描 ! 干货!

作者: 科哚洛夫 | 来源:发表于2018-02-22 11:55 被阅读9次

```

#app{

width: 200px;

height: 300px;

background:black;

overflow: hidden;

}

@keyframes aniBlink120{from{margin-left:-60px}to{margin-left:260px}}

@-webkit-keyframes aniBlink120{from{margin-left:-60px}to{margin-left:260px}}

#app a:before{content:'';

position:absolute;

width:60px;

height:300px;

margin-top:0px;

margin-left:-260px;

overflow:hidden;

z-index:6;

background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0.4) 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.4)),color-stop(100%,rgba(255,255,255,0)));

background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%);

background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,0.4) 50%,rgba(255,255,255,0) 100%);-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}

#app:hover a:before{

-webkit-animation:aniBlink120 .5s ease-out forwards;

-moz-animation:aniBlink120 .5s ease-out forwards;

-o-animation:aniBlink120 .5s ease-out forwards;

animation:aniBlink120 .5s ease-out forwards;

}

```

相关文章

  • css3 高光扫描 ! 干货!

    ``` #app{ width: 200px; height: 300px; background:black; ...

  • 【运营干货】你需要学习原创视频制作吗?

    文/运营干货 扫描二维码,即可开始学习吧:

  • X光片扫描,CT胶片扫描的9条宝贵经验技巧

    大家好,今天我们来聊一下关于X光片扫描、CT胶片扫描的相关经验技巧总结,下面是我总结的9条X光片扫描忠告。 我是刘...

  • 如何搞定一切负面情绪

    焦虑抑郁失眠愤怒。。。话不多说直接上干货 微信扫描即可观看哦

  • 扫描枪枪扫描不出条码怎么办???

    扫描枪扫不出条码,首先要确定是扫描枪的问题还是条码的问题。比如说扫描枪可以出光但是就是不能扫描条码到电脑上,这有可...

  • css3 rotate 干货

    ## hello 标题 #parent{ width:400px; height...

  • 高光

    文/舟一叶 1、 一串已经发了黑的香蕉和几个褶皱的苹果正摆在一大块还带有一丝辨识度的浅蓝色衬布上。衬布沿着两个桌子...

  • 高光?

    高光时刻,搜索优秀的历史,表示写得很嗨皮! ①小学二年级,九年义务前,与哥哥在同一个小学,那时有一个政策,年级第一...

  • 高光

    我来人间一趟, 纵横四面八方。 登尽三山五岳, 遍游万泽千江。 花甲流觞回荡, 不负灵魂高光。

  • 实现一个简单的爱心效果

    先来说一下爱心的实现原理在用两个div改变宽高,还用到CSS3 border-radius 圆角属性,CSS3 t...

网友评论

      本文标题:css3 高光扫描 ! 干货!

      本文链接:https://www.haomeiwen.com/subject/ednatftx.html