简介 目录 评价 推荐
  • sy_椒盐皮皮虾 2020-02-26

    在html页面中加入class="play"; 利用两个图像的z-index关系控制是否遮盖

    代码如下 (省略-o -ms内核) #music > img.play {  /* 兼容 */ -webkit-animation: music_disc 4s linear infinite;            animation: music_disc 4s linear infinite; /*设置动画样式:动画名称  周期(秒)匀速 重复进行*/} @keyframes music_disc/**设置动画时间/ {    0% {        -webkit-transform: rotate(0deg);                transform: rotate(0deg)/*旋转多少度*/;    }    100% {        -webkit-transform: rotate(360deg);                transform: rotate(360deg);    } } @-webkit-keyframes music_disc {    0% {        -webkit-transform: rotate(0deg);                transform: rotate(0deg);    }    100% {        -webkit-transform: rotate(360deg);                transform: rotate(360deg);    } }

    以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。 0% 是动画的开始时间,100% 动画的结束时间。

    截图
    0赞 · 0采集
  • weixin_慕神3412493 2020-01-30
    不哦所以0后没好利落精明美女们能够和我
    截图
    0赞 · 0采集
  • qq_沉醉美好_0 2019-12-17

    背景jpg格式  其它图片png24

    本地服务器测试环境:WampServer

    截图
    0赞 · 0采集
  • 慕无忌2217919 2019-11-05

    这个要好好学习学习

    0赞 · 0采集
  • 曾帆 2019-07-30

    字体大小VW单位 

    0赞 · 0采集
  • Dreamway 2019-06-27
    使用touch事件
    截图
    0赞 · 0采集
  • Dreamway 2019-06-27
    vw 字体讲解
    截图
    0赞 · 0采集
  • Dreamway 2019-06-26
    vw让字体适配设备
    截图
    0赞 · 0采集
  • 优秀的小钟 2019-03-26

    切图—重构—前端—优化

    https://img.mukewang.com/5c9a26f300012e8c07250372.jpg

    0赞 · 0采集
  • 慕鱼鱼 2019-01-03

    font-size:1.5vw;

    position: fixed;

    top: 3vh;

    right: 4vw;

    单位设置为vh\vw,分别是高和宽,会随着屏幕大小适配。


    1赞 · 1采集
  • 慕鱼鱼 2019-01-03

    font-size单位设为vh\vw,字体大小就会随屏幕大小适配,整个屏幕宽度为100vw,高度为100hw

    0赞 · 0采集
  • 慕鱼鱼 2019-01-03

    wrampsever 是网站开发集成环境,相当于在本地搭建了一个服务器,然后把写好的代码放在相应的文件夹里,在浏览器里运行就可以了

    1赞 · 1采集
  • 慕仙6782529 2018-12-03
    过度效果主要是利用了transition和transform里的translate,两个页面之间的切换并没有用帧动画,而是直接利用了添加class (transform.translate -100%)以及top100%相互抵消
    截图
    0赞 · 0采集
  • 慕UI5236663 2018-12-03

    https://img4.mukewang.com/5c04cd0e000178af09650092.jpghtto-equiv=X-UA-Compatible    content="IE=edge,chrome=1"

    视口htto-equiv

    format-detection :  禁止将你的数字转化为拨号连接 

    1赞 · 1采集
  • 慕UI5236663 2018-12-03

    page2_loading

    https://img4.mukewang.com/5c04cb820001453205690147.jpg

    https://img.mukewang.com/5c04cb8300013a0008060221.jpg


    0赞 · 0采集
  • 慕UI5236663 2018-12-03

    第二页,top: 0, 5.5秒上移top: -100%;

    第三页 top: 100%; 0, 5.5秒上移top: -100%;

    https://img4.mukewang.com/5c04caf300015f4205630178.jpg

    https://img1.mukewang.com/5c04caf400010f6005530204.jpg

    https://img.mukewang.com/5c04caf50001705407040255.jpg


    0赞 · 1采集
  • 慕UI5236663 2018-12-03

    https://img2.mukewang.com/5c04c90800015a7f08000471.jpgclick有300ms延长,改用touchStart

    https://img3.mukewang.com/5c04c94b0001031306910195.jpg

    0赞 · 0采集
  • 慕UI5236663 2018-12-03

    修改music 结构

    https://img.mukewang.com/5c04c722000102f607300097.jpg

    https://img1.mukewang.com/5c04c7220001bb8409210157.jpg

    https://img3.mukewang.com/5c04c83e0001aa4408030411.jpgjavascript 标签 differ属性

    animationPlayState =  running/paused; 浏览器兼容问题


    0赞 · 0采集
  • 慕UI5236663 2018-12-03

    碟片旋转

    https://img3.mukewang.com/5c04c4610001c2dc06740342.jpg红灯笼闪烁

    内圈转 delay 1s; 1080deg

    https://img2.mukewang.com/5c04c5130001c3d509600318.jpg第二个圈 delay 2s; 720deg

    https://img2.mukewang.com/5c04c5be0001763e09390463.jpg第三个 delay 2s; 360deg

    https://img4.mukewang.com/5c04c6140001960909160539.jpg福旋转

    https://img1.mukewang.com/5c04c67c0001a57f09110528.jpg

    1赞 · 1采集
  • 慕UI5236663 2018-12-03

    title

    https://img1.mukewang.com/5c04c18b0001e51208020247.jpg

    logo

    https://img3.mukewang.com/5c04c20b00010d3008350242.jpg上联https://img3.mukewang.com/5c04c1890001d1af10060219.jpg

    下联https://img2.mukewang.com/5c04c18a000116ab09150206.jpg

    https://img.mukewang.com/5c04c1890001e46409330293.jpg


    0赞 · 0采集
  • 慕UI5236663 2018-12-03

    page static => absolute

    1, 2, 3页通过display显示

    https://img3.mukewang.com/5c04a10f00012ab903960292.jpg

    https://img3.mukewang.com/5c04a10f0001287703380089.jpg

    3个圈

    https://img2.mukewang.com/5c04a1410001bcdb09540326.jpg

    https://img4.mukewang.com/5c04a14000017bd610000331.jpg

    https://img.mukewang.com/5c04a1410001f5bd08870307.jpg

    2016

    https://img3.mukewang.com/5c04a1850001490b07820275.jpg

    0赞 · 0采集
  • 慕UI5236663 2018-12-03

    灯笼

    https://img2.mukewang.com/5c049f1b0001b9f708250335.jpg灯笼红色阴影

    https://img1.mukewang.com/5c049faf0001e50705850450.jpg小m

    https://img1.mukewang.com/5c04a00000011c4808050249.jpg文字

    https://img3.mukewang.com/5c04a00e0001e29a03410202.jpg

    1赞 · 1采集
  • 慕UI5236663 2018-12-03

    添加背景-

    https://img4.mukewang.com/5c049e490001f7d403020204.jpg

    https://img3.mukewang.com/5c049e4a0001e18208260380.jpg


    0赞 · 0采集
  • 慕UI5236663 2018-12-03

    html5中

    <html /> <body /> => block

    0赞 · 0采集
  • 慕UI5236663 2018-12-01

    music  css

    https://img1.mukewang.com/5c0254300001505007460816.jpg

    https://img2.mukewang.com/5c025432000158fe08260594.jpg


    0赞 · 0采集
  • 慕UI5236663 2018-12-01

    html结构

    https://img3.mukewang.com/5c02530c0001d9a412860598.jpg

    https://img2.mukewang.com/5c02530f0001f24508400312.jpg


    0赞 · 0采集
  • 慕UI5236663 2018-12-01

    开发技能

    https://img.mukewang.com/5c024d2c0001b44b17700908.jpg


    性能分析:

    https://img4.mukewang.com/5c024f500001e4a612720578.jpg

    1赞 · 1采集
  • 慕UI5236663 2018-12-01

    demo: https://www.imooc.com/activity/project1

    0赞 · 0采集
  • 完颜科子 2018-09-24

    视口  8像素表示法  手机端正常的宽高需要设置meta

    0赞 · 0采集
  • 慕设计1533983 2018-07-18

    this.style.animationPlayState = "running"

    特效运行

    this.style.animationPlayState ="paused"

    特效暂停

    0赞 · 0采集
数据加载中...
开始学习 免费