使用纯CSS3实现一个日食动画

日食现象是月亮挡在了地球和太阳之间,也就是月亮遮挡住了太阳. 所以要构造日食,我们须要2个对象:一个代表月亮,一个代表太阳. <div class="eclipse sun"></div> <div class="eclipse moon"></div> 我们把整个日食过程分解为3个阶段:1. 缓慢移入 2. 短暂停留 3. 缓慢移出. 在此期间.会产生3个彼此关联的动画. 首先是月亮的位置移动,我们通过改变月亮的X坐…

纯CSS3实现打火机火焰动画

HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应用的源码整理了一下发给大家. 1.纯CSS3实现打火机火焰动画这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效.另外要说明的是,整个动画都是利用纯CSS3实现的,没有一行JS代码,小伙伴们,这个CSS3动画是不…

2014圣诞节一款纯css3实现的雪人动画特效

在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览源码下载实现的代码. html代码: <span class="text">lolwut<small>-@rsmswlln</small></span> <div class="body"> <div class="hat"> <di…

纯css3 加载loading动画特效

最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading的动画效果,最终在我们前端工程师的帮助之下完成.所以记录在这里,如果感兴趣的朋友也可以看看,大家互相焦炉学习. 1.demo.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&…

一款简洁的纯css3代码实现的动画导航

之前为大家介绍了好多导航菜单,今天给大家分享一款简洁的纯css3代码实现的动画导航.鼠标经过的时候以背景色以菱形渐变为长方形.效果图如下: 在线预览源码下载实现的代码. html代码: <div align="center" style="background-color: #ee1d27; padding: 20px;"> <div class="contener_link"> <div class=&qu…

用 CSS3 做一个流星雨动画

昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一.流星动画首先创建一个 div 作为画布 <div id="stars"> <div class="star" style="top: 0px;left: 500px;"></div> </div> html, body { width: 100%; height: 100%; margin:; o…

纯CSS3制作皮卡丘动画壁纸

前言明天就放假了,趁着今晚的空挡时间来写这篇博客——这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以用CSS3来实现的,于是带着好感就实现了它.至于原图吧,为了不影响大家对我实现的动画产生对比,我就有心地不放上来了,哈哈!那么到底是什么效果呢?接着往下看吧! 正文 OK,接下来就是晒效果图的时候了,看图后才有兴趣了解一下,不然很沉闷,没什么心思看了. PS:由于我这个动画的尺寸做得比较大(720…

纯CSS3实现一个旋转的3D立方体盒子

简单介绍上网易前端微专业课程,里面有一个课外作业是实现一个3D旋转立方体.花了点时间做了下.还有点意思.写个简单教程.供大家学习. 先放上终于要实现的效果注:代码在chrome 43.0.2357.124 m正常,其它浏览器未測试步骤 1.在二维平面上放置好各个面大家小时候可能都玩过"叠盒子",就是在一张纸上线画出一个盒子的展开图,然后裁剪叠出一个盒子,相似下图这样: 看到这个应该有点思路了吧,我们这里也按这个思路把立方体各个面先在平面上摆好,然后通过旋转各个面,组成立方体.…

使用纯CSS3实现一个3D旋转的书本

有一些前沿的电商站点已经開始使用3D模型来展示商品并支持在线定制,而当中图书的展示是最为简单的一种, 无需复杂的建模过程,使用图片和CSS3的一些变换就可以实现更好的展示效果,简洁而有用. 书本的3D模型是全部商品中最为简单的.由于其本质上就是一个立方体(cube).仅仅是带有封面/封底和左側封条. 所以要构造一个3D书本展示,问题就被分解为构造一个立方体+旋转+图片背景. 1. 构造一个立方体要创建一个立方体.首先我们须要创建一个虚拟的三维视觉空间.这能够通过设置包容器元素的perspect…

如何用纯 CSS 创作一个渐变色动画边框

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

怎样使用纯CSS3创建一个简单的五角星图形

我们能够使用SVG.Canvas.CSS3或者背景图片来实现五角星图案及其悬停效果. CSS3引入的伪元素和变换特性使得实现五角星图形很easy,而且能够结合渐变实现更为美丽的效果.因此使用图片实现五角星已经毫无必要(图片占用额外的请求.且数据量大.除非要支持低版本号的桌面IE浏览器). 首先我们创建一个三角形.这一般是使用带大尺寸边线而零内容尺寸的元素来实现,代码示范: .tri { width: 0; height: 0; border-left: 15px solid transparen…

前端每日实战：16# 视频演示如何用纯 CSS 创作一个渐变色动画边框

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

16.纯 CSS 创作一个渐变色动画边框

原文地址:https://segmentfault.com/a/1190000014785816 感想:边框是伪元素::after来的: HTML代码: <div class="box"> you are my<br> FAVORIFE </div> CSS代码: html, body,.box { margin:; padding:; height: 100%; display: flex; justify-content: center; ali…

纯CSS3实现GIF图片动画效果

在线演示本地下载…

纯CSS3绘制神奇宝贝伊布动画特效

在线演示本地下载…

纯CSS3写一个立方体并在鼠标悬停的时候无限循环旋转

…

8个超炫酷的纯CSS3动画及源码分享

在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3动画,有几个非常经典,比如大象走路的那个,如果你对CSS3感兴趣,赶紧来看看吧. 1.纯CSS3实现大象走路动画之前我们分享过一款纯CSS3人物行走动画,效果相当震撼.这一次要给大家介绍的是一款纯CSS3实现的大象走路动画,大象走路时的形态表现的十分逼真,你可能不会想到,这么给力的动画居然是用纯C…

7款纯CSS3实现的炫酷动画应用

1.纯CSS3实现人物摇头动画这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分陶醉的样子,周围还会出现跳动的音符动画. 在线演示源码下载 2.CSS3 Loading进度条加载动画特效 3款绚丽风格今天我要分享一款更加炫酷的CSS3进度条加载动画特效,该动画特效有3个不同的风格,注意,IE6,7,8是不支持该进度条动画的. 在线演示源码下载 3.纯CSS3实现云雾缭绕动…

纯CSS3带动画效果导航菜单

随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多年了,不多由于国内网站要求对IE的兼容,html5+css3的发展很缓慢. html5+css3的出现给前端开发者提供了更多的可能性,以前很多只能通过JS实现的效果用纯粹的css3就能实现了. 下面介绍一个博主在css3学习过程中写的一个纯css3实现的带动画效果的导航菜单. 下面是效果图: 查看示…

8个纯CSS3制作的动画应用及源码

对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效.本文主要是分享了8个纯CSS3制作的动画应用,提供源代码下载. 1.纯CSS3实现发光开关切换按钮前段时间我们向大家分享过一款牛奶般剔透的CSS3 3D开关按钮,效果相当赞.今天我们要来分享一款类似的纯CSS3发光开关切换按钮,它的外观就像一个电灯的开关,可以左右切换.另外开关上的文字还有发光的特…

纯CSS3实现多层云彩变换飞行动画

查看效果:http://hovertree.com/texiao/css3/4/效果2 效果图: 代码如下: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <…

纯css3云彩动画效果

效果描述: 纯CSS3实现的云彩动画飘动效果非常逼真实用使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可…

纯CSS3大转盘抽奖（响应式、可配置）

源于前段时候微信小程序最初火爆公测时段,把以前用 Canvas 实现的大转盘抽奖移植成微信小程序,无奈当时小程序对 Canvas 支持不够完善,只好降低用 CSS3 实现.虽然比不上 Canvas 绘图的绚丽,但也总算完成了一个抽奖的 Demo,详见:https://github.com/givebest/wechat-turntalbe-canvas. 事后想起,CSS3 实现也并不是无有益处,比如简单.快捷.调试方便.渲染想来也是要比 Canvas 要高效的,更重要的一点是支持媒体查询,大转…

纯CSS3实现3D特效的iPhone 6动画

iPhone 6发布不久,屌丝怎能买得起,不过作为程序员,今天看到一个用纯CSS3绘制的iPhone 6,由于CSS3特性的运用,带有点3D的动画特效,大家可以先来看看在线演示效果. 在线演示源码下载 HTML结构代码如下: <div id="wrapper"> <div id="iphone"> <div id="side"></div> <div id="line…

【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特别是在使用 Ajax 技术加载内容的应用场景中,使用时尚的加载动画和进度条告诉用户内容正在加载中是一种非常友好的方式. 您可能感兴趣的相关文章 20个非常绚丽的 CSS3 特性应用演示 23个纯 CSS3 打造的精美LOGO图案 35个让人惊讶的 CSS3 动画效果演示推荐12个漂亮的 CSS3…

8个超震撼的HTML5和纯CSS3动画源码

HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家分享8个最新的HTML5和纯CSS3动画及其源码,这些动画非常让人震撼,你也可以学习一下HTML5源码. 1.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享…

纯CSS3超酷3D旋转立方体动画特效

简要教程这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使用CSS来制作立方体动画,代码简洁易懂,效果更是令人惊叹!下面来看看制作方法. HTML结构立方体结构中,使用一个wrapper div来包裹立方体.在里面使用6个div来制作立方体的6个面. <div class="wrap"> <div class="cu…

11个超震撼的HTML5和纯CSS3动画源码

1.jQuery多功能手风琴个人信息菜单面板这是一款基于jQuery的手风琴个人信息菜单面板,每一个菜单项展开后可以自定义布局,因此可以为每一个菜单项实现多功能.类似这样的多功能菜单还有jQuery/CSS3大屏下拉菜单,非常实用.由于这款手风琴菜单是基于jQuery框架的,因此兼容性和实用性很强. 在线演示源码下载 2.纯CSS3水平手风琴分享按钮菜单对于手风琴动画,我们以前分享过很多,有基于jQuery的手风琴菜单,比如jQuery多层级垂直手风琴菜单:也有基于jQuery的手风琴焦点…

超酷！纯CSS3烧烤动画实现教程

今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧烤架还会冒烟,模拟了烧烤时的情景. 在线演示源码下载接下来简单分析一下实现的代码,代码主要由HTML和CSS组成. HTML代码: <div class="BBQ"> <div class="meat"></div> <d…

纯css3圆形从中心向四周扩散动画效果

查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to {top:130px;}} 效果:http://hovertree.com/texiao/css3/37/1.htm 可以通过 @keyframes 规则,创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式.在动画过程中,您能够多次改变这套 CSS 样式.以百分比来规定改变发生的时…

【使用纯CSS3实现一个日食动画】的更多相关文章