c

MobTech袤博亮相DevFest上海谷歌开发者节

MobTech袤博亮相DevFest上海谷歌开发者节

  活动现场   活动现场   11月22日,由Google 发起第 10 届 DevFest上海谷歌开发者节如约而至,全球领先的数据智能科技平台MobTech袤博参展亮相活动,与万名线上观众、1500+ 线下开发者、工程师,以及行业重磅嘉宾相聚于此,尽享一场技术盛宴。   MobTech袤博展位   丰厚小礼品 本次大会融汇 TensorFlow/机器学习、Android 11/Kot... »

css3实现二维码扫描特效的示例

css3实现二维码扫描特效的示例

在线预览 https://jsrun.pro/AafKp/ 先看效果: 第一步,实现网格背景: background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.1) 25%, rgba(32, 255, 77, 0.1) 26%, transparent 27%, transparent 74%, rgba(... »

css3+贝塞尔曲线实现可伸缩input搜索框效果

话不多说,上效果图。 核心代码就是 transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 1s; 通过 transition 属性的 cubic-bezier(贝塞尔曲线) 在过渡效果上加了个缓冲效果。 html代码部分主要模块就是一个input 外加一个 父级 div  div宽度需要大于input宽度 不加 cubic-bezie... »

css3实现简单的白云飘动背景特效

这是一款非常简单的纯CSS3白云飘动背景特效。该白云飘动特效使用CSS animation动画来控制不同的白云,以不同的速度进行运动,形成白云飘动的效果。 HTML结构 该白云飘动特效的HTML结果非常简单,使用一个<div>来包裹一组作为白云的<div>元素。 <div id="clouds"> <div class="cl... »

css 实现圆形渐变进度条效果的示例代码

实现思路 最外面是一个大圆(渐变色) 内部里面绘制两个半圆,将渐变的圆遮住(为了看起来明显,左右两侧颜色不一样,设置为灰蓝) 顺时针旋转右侧蓝色的半圆,下面渐变的圆会暴露出来,比如旋转 45 度(45/360 = 12.5%),再将蓝色的右半圆设为灰色,一个 12.5 的饼图就绘制出来了。 尝试旋转更大的度数,旋转 180 度之后右半圆重合,再旋转,度数好像越来越小,不符合我们需求,应该将右侧的圆... »

css实现六种自适应两栏布局方式

css实现六种自适应两栏布局方式

html结构 方法一:flex布局.wrapper.left.right{ flex:1; height:40 »

详解常用css样式(布局)

兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项目时再引入) content布局 当h5内嵌在app里面的时候,在iso手机下,底部(头部)固定按钮会跟着一起滚动,需要使用content布局,然后使用padding-bottom或者padding-... »

关于css中margin的值和垂直外边距重叠问题

并列盒子的margin(双margin的重叠)面试题:一个盒子有上边距,另一个盒子有下边距,会出现margin边距的重叠问题?解决:取大值,并不是他们的相加之和,而是谁大听谁的! <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></titl... »

一个基于canvas的移动端图片编辑器的实现

项目地址: https://github.com/xiaosu95/canvas_mobile_drag 点击查看demo(在移动端上查看) 该插件是一款脱离jq的移动端图片编辑器。可以应用在移动端H5页面或者微信小程序中。 插件实现的功能为可页面内初始化载入图片、手动添加手机相册内的图片、或者添加服务器端的图片(服务器端需要开启允许图片跨域)。拥有多种的编辑模式。支持操作画布内的所有图片和单独设... »

详解css盒子模型之内边距padding及简写

如上图,padding值是复合属性按照顺时针顺序,其中padding的内边距影响盒子大小的实际宽高.wrap如上代码所示,如何才能保证盒子的实际宽高不变,需要从中减去添加的padding值!到此这篇关于详解css盒子模型之内边距padding及简写的文章就介绍到这了,更多相关css盒子模型内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

HTML+CSS+JavaScript实现图片3D展览的示例代码

一、图片3D展览效果 上传图片的大小有限制,录制的GIF图展示效果不是很好 录屏的效果见链接:https://www.bilibili.com/video/BV1Bi4y1E7wk/ 二、代码实现 1. HTML代码 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <... »

css3利用transform变形结合事件完成扇形导航

这个案例因为写错了一个transition的单词,害得我花了一个下午的时间,真的眼睛都瞎了,以后不要再犯这种低级错误  >_< 一、知识点分析 1、APDiv定位布局 2、点击事件下的transition和transform的效果。 3、每个小图标的left和top值的计算。 4、点击小图标后图标的transition事件侦听。 二、HTML源代码 <div id=&q... »

Html5之webcoekt播放JPEG图片流

