利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果。下面将一些项目中使用到的示例发布出来,供大家一起学习研究。演示地址:runjs。浏览器兼容:Chrome,Safari,IE10及以上,IE9不支持渐变效果,IE8 ...
利用CSS3的伪类元素hover以及transform,transition等动画属性,可以做出一些炫酷的动画效果。下面将一些项目中使用到的示例发布出来,供大家一起学习研究。演示地址:runjs。
浏览器兼容:Chrome,Safari,IE10及以上,IE9不支持渐变效果,IE8以下不支持。
transform:该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。
transition:过渡属性,该属性为简写属性,用于设置4个过渡属性:
- transition-property :规定设置过渡效果的CSS属性的名称。
- transition-duration :规定完成过渡效果需要多少秒。
- transition-timing-function :规定速度效果的速度曲线。
- transition-delay:定义过渡效果何时开始。
公共原则:
首先定义好悬浮前的css样式,hover out的过渡属性(transition),并且设置透明度(opacity)为0,通过:hover伪类来设置悬浮后的样式,过渡属性(transition,如果设定该属性则元素的过渡效果按照设定的值进行变化同时hover out后按照hover前定义的值变化,否则过渡效果按照hover前定义的值变化),透明度为1。
核心代码:
1.标题右下浮动显示出3D效果
位移:translate/X/Y。
悬浮前:
.cs-style-1 figcaption { height: 100%; width: 100%; opacity: 0; text-align: center; backface-visibility: hidden; transition: transform 0.3s, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;}
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:CSS3悬浮动画效果
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。