热气腾腾的咖啡CSS3特效

  • m2_720345
    了解作者
  • 5.6KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-04 03:18
    上传日期
热气腾腾的咖啡CSS3特效是一款冲泡好的咖啡放在托盘上热气腾腾冒出。
jiaoben7737.zip
  • jiaoben7737
  • css
  • style.css
    11.7KB
  • js
  • script.js
    395B
  • index.html
    3.8KB
  • 说明.htm
    4.2KB
内容介绍
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>热气腾腾的咖啡CSS3特效 - A5源码</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="plate"> <div id="cup"> <div id="cupInner"></div> <div id="coffeBg"> <div id="foamWrapper"> <div id="foam1" class="foam"></div> <div id="foam2" class="foam"></div> <div id="foam3" class="foam"></div> <div id="foam4" class="foam"></div> <div id="foam5" class="foam"></div> <div id="foam6" class="foam"></div> <div id="foam7" class="foam"></div> <div id="foam8" class="foam"></div> <div id="foam9" class="foam"></div> <div id="foam10" class="foam"></div> <div id="foam11" class="foam"></div> <div id="foam12" class="foam"></div> <div id="foam13" class="foam"></div> <div id="foamMiddleWrapper"> <div id="foamMiddleContainer"> <div id="foamMiddle1" class="foamMiddle"></div> <div id="foamMiddle2" class="foamMiddle"></div> <div id="bubbleMiddle1" class="bubble"></div> <div id="bubbleMiddle2" class="bubble"></div> <div id="bubbleMiddle3" class="bubble"></div> <div id="bubbleMiddle4" class="bubble"></div> </div> </div> <div id="bubble1" class="bubble"></div> <div id="bubble2" class="bubble"></div> <div id="bubble3" class="bubble"></div> <div id="bubble4" class="bubble"></div> <div id="bubble5" class="bubble"></div> <div id="bubble6" class="bubble"></div> <div id="bubble7" class="bubble"></div> <div id="bubble8" class="bubble"></div> <div id="bubble9" class="bubble"></div> <div id="bubble10" class="bubble"></div> <div id="bubble11" class="bubble"></div> <div id="bubble12" class="bubble"></div> <div id="bubble13" class="bubble"></div> <div id="bubble14" class="bubble"></div> <div id="bubble15" class="bubble"></div> <div id="bubbleSmall1" class="bubbleSmall"></div> <div id="bubbleSmall2" class="bubbleSmall"></div> <div id="bubbleSmall3" class="bubbleSmall"></div> <div id="bubbleSmall4" class="bubbleSmall"></div> <div id="bubbleSmall5" class="bubbleSmall"></div> <div id="bubbleSmall6" class="bubbleSmall"></div> <div id="bubbleSmall7" class="bubbleSmall"></div> <div id="bubbleSmall8" class="bubbleSmall"></div> </div> <div id="innerShadow"></div> <div id="glow"></div> </div> </div> <div id="handle"></div> </div> <div id="steamWrapper"> <div id="steam"></div> </div> <svg width="0" height="0" > <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" id="blurFilter"/> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -5" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg> <svg width="0" height="0" > <defs> <filter id="scatter"> <feTurbulence baseFrequency="10.9" type="fractalNoise" numOctaves="1"/> <feDisplacementMap in="SourceGraphic" xChannelSelector="G" yChannelSelector="B" scale="20"/> <feComposite operator="in" in2="finalMask"/> </filter> </defs> </svg> <svg width="0" height="0" > <filter id="fog"> <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" /> <feDisplacementMap in="SourceGraphic" scale="180" /> </filter> </svg> <script src="js/script.js"></script> </body> </html>
评论
    相关推荐
    • css3参考手册
      css3参考手册,走过路过不要错过哈。css3参考手册 css3参考手册
    • CSS3使用手册
      本资源包括CSS2、CSS3两部分CHM格式文档
    • CSS3进度条
      CSS3进度条Button,经典案例,绝对好用,初学者必备。
    • css3手绘动漫
      css3绘制出灵动飘逸的头发,水灵的眼睛,及色彩的渐变!
    • css3
      css3
    • css3小清新导航
      css3小清新导航是一款基于css3实现的类似特效按钮的小清新导航菜单。
    • 照片墙css3
      照片墙源码,可实现照片随机摆放,选中后摆正放大
    • css3
      css3
    • css3 study
      css3 study code
    • CSS3 Tooltips
      css3 tooltips鼠标悬停显示消息提示框样式。完整的代码,方便学习。