css3实现卷页效果

 时间:2024-11-05 22:59:46

1、首先,新建一个只有div的页面,并加上适当的样式

css3实现卷页效果css3实现卷页效果

2、简单的来说实现这个效果,就是在div的角上加一个长宽为0的div,当hover时变化它的长宽值所以为div的before伪类加上长宽为0内容

css3实现卷页效果

3、再实现hover的效果

css3实现卷页效果

4、当鼠标移到div上时,就能看到右上角生硬的出现了一个白色的方块

css3实现卷页效果

5、接下来要让动画平滑一下,在before中加上属性。现在就能看到右上角有平滑的效果了。transition-duration: 0.3s;transition-property: width, height;

css3实现卷页效果

6、但是这和卷曲的效果似乎还有很大的差距,接下来就要为before加上阴影,来显得珠爵涸罢卷曲。background: li荏鱿胫协near-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);然后当鼠标hover时,就能看到如下图的效果了。

css3实现卷页效果css3实现卷页效果
  • Animate如何让多个对象随机播放
  • flash如何绘制一个老旧桌子板凳
  • Animate如何实现加法算式生成(AS3)
  • flash绘制卡通万圣节南瓜头教程
  • Flash8如何制作下雪效果(AS2)
  • 热门搜索
    苦瓜怎么吃降糖 予怎么读 红烧茄子怎么做 吊兰怎么养 骅怎么读 胆结石怎么消除 麻辣串的做法及配方 apk文件怎么打开 苹果手机怎么下载铃声 怎么蒸馒头