css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: <div class="box"> <div class="master"> <div class="eyes"> <div class="eyes-ball"></div&

  开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 所有题目汇总在我的 Github . 使用单个标签,如何实现下图所示的斜线效果.也就是如何使用 CSS 画斜线? 这种类似于表格的斜线效果,细细研究一下,还是有一些挺有趣的方法可以实现之. 我

因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大家看一下这个网页的大体样式. 这个界面可以说是非常漂亮,整体也是一个响应式布局,总体来说还算不错.但是抛开页面设计,这个网站有一个致命的缺点,就是没有做懒加载,这么多页面其实就是一个HTML文件,所有的资源图片以及文字信息等全部是一次性加载,所以你想打开这个界面还是比较困难的,需要等待一些时间. 我

今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示大图片,如果用户滚动页面需要查看内容的时候,则大图收缩到 ActionBar 中. 源码下载:http://files.cnblogs.com/sage-blog/notboringactionbar.zip 参考:http://flavienlaurent.com/blog/2013/11/20/

炫酷的横屏滚动效果css实现 DEMO: https://codepen.io/kobako/pen/BxVLLm 我们对滚动条都不陌生.平时浏览的网页,进度条通常是垂直方向的,内容从上往下排列.但是不知道你有没有看过一些横屏滚动的网站,这样的网站在一众竖屏网页中鹤立鸡群,很容易达到吸人眼球的效果. 花时间谷歌了一下,发现实现方法是真的不少,你可以用inline-block加上no-wrap,也可以用rotate将整个页面或者div旋转(不过我对这个是真的苦手,看不懂).看了那么多,尝试总结一下

最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率. 怎样才能达到这个效果,使我们的网站脱颖而出呢?其实,它并不像我们想象的那么难! 追踪位置 我们要做的第一件事就是获取到鼠标的位置. JS代码: document.querySelector('.button').onmousemove = (e) => {   const x 

>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢html5和喜欢炫酷特效的同学可以收藏一下. -----------------------------------------华丽的分割线---------------------------------------------------- 首先,介绍一下文件的效果. 看起来是非常的炫酷的. ---------

在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休闲游戏,那个有一个东西可以帮到你:iOS的粒子效果引擎. 一.粒子发射器 iOS中的粒子效果有两部分组成,一部分为发射器,设置例子发射的宏观属性,另一部分是粒子单元,用于设置相应的粒子属性.粒子发射器是基于Layer层,没错,又是Layer,他的全名叫做: CAEmitterLayer.其中常用的属

ViewPager有一个setPageTransform()方法可以实现很多酷炫的动画效果 先来个仿QQ的侧滑面板效果 vp.setPageTransformer(true, new PageTransformer() { /** * 页面滑动时回调的方法, * @param page当前滑动的view * @param position 当从右向左滑的时候,左边page的position是[0一-1]变化的 * 右边page的position是[1一0]变化的,再次滑动的时候,刚才变化到-1(

1. HTML5 3D图片阴影翻转动画 效果很酷 分享一款很酷的HTML5 3D动画特效,这款3D特效可以为你的图片增加阴影的效果,而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果.这和HTML5 3D动画HTML5 3D正方体旋转动画有着类似的效果,大家也可以看看. image.png 在线演示 / 源码下载 2. HTML5 Canvas波浪动画 可调节波浪高度 看过超酷的HTML5 Canvas波浪墙吗,是的,只要你的浏览器支持HTML5 WebGL,就可以观看强大的HTML5波浪效果

效果地址:https://codepen.io/flyingliao/pen/ebjEMm?editors=1100 HTML代码: <div class="loader"> <div class="one"> <div class="two"> <div class="thre"> <div class="four"> <div class

读者墙,在很多网站上都有,没有遇到过的,可以参考度娘:读者墙http://www.baidu.com/s?wd=%B6%C1%D5%DF%C7%BD 使用基础的Html和CSS写出雏形 需要一提的是头像(img)的排版.给外面a标签padding-left:;,img自身float:left;margin-left:;,这种写法避免了不少因浮动产生的问题,且代码简明,推荐适当的使用此方法. 使用并解说所用CSS3 接下来给大家说说这个读者墙所应用到的css3属性,及其具体的使用方法,老鸟可以飞了

效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cp2dZcQ 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/fro

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cp2dZcQ 源代码下载 请从 github 下载. https://github.com/comehope/front-end-dai

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l

原文地址:https://segmentfault.com/a/1190000014807564 感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了. HTML代码: <div class="loader"> <span></span> <span></span> <span></span> <span></span> <span></span>

svg是眼下十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们能够直接用代码来描画图像,能够用不论什么文字处理工具打开svg图像.通过改变部分代码来使图像具有交互功能,并能够随时插入到HTML中通过浏览器(如火狐浏览器)来观看.使用svg格式可让你设计激动人心的.高分辨率的Web图形页面. svg格式具备眼下网络流行的jpg和png等格式无法具备的优势:能够随意放大图形显示,但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲

这篇文章主要整理一些css3实现的一些文字特效,分享给大家, 相信您看完会有不少的收货哦! 一.css3 空心文字 <style> .hollow{ -webkit-text-stroke: 1px black; -webkit-text-fill-color : transparent; font-size: 30px; color:#fff; } </style> <div class="hollow">空心字/缕空效果:fly63.com<

官方网址 http://t4t5.github.io/sweetalert/ 项目地址 https://github.com/t4t5/sweetalert

感谢大佬:https://www.jianshu.com/p/d608f0228fd4 前言 技术群里面经常有人问到一些炫酷的UI效果实现方法,有时候我都是给一个相同或者相似效果的Github链接,有同学私信给我说,大佬,怎么这些效果你都能找到?你是怎么搜索的,或者有其他什么秘方?会利用Google.百度等搜索工具搜索是一方面,另一个重要的方面是:记录搜藏,当看到一个炫酷的效果的时候,记得收藏起来,记录到自己云笔记或者收藏夹里,看得多了,印象就比较深刻,当遇到类似效果的时候,到自己记录收藏的地方