使用CSS3旋转DIV
2016-04-17 23:37
716 查看
使用CSS3旋转DIV
参加某公司的前端工程师笔试,遇到以下问题。
请完成以下填空,使得id为loading的div每1秒转1圈并无限循环。
我的实现方式:RotateDiv.html
实现效果截图:
附录:
可以参考的其他资料:
1.纯HTML5+CSS3制作图片旋转:/content/5446870.html
-webkit-animation 是一个复合属性,定义如下:
-webkit-animation: name duration timing-function delay iteration_count direction;
name: 是 @-webkit-keyframes 中需要指定的方法,用来执行动画。
duration: 动画一个周期执行的时长。
timing-function: 动画执行的效果,可以是线性的,也可以是"快速进入慢速出来"等。
delay: 动画延时执行的时长。
iteration_count: 动画循环执行次数,如果是infinite,则无限执行。
direction: 动画执行方向。
@-webkit-keyframes 中的from和to 两个属性,就是指定动画执行的初始值和结束值。
-webkit-animation-play-state:paused; 暂停动画的执行。
效果截图:
代码:
2.用CSS3让div立体3D的旋转:柯乐义:http://keleyi.com/a/bjad/s89uo4t1.htm
柯兄方案的效果截图:
3.CSS3实现旋转的太极图(二):只用1个DIV:/article/5087112.html
赵小磊的炫酷太极图,我重点推荐。
赵兄方案的效果截图:
赵兄方案的代码:
4.旋转3D立方体
效果图:
每次挑战都是对自身的一次惊醒,发现不足时,要努力改正和提高。始终保持谦逊的态度对待学习,对待工作,对待生活。
CSS3 教程:http://www.w3school.com.cn/css3/index.asp
参加某公司的前端工程师笔试,遇到以下问题。
请完成以下填空,使得id为loading的div每1秒转1圈并无限循环。
<html> <head> <style> #loading{ width:100px; height:100px; position:absolute; animation:circling__linear 0s __; } @__circling{ from{ transform:__; } to{ transform:__; } } </style> </head> <body> <div id="loading"></div> </body> </html>
我的实现方式:RotateDiv.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋转Div</title> <style> #loading{ width:400px; height:320px; background: url(gaoyuanyuan.png) no-repeat; position:absolute; animation:circling 1s linear 0s infinite; } @keyframes circling{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } </style> </head> <body> <div id="loading"></div> </body> </html>
实现效果截图:
附录:
可以参考的其他资料:
1.纯HTML5+CSS3制作图片旋转:/content/5446870.html
-webkit-animation 是一个复合属性,定义如下:
-webkit-animation: name duration timing-function delay iteration_count direction;
name: 是 @-webkit-keyframes 中需要指定的方法,用来执行动画。
duration: 动画一个周期执行的时长。
timing-function: 动画执行的效果,可以是线性的,也可以是"快速进入慢速出来"等。
delay: 动画延时执行的时长。
iteration_count: 动画循环执行次数,如果是infinite,则无限执行。
direction: 动画执行方向。
@-webkit-keyframes 中的from和to 两个属性,就是指定动画执行的初始值和结束值。
-webkit-animation-play-state:paused; 暂停动画的执行。
效果截图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #liu{ width:280px; height: 279px; background: url(shishi.png) no-repeat; border-radius:140px; -webkit-animation:run 6s linear 0s infinite; } #liu:hover{ -webkit-animation-play-state:paused; } @-webkit-keyframes run{ from{ -webkit-transform:rotate(0deg); } to{ -webkit-transform:rotate(360deg); } } </style> </head> <body> <div id="liu"></div> </body> </html>
2.用CSS3让div立体3D的旋转:柯乐义:http://keleyi.com/a/bjad/s89uo4t1.htm
柯兄方案的效果截图:
3.CSS3实现旋转的太极图(二):只用1个DIV:/article/5087112.html
赵小磊的炫酷太极图,我重点推荐。
赵兄方案的效果截图:
赵兄方案的代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3实现旋转的太极图(二):只用1个DIV</title> <style> /* 利用background-image实现左黑右白的圆,IE下测试不太理想 */ /* .box-taiji {width:400px;height:400px;position:relative;margin:30px auto;border-radius:400px;box-shadow:0 0 30px rgba(0,0,0,.5);background-image:linear-gradient(left, #000 50%, #fff 50%);background-image:-webkit-linear-gradient(left, #000 50%, #fff 50%);background-image:-moz-linear-gradient(left, #000 50%, #fff 50%);} .box-taiji:before, .box-taiji:after {position:absolute;content:"";display:block;} .box-taiji:before {width:200px;height:200px;top:0;left:100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;} .box-taiji:after {width:60px;height:60px;top:70px;left:170px;z-index:2;background-color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;} */ .box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000;border-right:200px solid #fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px;animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;-moz-animation:rotation 2.5s linear infinite;} .box-taiji:before, .box-taiji:after {position:absolute;content:"";display:block;} .box-taiji:before {width:200px;height:200px;top:0;left:-100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;} .box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2;background-color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;} @keyframes rotation { 0% {transform:rotate(0deg);} 100% {transform:rotate(-360deg);} } @-webkit-keyframes rotation { 0% {-webkit-transform:rotate(0deg);} 100% {-webkit-transform:rotate(-360deg);} } @-moz-keyframes rotation { 0% {-moz-transform:rotate(0deg);} 100% {-moz-transform:rotate(-360deg);} } </style> </head> <body> <div class="box-taiji"></div> </body> </html>
4.旋转3D立方体
效果图:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> body { -webkit-perspective: 800px; perspective: 800px; -webkit-perspective-origin: 50%; perspective-origin: 50%; } .cube { display: inline-block; width: 100px; height: 100px; margin: 50px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotate 5s infinite; animation: rotate 5s infinite; } .cube > div { position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 15px rgba(0, 0, 0, .2); background-color: rgba(255, 255, 255, .1); color: gray; font-size: 20px; line-height: 100px; text-align: center; } .front { -webkit-transform: translatez(50px); transform: translatez(50px); } .back { -webkit-transform: rotatey(180deg) translatez(50px); transform: rotatey(180deg) translatez(50px); } .right { -webkit-transform: rotatey(90deg) translatez(50px); transform: rotatey(90deg) translatez(50px); } .left { -webkit-transform: rotatey(-90deg) translatez(50px); transform: rotatey(-90deg) translatez(50px); } .top { -webkit-transform: rotatex(90deg) translatez(50px); transform: rotatex(90deg) translatez(50px); } .bottom { -webkit-transform: rotatex(-90deg) translatez(50px); transform: rotatex(-90deg) translatez(50px); } @-webkit-keyframes rotate { from { -webkit-transform: rotatey(0); } to { -webkit-transform: rotatey(360deg); } } @keyframes rotate { from { transform: rotatey(0); } to { transform: rotatey(360deg); } } .c1 > div { -webkit-backface-visibility: visible; backface-visibility: visible; } .c2 > div { -webkit-backface-visibility: hidden; backface-visibility: hidden; } </style> </head> <body> <div class="cube c1"> <div class="front">1</div> <div class="back">2</div> <div class="right">3</div> <div class="left">4</div> <div class="top">5</div> <div class="bottom">6</div> </div> <div class="cube c2"> <div class="front">1</div> <div class="back">2</div> <div class="right">3</div> <div class="left">4</div> <div class="top">5</div> <div class="bottom">6</div> </div> </body> </html>
每次挑战都是对自身的一次惊醒,发现不足时,要努力改正和提高。始终保持谦逊的态度对待学习,对待工作,对待生活。
CSS3 教程:http://www.w3school.com.cn/css3/index.asp
相关文章推荐
- css浮动模型初理解
- CSS中margin和padding的区别
- Scrapy学习系列(一):网页元素查询CSS Selector和XPath Selector
- CSS3——3D效果
- CSS相关知识二
- 前端 CSS 笔记1
- css
- 盒子模型 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型
- 解决smarty标签的定界符{}与css的{}冲突问题
- CSS3特效之转化(transform)和过渡(transition)
- QTableWidget详解(样式、右键菜单、表头塌陷、多选等)
- 自定义的环形进度条样式
- css样式的权重
- css3新增的选择器
- css3的部分属性
- 自定义ProgressBar样式
- css box-sizing以及calc()
- CEdit 样式与消息 解析
- 利用JS脚本通过getAttribute()和setAttribute()等对CSS样式进行操作
- css--多重样式