css3
关注
分享
扫一扫
文章平均质量分 69
豆i浆
我知道自己帅 ，别夸我 我面红
展开
-
CSS3实现轮播图效果
因为CSS的局限性，所以只能做出图片无限循环播放的效果，和图片点击链接 其他的因为效果不完美所以摒弃了效果图预览：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{原创 2017-05-15 23:39:15 · 1813 阅读 · 0 评论 -
jQuery -- touch事件之轮播图效果
废话不多说，下面放代码，注释很详细，不怕看不懂效果图预览：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-原创 2017-06-28 14:56:31 · 2558 阅读 · 2 评论 -
rem单位换算
在日常开发中，若需要用到rem的一般都是移动开发居多，由于移动设置宽度的不确定性，rem更加适合，rem是根据父级的单位进行公式换算的，其公式为：1 ÷ 父元素的font-size × 需要转换的像素值 = em值而父级单位通常为了便于换算会采用10px,其换算公式为：10 ÷ 16 × 100% = 62.5%当中的10是指 换算单位10px,一般情况都是px 换算 rem而在当然流行的编辑器原创 2017-06-25 15:26:21 · 5884 阅读 · 1 评论 -
flex兼容写法
.box { display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16原创 2017-06-25 13:00:03 · 1472 阅读 · 0 评论 -
jQuery -- touch事件之左右切换元素
效果预览： 全部代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-原创 2017-06-27 21:16:09 · 558 阅读 · 0 评论 -
微信小程序 --- CSS实现仿网易云音乐播放界面效果（黑胶唱片与唱针纯CSS实现）
下面代码的效果是网易云音乐唱针和黑胶唱片的CSS效果实现方式，播放等并没贴出来实现效果的范围动态图效果预览： stylusW,panW是获取系统宽度计算后的参数wxml部分: view class='stylusBox' style='top: {{ -stylusW*0.5 }}px'> view class='stylus_1' style原创 2018-01-17 12:25:23 · 12765 阅读 · 9 评论 -
微信小程序 --- 日历效果
效果预览: wxml部分:<view class='box1' style='width: {{ sysW * 7 }}px'> <view class='dateBox'>{{ year }} - {{ month}}</view> <block wx:for='{{ weekArr }}'> <view style...原创 2018-02-27 13:50:02 · 19716 阅读 · 6 评论 -
CSS3图片展示特效（附前端学习规划）
效果预览：html：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>前端资料整理</title> <link rel="stylesheet&quo原创 2017-05-20 16:22:43 · 3131 阅读 · 1 评论