CSS3 动画旋转盒子

2024-09-05

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

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

CSS3动画旋转——（图片360°旋转）

今天在重构网页特效的时候,想着用到一个css3的旋转特效.简单来一个demo. html <div class="box"> <img src="./yft.png" alt="" class="rotation"> </div> css <style> @-webkit-keyframes rot { from { -webkit-transform: rotate(0deg)

Css3 - 动画旋转

旋转1: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #box { background:red; color:#fff; width:100px; height:100

css3制作旋转动画

现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片思路:1.制作之前呢,我们先来整理一下思路,这个圆轴轨迹上一共有八个圆. 仔细看的话,你会发现一个规律,那就是一个月是360度的,里面放了八个圆,也就是每个圆都是占了45度,然后平均的在圆轴上面分布开来.有了这个发现之后,我们就开始想想该怎么布局好啦.下面是我的布局方式,可以给大家参考一下: 我是每两个垂直对应的圆就放在同一个d

用css3制作旋转加载动画的几种方法

以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会利用css3去实现一些很酷的效果,这些效果原来更多的是利用图片来实现.最近的一个改进就是利用css3制作旋转加载动画.以下将分别介绍几种实现的方案. 方案1,图片辅助传统做法是直接用动态的GIF图片,这个方案是用PNG图片加上背景颜色来模拟静止的加载图片,然后利用css中的animation处理图

鼠标HOVER时区块动画旋转变色的CSS3样式掩码

鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Sticky notes using CSS3 and Google Fonts (Step 5)</title> </head> <body> <div style="text-align:center

css3动画使用技巧之—border旋转时的应用。

<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF-8"/> <style type="text/css"> body{ background: #ccc; } .he{ width: 100px; height: 100px; margin: 200px auto; border: 10px solid bla

css3动画应用-音乐唱片旋转播放特效

css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击图片,音乐播放,图片开始旋转. 1.动设置图片为圆形居中,使图片一直不停旋转. 核心代码: #xuanzhuan{ -webkit-animation: play 10s linear infinite; -moz-animation: play 10s linear infinite; anima

css3 动画总结

原来的时候写过一个小程序,里面有一个播放背景音乐的按钮(也是一个圆形的图片),它是一直在旋转的,当我们点击这个按钮的可以暂停或者播放背景音乐.当初的这个动画,是同事自己写的,我看到的时候以为是他在上面放了一个gif图呢.但是没有想到他是自己写的一个动画.早就想自己整理一下关于c3 动画的一些信息了,今天就在这里小小的总结一下,然后也算是自己的一个小的笔记. 首先说c3动画,就必须提到animation 这个就相当于咱们写的background的一样,是一个c3新增的属性.这个就能写动画了.如果你

CSS3动画详解(结合实例)

一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程这边就不细说这两者具体的低优缺点.一般做2D动画的话,可以使用CSS3的transition或animation 二.CSS3动画animation属性(可直接跳转三.实例) 简写: //模板 animation: name duration timing-function delay iteration-c

CSS3动画制作

CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fadeInUp不支持iphone6 plus,自己用2d重写效果如下: 详细代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text

用CSS3动画，让页面动起来

以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的demo页面: 如果对CSS3动画的一些基础概念不是很熟悉,可以参考<CSS3中的动画效果记录>. 一.animate.css库中的相关知识点从github上面下载下来是一个css文件,文件里面有3000多行代码,大部分的代码还是能看懂的. 但里面的代码还是有很多耐人寻味的地方. 1. 关键帧的选

用CSS3动画特效实现弹窗效果

提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.html CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式:过渡.动画.变化.当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果.这些效果直接由浏览器引擎处理,可以节省开销.尽管如此,它们也会耗费大量的处理能力,尤其是一些复杂的WEB页面上.即使是最基本的效果,也是如此.本篇

简单CSS3动画制作

本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://github.com/daneden/animate.css)可以处理,但按需也要扩展了一些动画如下: @charset "UTF-8"; /*! 2015.03.21 Nelson Kuang Animate.css扩展动画 */ /* @creator: Nelson Kuang @name:

css3动画特效：上下晃动的div

css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div> /** * transform-origin 设置旋转元素的基点位置 * animation-name 设置动画名称 * animation-duration 设置动画时间 * animation-fill-mode 设置播放后的状态 * animation-iteration-count 设置循环

CSS3 动画一瞥

伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来,而在这之前,一提到动画我们可能会想到JavaScript,Flash,Java插件等.如果是用JavaScript那倒也不是很糟糕的事啦,但如果写出来的效果非要强迫客户端安装第三方插件才能显示,毕竟不是很理想.这也就是为什么谷歌会不遗余力地推广他所主导的开源项目WebRTC (Web Real-Time Communication),把实时通讯的功能都做进浏览器,像视频通话这样的高级应用直接在JavaScript里

Minimit Anima – 硬件加速的 CSS3 动画插件

Minimit Anima 是一个实现 CSS3 Transforms 和 Transitions 动画的 jQuery 插件.基于硬件加速的 CSS3 动画执行更快,而且它有一个类似于 jQuery 动画的 API.插件中包含的 jquery.transform.js 让你可以在不支持的 Transforms 的浏览器中实现缩放.旋转和倾斜效果. 您可能感兴趣的相关文章 Metronic – 基于 Bootstrap 响应式后台管理模板 Verlet-js:超炫的开源 JavaScript 物

css3动画由浅入深总结

阅读目录一:过渡动画---Transitions 二:Animations功能三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): 六:理解transform-origin属性七:理解transform-style属性八:理解perspective属性九:理解perspective-origin属性十:理解backface-visibility属性十一:css3中3D变换--translateZ()和translat

CSS3 动画基础

该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 译文:你需要知道的CSS3 动画技术原文:What You Need To Know About Behavioral CSS 为网络而生 CSS 3的属性比如border-radius.box-shadow和 text-shadow 在webkit(Safari.Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的

CSS3实现旋转的太极图（二）：只用1个DIV

效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没事折腾一下,做个的记录. 4.有网友反应旋转的时候会卡. 5.IE浏览器,出门左拐.走好不送 ~~~ 实现步骤: HTML: <div class="box-taiji"></div> 步骤一: .box-taiji {width:;height:400px;pos

CSS3绘制旋转的太极图案（一）

实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01"></div> <div class="circle-02"></div> </div> 步骤一: .box-taiji {width:400px;height:400px;position:relative;margin:50px auto;bor

CSS3 动画 旋转盒子

热门专题

CSS3 动画旋转盒子