css移动端:acitve效果的实现

做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“鼠标指针浮动在其上的元素”的情况,有也很少. 所以取代的应该:active这个选择器,但是通过实践,发现情况不是很理想,在QQ浏览器上有时触发,有没不触发,在我mx3带自浏览器上根本没效果. 最近在看美团h5的页面时发现他们做对这个效果做得很好(这里说实话,美团网在h5这一块做得真好),看了他们代码…

原生JS、CSS实现的转盘效果（目前仅支持webkit）

这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码,预计会抽空优化,让它在手机上也能运行:另外,如果看代码的时候有什么问题,请留言... <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/…

实用js+css多级树形展开效果导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…

js+css实现带缓冲效果右键弹出菜单

如何使用CSS实现小三角形效果

如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小三角头效果的方式.代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&…

CSS 实现图片灰度效果兼容各种浏览器

CSS 实现图片灰度效果兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法 img { filter:Gray; } //简写 IE系列浏览器都支持IE滤镜的这一属性,非IE浏览器不支持. 方…

CSS实现两端对齐效果

CSS实现两端对齐效果两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align w3school指出,text-align用于设置块级元素内文本的水平对齐方式.而这里所说的文本,是嵌套在block元素内的inline元素或者inline-block元素.例如嵌套行内标签的文字.图片.input表单控件等:而对block水平的元素是没有作用的.所以如果想实现两端对齐,可以将子元…

不可思议的纯 CSS 实现鼠标跟随效果

直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要借助 JS. 当然,本文的重点,就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些鼠标跟随的行为动画效果. 原理以上面的 Demo 为例子,要使用 CSS 实现鼠标跟随,最重要的一点就是: 如何实时监测到当前鼠标处于何处? OK,其实很多 CSS 效果,都离不开障眼法二字.要监测…

不可思议的纯 CSS 滚动进度条效果

结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的过程中遇到的一个类似的小问题.其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊.所以我一直在想,有没有可能只使用 CSS 完成这个效果呢? 分析需求第一眼看到这个效果,感觉这个跟随滚动动画,仅靠 CSS 是不可能…

css实现气泡框效果

前提:气泡框或者提示框是网页很常见的,实现它的方式有很多,我们以前最常用的就是切图片然后通过 "定位" 方式定位到相应的位置,但是用这种方式维护很麻烦,比如设计师想改成另外一种或者另外一种颜色那我们只有再次切图片等.下面我们来学习下使用html+css来实现这种效果! 如下效果: and 我们可以来分析下:要实现这种效果无外乎就是一个矩形和一个小三角形然后三角形定位上去就可以了,那么我们怎么样通过css来制作小三角形呢? 一:首先我们来看看css border属性,当…

CSS 实现图片灰度效果

非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法 img { filter:Gray; } //简写 IE系列浏览器都支持IE滤镜的这一属性,非IE浏览器不支持. 方式2. CSS3滤镜 im…

css冻结列的效果

<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>css冻结列的效果</title><!-- 1.div里面放table或者其它容器,当子容器的宽度大于父容器时,父容器就会出现滚动条.2.头部固定不动的列让它脱离文档流(position:fixed|absolute),然后给table一个margi…

animate.css引入实现动画效果

最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第一步,便是下载相关的animate.css文件,方法有三种: 1.从官网下载: https://raw.github.com/daneden/animate.css/master/animate.css 2.通过npm下载: $ npm install animate.css 3.使用在线cdn:…

css sticky & 吸顶效果

css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz css position sticky not working https://juejin.im/post/5d09c9fee51d45777b1a3da3#heading-7 ️ 使用 position: sticky 的时候,除非指定 top 属性,否则它不会生效. https://codepen.io/xgqfrms/pen/BaNqMNp refs https:/…

有趣的css—简单的下雨效果2.0版

简单的下雨效果2.0版前言笔者上一篇发布的文章有趣的css-简单的下雨效果中有位老哥给我提了一个很棒的建议,大致意思是波纹应该产生于雨滴的消失处. 这是按照老哥的建议完善后的效果图: 由于我制作GIF图片的工具最多只支持制作33FPS的GIF图,所以看起来可能有一点点卡顿,实际的效果比图片还是要好一些的,点击这里可以在线查看2.0版的效果. 思路制作背景首先给body中添加一个id为rain的div,并通过背景颜色线性渐变得到天空-地平线-海面的效果. <!DOCTYPE html>…

css做旋转相册效果

css做旋转相册效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: url(img/bg.jpg) no-repeat; background-attac…

js+css实现模态层效果

在做web前端的时候,有些时候会涉及到模态层,在此提供一种实现思路.希望对大家实用.先贴效果吧: 模态层效果以下说说在写模态层的时候的思路:通过可配置的參数width,height,title以及content用来设定弹出的信息框显示的内容,并通过可配置參数container用来设定模态层显示的区域. 思路非常easy,主要是一些css样式和js处理.详见源代码: modal.css html,body{ font-size: 12px; font-family: "微软雅黑"; }…

