CSS3 渐变、变形、过渡、动画小结

2024-08-29 00:38

本文主要是介绍CSS3 渐变、变形、过渡、动画小结,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

CSS3 渐变(IE9&-用滤镜filter来兼容)

线性渐变:

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]   八个方向,to bottom是默认值,相当于180deg。

<color-stop> = <color> [ <length> | <percentage> ]?

例:background-image:linear-gradient(to left bottom, red 20%, orange 40%, yellow 85%,green 100%);

      background-image:linear-gradient(-135deg,#ccc, #fcf);

径向渐变:

radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

<position> = [ <length> | <percentage> | left | center| right ]? [ <length> | <percentage> | top | center②| bottom ]? 

确定圆心的位置,默认值为center。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center.

<shape> = circle |ellipse   圆或椭圆

例:background-image:radial-gradient(circle at 50px top, red 30%, yellow,green, aliceblue);

重复线性渐变repeating-linear-gradient; 重复径向渐变repeating-radial-gradient;

例:background-image:repeating-radial-gradient(circle,red, yellow 10px, green 80px);

 

CSS3 变形transform

1D变形函数:translateX(), translateY(), scaleX(),scaleY(), skewX(), skewY()…

2D变形函数:translate(),scale(),skew(), rotateZ()…

3D变形函数:rotateX(), rotateY(), rotate3d(),translateZ(), translate3d(), scaleZ(), scale3d(), matrix3d(), perspective()…

 

transformnone<transform-function> [<transform-function>]*

transform-origin<percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]?   变形中心50% 50%

transform-styleflat | preserve-3d

                            flat: 所有子元素在2D平面呈现;preserve-3D:

perspectivenone<length>  景深,属性要设置在父元素上才有效;越小越靠近,越大趋近于none;

                       vs perspective函数用在变形元素上,可与其他transform函数一起使用;

perspective-origin<percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]?    透视中心50% 50%

backface-visibilityvisible | hidden

例:transform: translateX(18px) scaleY(0.8)rotate(18deg) skew(-18deg) //X平移+Y缩放+旋转+倾斜


CSS3 过渡 transition:

·实现属性开始值与结束值之间的平滑过渡;

transition:<single-transition>[,<single-transition>]*

<single-transition> = [ none | <transition-property> ] || <transition-duration> || <transition-timing-function> || <transition-delay>

<' transition-property '>:过渡属性

<' transition-duration '>:过渡持续时间

<' transition-timing-function '>:过渡动画函数

<' transition-delay '>:过渡延迟时间

<transition-timing-function> = ease | linear | ease-in | ease-out |ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number><number><number><number>)

 

linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0,1.0)

ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0)

ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0,1.0)

ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58,1.0)

ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58,1.0)

step-start:等同于 steps(1,start)

step-end:等同于 steps(1, end)

steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。

cubic-bezier(<number>, <number>, <number>,<number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

例:

.front{

  background-color:#fcf;

  border:3px solid grey;

  transition:background-color 1.5s ease-in, border-radius 1.5s ease-out, border-color 1.3s linear 0.2s

}

front:hover{

  background-color:#cec;

  border-radius:150px;

  border-color:transparent;

}

  

触发过渡的方式:CSS伪类如:hover、:focus…;媒体查询;JS切换类名…;

解决-webkit-留下痕迹的问题:硬件加速(添加-webkit-transform:translate(0));


CSS3 动画animation

·  transition只能指定属性的起止状态;animation通过指定“关键帧”来声明动画;

animation:<single-animation>[,<single-animation>]*

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

<' animation-name '>:动画名称,动画名必须对应一个@keyframes规则;

<' animation-duration '>:动画的持续时间;

<' animation-timing-function '>:动画过渡类型,与transition-timing-function类似;

<' animation-delay '>:动画延迟的时间

<' animation-iteration-count '>=infinite | <number>:对象动画的循环次数。默认值为1;

<' animation-direction '>=normal | reverse | alternate| alternate-reverse

alternate:先正常再反方向,交替运行;alternate-reverse:先反向再正向;

<' animation-fill-mode '>= none | forwards | backwards | both对象动画时间之外的状态;

<' animation-play-state '>= running | paused对象动画的状态。


animation实现的近似翻牌效果

<style>

.wrap{

  perspective:1000px;

}

.card{

  width:250px;

  height:350px;

  background-image:url(frontface.jpg);

  background-size:100% 100%;

}

.card:hover{

  animation: spin 5s linear infinite;

}

@keyframes spin{

  0%{ transform:rotateY(0); }

  25%{ background-image: url(frontface.jpg); }

  26%{ background-image: url(backface.jpg); }

  75%{ background-image: url(backface.jpg); }

  76%{ background-image: url(frontface.jpg); }

  100%{ transform:rotateY(360deg); }

}

</style>

<div class="wrap">

    <div class="card"></div>

</div>


/* 部分属性总结自 @飘零雾雨 《CSS参考手册》,灰色底色代表属性的默认值*/

这篇关于CSS3 渐变、变形、过渡、动画小结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1116343

相关文章

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

Redis分片集群、数据读写规则问题小结

《Redis分片集群、数据读写规则问题小结》本文介绍了Redis分片集群的原理,通过数据分片和哈希槽机制解决单机内存限制与写瓶颈问题,实现分布式存储和高并发处理,但存在通信开销大、维护复杂及对事务支持... 目录一、分片集群解android决的问题二、分片集群图解 分片集群特征如何解决的上述问题?(与哨兵模

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

SpringBoot中使用Flux实现流式返回的方法小结

《SpringBoot中使用Flux实现流式返回的方法小结》文章介绍流式返回(StreamingResponse)在SpringBoot中通过Flux实现,优势包括提升用户体验、降低内存消耗、支持长连... 目录背景流式返回的核心概念与优势1. 提升用户体验2. 降低内存消耗3. 支持长连接与实时通信在Sp