css3过渡

transition

例子，艺龙旅行网

连写

2D变形

旋转

移动

缩放

扭曲

改变中心点

演练

原始样式

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">div{width: 6.25rem;height: 6.25rem;border: 1px #f00 solid;margin:100px auto;}</style></head><body><div>原始</div><div>2D旋转</div><div></div><div></div><div></div></body>
</html>

transform translate

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">div{width: 6.25rem;height: 6.25rem;border: 1px #f00 solid;margin:100px auto;transition: all 2s;}div:nth-child(1):hover {transform:translate(100px,200px) ;}</style></head><body><div>原始</div><div>2D旋转</div><div></div><div></div><div></div></body>
</html>

transform rotate 旋转

         div:nth-child(2):hover{transform: rotate(60deg);}

transform scale 缩放

         div:nth-child(3):hover{transform:scale(3,0.5)}

scale一个参数和两个参数的意义明确

transform skew 扭曲

         div:nth-child(4):hover{transform: skew(0deg,20deg);}

横向钮曲，往右边扯

纵向钮曲，往上面扯

最终代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">div{width: 6.25rem;height: 6.25rem;border: 1px #f00 solid;margin:40px auto;transition: all 2s;}div:nth-child(1):hover {transform:translate(100px,200px) ;}div:nth-child(2):hover{transform: rotate(60deg);}div:nth-child(3):hover{transform:scale(3,0.5)}div:nth-child(4):hover{transform: skew(0deg,20deg);}</style></head><body><div>原始</div><div>2D旋转</div><div>2D缩放</div><div>2D扭曲</div></body>
</html>

css3 2D动画效果 200303相关推荐

一文搞懂css 2D动画效果
文章目录前言一.过渡动画效果简述 transition: 1.代码示例 2.效果展示二.定位translate 1.2D定位 transform: translate(50%, 50%); ①. ...
html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示下载资源: 16 次下载资源下载积分: 20 积分 function () { ...
在vue项目中使用gsap，实现极佳的2d动画效果
在vue项目中使用gsap,实现极佳的2d动画效果一.GSAP是什么? 二.使用步骤 1.引入库 2.在vue中使用 3.vue组件使用gsap完整代码总结一.GSAP是什么? GSAP全称是G ...
android开发骰子动画,GitHub - jieyou/dice: 一个css3 3d动画效果的色子（或称骰子？）...
dice -- 3d色子(或称骰子?) 一个css3 3d动画效果的色子完全效果(完全流畅的3d动画.阴影.圆角):Chrome\Firefox\Safari\iOS Safari 6.0+\And ...
Css3旋转动画效果
Css3旋转动画效果通过@keyframes规则能够创建动画,CSS3是可以通过代码来创建动画的.用@keyframes定义规则后,就不用像之前先在元素定义执行几秒,@keyframes规则内指定一 ...
html5+css3实现2D动画效果演示
这些代码主要实现的功能就是一些2D的动画效果,如平移动画,旋转动画等等. HTML5代码: <span style="font-size:18px;"><!doc ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
html css 悬浮切换效果,CSS3悬浮动画效果_html/css_WEB-ITnose
利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...
CSS3悬浮动画效果
利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果.下面将一些项目中使用到的示例发布出来,供大家一起学习研究.演示地址:runjs. 浏 ...

css3 2D动画效果 200303

css3过渡

transition

2D变形

旋转

移动

缩放

扭曲

改变中心点

演练

原始样式

transform translate

transform rotate 旋转

transform scale 缩放

transform skew 扭曲

最终代码

css3 2D动画效果 200303相关推荐

最新文章

热门文章