CSS3 - vue中纯css实现柱状图表效果

背景以前我们制作柱状图都用echarts或者其他同类型的图表插件这次是个移动端的需求,而且这个图表需要动画使用echarts就会显得过重,而且动画达不到我想要的效果(主要是我自己愚蠢想不到好的动画办法). 先来看下效果图: 几个柱状图分数不满时: 几个满分柱图: 还有完整的元素组合动画效果: ps:圆环+进度的效果制作,见下篇. 从最后一张图中可以看出这个需求,柱状图是在一个swiper当中实现的. swiper翻页,柱状图逐个增长,圆环进度增长. 废话不多说,看处理思路~ 分析一波设计稿…

CSS 3学习——文本效果和@font-face

文本效果关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是: text-overflow text-shadow word-break word-wrap text-overflow 介绍text-overflow之前先介绍一个white-space属性. white-space属性用来描述如何处理元素中的空白符,可以从父元素继承值. 可取值: normal 默认值.连续地空白符会被合并,包括换行符.文本填充行盒时,会根据需要自动换行. nowrap 连续的空白符(包括换行符…

css实现翻页效果

如图,鼠标移动到图上,实现右上角翻页的效果,本例主要border边框的设置. 一.基本概念 <html> <head> <style> #demo{ width:0; height:0; border:solid 50px; border-top-color: #f00 ; border-right-color: #ff0 ; border-bottom-color:#0f0; border-left-color:#00f; } </style> </…

css: 照片有如层叠效果

显示上面照片效果css <!DOCTYPE html>  <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <…

纯css实现照片墙3D效果

每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自己动手试试. v直接上代码这篇博客呢就是演示一个照片墙的效果.所以废话不多说,直接上代码然后展示特效.有兴趣的道友可以自己练练手试试.也可以改动改动其中的属性多玩玩,自己测试的时候建议用美女的照片,绝对"乐在其中". 1.准备材料: 准备材料就是没什么材料,自己麻溜赶快的去:百度找几张…

css实现图片闪光效果

1.这个效果是看到京东商城上的一个下效果,原本的思路是用js控制一个图片在某张需要闪光的图片上重复出现,但是网上找了一些资料,竟然是用css写的,真是太帅了!!! 2.原理:在需要闪光的图片前添加before 属性:内容为空: 宽为200px,高为100%,left:-150px,overflow:hiddden; background属性设置为渐变:颜色看自己需要:transform-skewX(-25deg) 然后为before的content设置过渡动画:{left:150%,tran…

解决CSS移动端1px边框问题

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决1px边框问题</title> <meta name="viewport"…

css+js 控制幻灯片效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>幻灯片效果</title> <style type="text/css"> *{ margin: 0; padding: 0; } body{ padding: 50px 10%; } .slider .main,.slide…

jquery+css实现菜单收缩效果并适应多种浏览器与移动平台

效果出现 css部分 .content-wrapper{ -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease-in-out; -moz-transition: -moz-transform .3s ease-in-out, margin .3s ease-in-out; -o-transition: -o-transform .3s ease-in-out, margin .3s ease-in-out;…

Odometer使用JavaScript和CSS制作数字滑动效果

Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以运行起来非常的流畅,需要这种效果的朋友不妨试试这个插件. 所有的主题都可以自定义文字的大小和Odometer元素的标签. 兼容性 Odometer能在IE8+, FF4+, Safari 6+, Chrome等高级浏览器上完美的运行. 功能不仅仅可以让数字滑动,同样的文字也可以实现这样的效果. 指…

HTML5 CSS3专题纯CSS打造相冊效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候下载的了.也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是非常不错的.最基本的是没有使用一行js.这才是亮点. 先看html文件: <body> <div id="gallery"> <h1>纯CSS3相冊效果&l…

原生JavaScript+CSS3实现移动端滑块效果

在做web页面时,无论PC端还是移动端,我们会遇到滑块这样的效果,可能我们往往会想着去网上找插件,其实这个效果非常的简单,插件代码的的代码往往过于臃肿,不如自己动手,自给自足.首先看一下效果图: 分析效果: 1.按钮的右侧有一个小动画,深黄色的小头是一圈圈循环流动的. 2.只在按钮上滑动可以启动按钮. 3.并且要判断按钮是否滑到头,如果没有滑到头,手指离开屏幕,按钮自动弹回左侧:如果滑到头,执行一个函数. 解决办法: 1.动画效果需要使用CSS3里面的@keyframes来操作,代码如下: .g…

iOS 加载本地 HTML 文件 CSS 样式图片无效果

在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图片和 CSS 样式加载出来的效果如下图: 出现这种问题一般是资源路径读取的问题,我们把包含 HTML 文件的文件夹拖入工程的时候一般情况下是这样的: 一般情况下我们的 Added folders 选项都是选的 Create Groups 选项,工程中被加入的文件夹是黄颜色的问题就出在…

【css移动端:acitve效果的实现】的更多相关文章