向搜索引擎提交网站地图,嘉兴营销型网站,横沥网站制作招聘,华为网站建设建议转换
移动 /* transform: translate(100px, 200px); */transform: translateX(100px);transform: translateY(100px);
/*一个意思*/
如果后面跟百分数的意思是移动盒子自身x/y方向长度的百分比#xff0c;可以用作子绝父相控制盒子水平居中垂直居中
translate里的xy值是相对…转换
移动 /* transform: translate(100px, 200px); */transform: translateX(100px);transform: translateY(100px);
/*一个意思*/
如果后面跟百分数的意思是移动盒子自身x/y方向长度的百分比可以用作子绝父相控制盒子水平居中垂直居中
translate里的xy值是相对于自身的初始位置的位移而不是相对前一次位置的位移 使用这种方式移动盒子的优点是不影响其他盒子不占用位置的相对定位
行内元素不适用translate
旋转
旋转的风扇 通过旋转制作下拉标识
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.qqq {width: 200px;height: 30px;background-color: aqua;position: relative;}.www {position: absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-bottom: 1px solid #000;border-right: 1px solid #000;transform: rotate(45deg);}/style
/headbodydiv classqqqdiv classwww/div/div/body/html 改变旋转中心点
transform-origin:x y;
x和y用空格隔开xy默认转换中心点的元素是50% 50%
也可以给xy设置方位名词left bottom top right center
一个旋转小动画的demo
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {margin-top: 300px;text-align: center;}.iii {overflow: hidden;width: 200px;height: 200px;border: 1px solid pink;/* background-color: aqua; */margin: 100px auto;}.iii::before {display: block;content: epi;width: 100%;height: 100%;background-color: blueviolet;transform: rotate(180deg);transform-origin: left bottom;transition: all .4s;}.iii:hover::before {transform: rotate(0deg);}/style
/headbodydiv classiii/div/body/html 缩放
transform:scale(x,y);
xy之间有逗号 transform:scale(1,1);宽高都放大一倍等于没有放大 transform:scale(2,2);都放大两倍 transform:scale(2);都放大两倍 transform:scale(0.5,0.5);都缩小二分之一 最大的优点可以设置转换最新缩放默认以中心点缩放且不影响其他盒子
数字不跟单位负数会反向再放缩 优势之前学的修改宽高是以top边为依据向下进行缩放
scale()可以自己设置缩放中心缩放更适合一些自然的动画效果不会影响其他盒子
这种动画效果也是有简写的
transformtranslate() rotatescale()...;
简写的顺序是会影响动画的效果的如果写了translation的话当我们同时具有位移和其他属性的时候一定要先写位移
动画
动画的实现方式类似于函数的调用需要你先写一个动画效果再让目标对象调用这个函数就可以实现动画效果
实现一加载页面就出现的动画效果
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylekeyframes move {0% {transform: translateX(0px);}100% {transform: translateX(1000px);}}div {width: 400px;height: 400px;background-color: aqua;animation-name: move;animation-duration: 1s;}/style
/headbodydiv/div
/body/html
from to可以实现和0%、100%一样的效果 keyframes move {from{transform: translateX(0px);}to {transform: translateX(1000px);}}0%和100%表示动画的开头和结尾也设置不同的百分数表示时间不同动画的不同阶段
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylekeyframes move {0% {transform: translate(0px);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500PX);}100% {transform: translate(0px);}}div {margin: 20px 20px;width: 100px;height: 100px;background-color: aqua;animation-name: move;animation-duration: 10s;}/style
/headbodydiv/div
/body/html
实现一个小方块10s内环绕了一周的效果
动画的常用属性 鼠标经过盒子动画效果暂停拿开又恢复
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylekeyframes move {0% {transform: translate(0px);}25% {transform: translate(1000px, 0);}100% {transform: translate(1000px, 500px);}}div {margin: 20px 20px;width: 100px;height: 100px;background-color: aqua;animation-name: move;animation-duration: 10s;animation-fill-mode: forwards;}div:hover {animation-play-state: paused;}/style
/headbodydiv/div
/body/html
简写 vscode里提供了当你忘记简写顺序的提示
可以按这个写 animation: name duration timing-function delay iteration-count direction fill-mode;
前面两个属性是必写属性名字和时间
速度曲线值 linear匀速 ease默认低速开始加快再变慢 ease-in以低速开始 ease-out以低速结束 ease-in-out以低速开始和结束 steps指定了时间函数的间隔数量步长 steps可以决定分几步来完成动画
一个眼泛粉光的呆猫
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.momo {position: relative;width: 1200px;height: 1200px;background: url(/初识css/微信图片_20241125113021.jpg) no-repeat;margin: 0 auto;}.eye {position: absolute;top: 430px;left: 360px;color: cyan;}.dotted {width: 10px;height: 10px;background-color: #ff9cc2;border-radius: 50%;}.eye2 {position: absolute;top: 435px;left: 500px;}.eye div[class^pulse] {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;box-shadow: 0 0 12px #ff9cc2;border-radius: 50%;animation: pulse 1.2s linear infinite;}.eye div.pulse2 {animation-delay: 0.4s;}.eye div.pulse3 {animation-delay: 0.8s;}keyframes pulse {0% {}70% {width: 40px;height: 40px;opacity: 1;}100% {width: 70px;height: 70px;opacity: 0;}} /style
/headbodydiv classmomodiv classeyediv classdotted/divdiv classpulse1/divdiv classpulse2/divdiv classpulse3/div/divdiv classeye eye2div classdotted/divdiv classpulse1/divdiv classpulse2/divdiv classpulse3/div/div/div/body/html 给元素添加多个动画
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {position: relative;background-color: #ccc;}.bear {z-index: 3;position: absolute;top: 200px;width: 200px;height: 100px;background: url(bear.png) no-repeat;animation: bear 1s steps(8) infinite, move 3s forwards;}keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}keyframes move {0% {left: 0;}100% {left: 50%;transform: translateX(-50%);}}.bg {width: 100%;position: relative;height: 336px;overflow: hidden;}.bg1,.bg2 {width: 100%;position: absolute;height: 336px;animation: bg 2s steps(8) infinite;}.bg1 {z-index: 2;background: url(bg1.png) no-repeat;}.bg2 {z-index: 1;background: url(bg2.png) no-repeat;}keyframes bg {0% {background-position: 0 0;}100% {background-position: -1240px 0;}}/style
/headbodydiv classbear/divdiv classbgdiv classbg2/divdiv classbg1/div/div/body/html 3d转换
translform:translateX(100px):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在y轴上移动
translform:translateZ(100px):仅仅是在z轴上移动
translform:translate3d(x,y,z):xyz分别指要移动的轴的方向和距离
z一般用像素控制xy可以用百分比
3d转换常和透视结合
透视
透视视距的单位是像素
透视写到被观察元素的父盒子里面
也就是现实里一个东西在眼睛里的视觉效果在css里是靠teanslformZperspective结合形成的
z实现了真正的移动透视实现了视觉的移动
3d旋转
translform:rotate(45deg):沿着x轴正方向旋转45度
translform:rotate(45deg):沿着y轴正方向旋转45度
translform:rotate(45deg):沿着z轴正方向旋转45度
translform:rotate(x,y,z。deg):沿着自定义的轴旋转(了解)
实现沿x轴旋转
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {perspective: 500px;}.toushi {width: 200px;height: 200px;background-color: aquamarine;transition: all 1s;}.toushi:hover{transform:rotateX(180deg);}/style
/headbodydiv classtoushi杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀/div
/body/html
沿x轴垂直屏幕向里是正方向垂直屏幕向外是反方向
沿y轴旋转正转是垂直屏幕向里反转是向外
沿z轴正转顺时针反转逆时针 分别是xyz
3d呈现
保证盒子套盒子的时候仍然可以实现3d效果
transform-style:preserve-3d;//子元素开启立体空间
代码写给父级影响的是子盒子
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {perspective: 500px;}.box:hover {transform: rotateY(60deg);}.box {transform-style: preserve-3d;position: relative;width: 200px;height: 200px;margin: 100px auto;}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: pink;}.box div:last-child {background-color: aqua;transform: rotateX(60deg);}/style
/headbodydiv classboxdiv/divdiv/div/div
/body/html 结合写一下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle body {perspective: 1000px;}section {position: relative;width: 216px;height: 216px;margin: 100px auto;transform-style: preserve-3d;animation: move 10s linear infinite;}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../初识css/微信图片_20241125113021.jpg) no-repeat;background-size: contain;}keyframes move {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(-60deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(-120deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(-180deg) translateZ(300px);}/style
/headbodysectiondiv/divdiv/divdiv/divdiv/divdiv/divdiv/div/section/body/html 浏览器私有前缀 -moz-,firefox浏览器的私有属性 -ms-,ie浏览器的私有属性 -webkit-代表safari、chrome私有属性 -o-代表oprea私有属性
