网站的数据库怎么建立,做购物网站学什么技术,绍兴网页设计,摄影网站模板源码css3过渡与动画 前言过渡过渡的基本使用 transition兼容性transition属性基本使用哪些属性可以参与过渡all过渡的四个小属性 过渡的缓动效果常用缓动参数贝塞尔曲线 过渡效果实战 动画动画的定义和调用动画的执行次数 动画效果实战 案例#xff1a;发光的灯泡案例#xff1a;… css3过渡与动画 前言过渡过渡的基本使用 transition兼容性transition属性基本使用哪些属性可以参与过渡all过渡的四个小属性 过渡的缓动效果常用缓动参数贝塞尔曲线 过渡效果实战 动画动画的定义和调用动画的执行次数 动画效果实战 案例发光的灯泡案例飞行的火箭结语 前言
在数字时代网页不再是静态的画面而是充满活力和动感的空间。CSS3的过渡与动画技术就像是一场魔法表演能够赋予网页以生命。本文将引领你进入这个奇妙的世界解锁CSS3过渡与动画的神奇效果。
过渡
过渡的基本使用 transition
transition过渡属性时css3浓墨重彩的特性过渡可以为一个元素在不同样式之间变化自动添加“补间动画”
兼容性
过渡从IE10开始兼容移动端兼容良好 曾几何时网页上的动画特效基本都是由JavaScript定时器实现的现在逐步改为使用css3过渡 优点动画更细腻内存开销小
transition属性基本使用 注意这里的1s、0s里的s不能省略
哪些属性可以参与过渡
所有数值类型的属性都可以参与过渡比如width.height、left、top、border-radius背景颜色和文字颜色都可以被过渡所有变形包括2D和3D都能被过渡
all
如果要所有属性都参与过渡可以写all
transition:all 1s linear 0s;注意不要滥用会引发效益问题
过渡的四个小属性 过渡的缓动效果
transition 的第三个参数就是缓动参数也是变化速度曲线
常用缓动参数 贝塞尔曲线
网站https://cubic-bezier.com/可以生成贝塞尔曲线可以自定义动画缓动参数
transition:width 1s cubic-bezier(.44,-0.62,.62,1.59) 0s;过渡效果实战 过渡效果实战_当鼠标移到图片上显示标题
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0;padding: 0;}ul li {list-style: none;}img {vertical-align: middle;}.box {margin: 100px auto;width: 500px;}.box ul {display: flex;}.box ul li {position: relative;margin-right: 20px;}.box ul li img {width: 200px;}.box ul li .info {position: absolute;bottom: 0;text-indent: 1em;left: 0;width: 100%;height: 35px;line-height: 35px;background: rgba(0, 0, 0, .7);color: #fff;opacity: 0;transition: opacity .5s linear 0s;}.box ul li:hover .info {opacity: 1;}
/stylebodydiv classboxulliimg srcimages/01.webp altdiv classinfo美景标题/div/liliimg srcimages/02.webp altdiv classinfo美景标题/div/li/ul/div/body/html过渡效果实战_当鼠标移上去背景旋转自身放大
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0;padding: 0;}ul li {list-style: none;}.box {margin: 100px auto;width: 600px;}.box ul {display: flex;}.box ul li::before {content: ;display: block;height: 100%;position: absolute;left: 0;top: 0;width: 100%;z-index: 1;transform: rotate(0);transition: transform 1s linear 0s;}.box ul li:nth-child(1)::before {background: url(images/a_1.png) no-repeat center;}.box ul li:nth-child(2)::before {background: url(images/a_2.png) no-repeat center;}.box ul li:nth-child(3)::before {background: url(images/a_3.png) no-repeat center;}.box ul li:nth-child(4)::before {background: url(images/a_4.png) no-repeat center;}.box ul li {width: 107px;height: 107px;position: relative;text-align: center;margin-right: 20px;}.box ul li img {width: 50px;position: relative;z-index: 2;margin-top: 30px;transform: scale(1);transition: transform .5s ease 0s;}/* 背景圆环旋转一周 */.box ul li:hover::before {transform: rotate(360deg);}/* 中心图标放大1.2倍 */.box ul li:hover img {transform: scale(1.2);}
/stylebodydiv classboxulliimg srcimages/icon1.svg alt/liliimg srcimages/icon2.svg alt/liliimg srcimages/icon3.svg alt/liliimg srcimages/icon4.svg alt/li/ul/div/body/html过渡效果实战_当鼠标移到图片上小狗打开里面是小猫
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0;padding: 0;}.box {position: relative;width: 500px;margin: 50px auto;perspective: 1000px;}.box img {border: 1px solid #000;width: 120px;border-radius: 100px;}.dog {position: absolute;left: 0;top: 0;transform-origin: 0 0;transform: rotate(0);transition: transform 2s ease 0s;}.box:hover .dog {cursor: pointer;transform: rotateY(-180deg);}.n1 .dog {transform-origin: 100% 100%;}.n1:hover .dog {transform: rotateY(180deg);}.n2 .dog {transform-origin: 0 0;}.n2:hover .dog {transform: rotateX(-180deg);}
/stylebodydiv classboximg classcat srcimages/cat.jpg altimg classdog srcimages/dog.jpg alt/divdiv classbox n1img classcat srcimages/cat.jpg altimg classdog srcimages/dog.jpg alt/divdiv classbox n2img classcat srcimages/cat.jpg altimg classdog srcimages/dog.jpg alt/div/body/html旋转的正方形
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewportcontentwidthdevice-width,initial-scale1, user-scalableno, maximum-scale1,minimum-scale1!-- widthdevice-width, initial-scale1.0 页面的宽度应该等于设备的宽度并且初始缩放级别为 1.0。这有助于确保在移动设备上以正常大小呈现页面而不是被过度缩放。 --titleDocument/titlestyle* {margin: 0;padding: 0;}section {width: 202px;height: 202px;margin: 200px auto;perspective: 10000px;}.box1 {width: 202px;height: 202px;perspective: 10000px;position: relative;/* 设置变形类型保留它内部的3D效果 *//* 这个box盒子又是舞台又是演员这个box整体带着里面的p旋转 */transform-style: preserve-3d;transition: all 10s ease 0s;}section:hover .box1 {transform: rotateX(360deg) rotateY(360deg);}p {width: 200px;height: 200px;position: absolute;top: 0;left: 0;}.box1 p:nth-child(1) {background: rgb(62 255 244 / 73%);/* 前面 */transform: translateZ(100px)}.box1 p:nth-child(2) {background: rgba(242, 255, 62, 0.959);/* 顶面 */transform: rotateX(90deg) translateZ(100px)}.box1 p:nth-child(3) {background: rgba(65, 62, 255, 0.73);/* 背面 */transform: rotateX(180deg) translateZ(100px)}.box1 p:nth-child(4) {background: rgba(62, 255, 120, 0.73);/* 底面 */transform: rotateX(-90deg) translateZ(100px)}.box1 p:nth-child(5) {background: rgb(255, 122, 34);/* 侧面 */transform: rotateY(90deg) translateZ(100px)}.box1 p:nth-child(6) {background: rgba(255, 62, 72, 0.73);/* 侧面 */transform: rotateY(-90deg) translateZ(100px)}/style
/headbodysectiondiv classbox1p /pp /pp /pp /pp /pp /p/div/section/body/html动画
动画的定义和调用
可以使用keyframes来定义动画keyframes表示“关键帧”在项目上线前要补上-webkit-这样的私有前缀 定义动画之后就可以使用animation属性调用动画
动画的执行次数
第五个参数就是动画的执行次数
animation:r 1s linear 0s 3; //3表示次数如果想永远执行可以写infinite
animation:r 1s linear 0s infinite; //表示一直执行动画如果想让动画的第2、4、6……偶数次自动逆向执行那么要加上alternate参数即可
animation:r 1s linear 0s infinite alternate; 如果想让动画停止在最后结束状态那么要加上forwards
animation:r 1s linear 0s forwards; 动画效果实战 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;margin: 100px auto;background-color: orange;animation: r 3s linear 0s infinite;}.box1 {width: 200px;height: 200px;background-color: blue;animation: move 1s linear 0s infinite alternate;margin-bottom: 20px;}.box2 {width: 200px;height: 200px;background-color: green;animation: radius 1s linear 0s forwards;margin-bottom: 20px;}keyframes r {from {transform: rotate(0);}to {transform: rotate(360deg);}}keyframes move {from {transform: translateX(0)}to {transform: translateX(300px)}}keyframes radius {from {border-radius: 0;}to {border-radius: 100px;}}
/stylebodydiv classbox/divdiv classbox1/divdiv classbox2/div/body/html案例发光的灯泡 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {margin: 0;padding: 0;}.box {position: relative;margin: 100px;text-align: center;width: 200px;height: 200px;}.faguang {position: absolute;left: -70px;top: -60px;animation: faguang .5s linear 0s infinite alternate;}keyframes faguang {0% {opacity: 1;}100% {opacity: 0;}}
/stylebodydiv classboximg classdepao srcimages/dengpao.png altimg classfaguang srcimages/guang.png alt/div/body/html案例飞行的火箭 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
style* {padding: 0;margin: 0;}.hj {position: absolute;left: 400px;top: 400px;animation: fly .3s ease-in 0s infinite alternate;}.line {position: absolute;width: 1px;height: 150px;background: #f00;left: 400px;top: 400px;animation: linefly 1s linear 0s infinite;opacity: 0;transform: rotate(45deg)}.line1 {position: absolute;width: 1px;height: 150px;background: #f00;left: 500px;top: 400px;animation: linefly 1s linear .4s infinite;opacity: 0;transform: rotate(45deg)}.line2 {position: absolute;width: 1px;height: 200px;background: #f00;left: 600px;top: 400px;animation: linefly 1s linear .8s infinite;opacity: 0;transform: rotate(45deg)}.line3 {position: absolute;width: 1px;height: 100px;background: #f00;left: 700px;top: 300px;animation: linefly 1s linear .8s infinite;opacity: 0;transform: rotate(45deg)}keyframes linefly {0% {opacity: 0;transform: rotate(45deg) translateY(-300px);}50% {opacity: 1;}100% {opacity: 0;transform: rotate(45deg) translateY(300px);}}keyframes fly {from {transform: translateX(20px) translateY(20px);}to {transform: translateX(-20px) translateY(-20px);}}
/stylebodydiv classhjimg srcimages/huojian.png alt/divdiv classline/divdiv classline1/divdiv classline2/divdiv classline3/div/body/html结语
通过深入学习CSS3的过渡与动画技术你将能够为网页设计注入更多创意和动感。这不仅是技术的提升更是对设计艺术的追求。让我们一同在动感的舞台上展示创意用过渡与动画让网页焕发生机。