一、简介既然webcoekt是基于tcp连接的,理论上讲所有的浏览器是可以私有协议处理二进制的,如果我们需要播放视频,我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端,然后前端通过websocket接收图片然后将图片显示到img或canvas中即可,当然这个是我自己设想的,也是应该可以做的到了,做到如下需要以下技术支持: 后端直接ff »

css3 transform过渡抖动问题解决

transform: scale();缩放在IE浏览器下会有抖动transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转如:transform: scale(1.2);换成:transform: scale(1.2) rotate(0.1deg);transform:translate();偏移会使图片或文字变得模糊transform偏移还 »

css3实现平移效果(transfrom:translate)的示例

css3实现平移效果(transfrom:translate)的示例

我们使用translate这个参数来实现移动translateX:向X轴平移,填正数往右平移,填负数,往左平移translateY :向Y轴平移,填正数往下平移,填负数,往上平移translateZ :填的值越大你看到的图像离你感觉越近,天的值越小你看到的图像离你越远translate同时设置 translateX ,translateYtranslate( »

css实现文字在背景图片之上

效果: <div class="imgs"> <!-- 背景图 --> <div class="background"> <img :src="item.voteTime ? imgSrc1:imgSrc2" width="100%" height="100%&quo... »

css3弹性盒子flex实现三栏布局的实现

css3弹性盒子flex实现三栏布局的实现

如题:高度已知,左右栏宽度300px,中间自适应: 弹性盒子本身就是并排的,我们设置宽度即可。 用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex值,由于这里其它盒子宽度固定,所以中间栏会自动填充: <!DOCTYPE html> &l... »

css3 利用transform打造走动的2D时钟

学完了transform这个课程,还是来一个案例吧,利用transform的旋转rotate打造一个时钟,再结合JavaScript的定时器让它走起来。 截一个动图: 案例知识点分析: 1、利用定位完成时钟的绘制。 2、背景使用了放射性渐变。 3、利用JavaScript完成刻度和时间数字的旋转。 4、利用Date()对象获取系统时间,并让时针指向对应的刻度。 5、利用定时器不断更新时间,完成时针... »

css之Display、Visibility、Opacity、rgba和z-index: -1的区别

css之Display、Visibility、Opacity、rgba和z-index: -1的区别

我们在网页中经常需要控制一些元素的隐藏、透明等属性 <style> .d1{ display: none; } .d2{ visibility: visible; } .d3{ opacity: 0; } </style> <div class="d1" onclick="clickEvent('display: none;')"... »

详解css3使用transform出现字体模糊的解决办法

这个问题很奇葩,话不多少直接上代码: .g-dialog-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 405px; background-color: #ffffff; height: 2... »

纯css3实现横向无限滚动的示例代码

纯css3实现横向无限滚动的示例代码

本文示例都是用小程序写的,但是不影响要实现的功能。 »

css3实现文字首尾衔接跑马灯的示例代码

故事背景 事情是这样的,卤煮无意间得知一款外放效果宇宙无敌第一的手机!!!脑袋一热就趁着阿东618大促搞了一台,毕竟卤煮是一个地道的电子发烧友!!!但是当卤煮查询物流信息的时候。。。。。。 好吧,我这该死的探索欲,被这突兀的跑马灯吸引住了目光(ca,今天看样子是收不到货了!!!) 那就说说怎么实现它吧(这个梗接的就是这么硬) 效果图 逻辑描述 p标签包含俩span标签(提示的文字),要两个span... »

css利用负margin实现平均布局的示例

对于平均分布的布局,我们一般使用负margin的方法。一般这种情况,我们都是在父元素和子元素之间加上一层div,然后,给这个div设置负margin-right,值为两个子元素之间的距离。到此这篇关于css利用负margin实现平均布局的示例的文章就介绍到这了,更多相关css 负margin平均布局内容请搜索软件开发网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持软件开发网! »

css为什么要放在head标签中

思考: css为什么要放在head标签中, 而不能像javascript一样置于body标签尾部? Talk is cheap, show me the code. OK, 那我们通过写一些代码来得出结果 在这里先说chrome控制台的一个小技巧: 限制download速度对我们的测试很有帮助! 可以让我们看清一些细节 我们先把download速度限制为40kb/s, 开始测试: 当css引入位置... »

css实现隐藏滚动条并可以滚动内容的实例代码

css实现隐藏滚动条并可以滚动内容的实例代码

前言当页面的html结构嵌套的盒子很多的时候,可能会导致一个页面中含有多个垂直滚动条。这样的话很影响页面的样式,所以我们需要隐藏滚动条的同时还支持滚动,下面就是利用css实现的两种方法。方法一、计算滚动条宽度并隐藏起来原理:外面的盒子和里面的盒子利用子绝父相进行布局,里面的盒子向右移动17个像素,刚好等于滚动条的宽度,并且该方法在chrome和IE中没发现问题。 »

Page 1 of 2049123»