爱站程序员基地一、css3里面的2D
<head lang=\"en\"><meta charset=\"UTF-8\"><title></title><style>.box{margin: 250px auto;width: 200px;height: 200px;border: 1px solid #000;/*设置2D转化translate(x,y) 可以分开写，默认xtranslate优点：不会影响到其他元素的位置translate中的百分比单位是相对与自身元素的，对行内标签无效*//*transform:translateX(20px);*//*scale (x,y)里面写的数字不跟单位就是倍数的意思，1就是1倍，0.5就是缩放优势：不会影响其他元素，可以设置中心点*//*transform: scale(0.5);*//*变形skew 两个值 第一个 x水平倾斜 第二个 y 垂直倾斜一个值代表两个值*//*transform: skew(45deg,30deg);*//*后两个是平移第二个第三个 scale第一个第四个 skewcos 角度 是顺时针走的*//*transform: matrix(0.866,1,1,0.866,0,0);*//*rotate 角度为正顺时针旋转origin 设置旋转中心 默认选择中心点是元素的中心点x y 可以设置像素或方位名词*//*transform: rotate(45deg);*//*transform-origin:50% 50%;*//*综合写法：顺序会影响转换的效果（先旋转会改变坐标轴方向）同时有位移和其他属性的时候，最好将位移放到最前面*/transform-origin: 50% 50%;/*transform: translatex(100px) rotatez(45deg) scale(.5);*/transform: rotatez(45deg) translatex(100px);}</style></head><body><!--css3 动画 2d 3d 过渡 动画2d: translate 平移 rotate 旋转 scale 伸缩 skew 变形--><div class=\"box\"></div></body>
二、css3里面的3D
<head lang=\"en\"><meta charset=\"UTF-8\"><title></title><style>/*translate(x,y,z) 仅在x,y,z轴上移动translate3d(x,y,z) 在x,y,z轴分别移动到指定距离x轴往左是正值y轴往下是正值z轴往外是正值*/*{margin: 0;padding: 0;}html,body{width: 100%;height: 100%;overflow: hidden;background: #000;}.box{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;width: 300px;height: 300px;/*构建3维空间transform-style：flat 默认子元素不开启3d立体空间*/transform-style: preserve-3d;transform: rotatex(45deg) rotatey(45deg);/*设置透视点 单位是像素透视写在被观察元素的父盒子上面d就是视距，z就是z轴*//* perspective:100px; */}.box_1{position: absolute;width: 300px;height: 300px;left: 0;top: 0;transform-origin: 50%;border: 1px solid #000;font-size: 40px;text-align: center;line-height: 300px;font-weight: 700;}.box1{background-color: rgba(255, 255, 255, 0.64);transform: translatez(150px);}.box2{background-color: rgba(255, 255, 255, 0.64);transform: translatez(-150px);}.box3{background-color: rgba(255, 255, 255, 0.64);transform: translatex(-150px) rotatey(90deg);}.box4{background-color: rgba(255, 255, 255, 0.64);transform: translatex(150px) rotatey(90deg);}.box5{background-color: rgba(255, 255, 255, 0.64);transform: translatey(150px) rotatex(90deg);}.box6{background-color: rgba(255, 255, 255, 0.64);transform: translatey(-150px) rotatex(90deg);}</style></head><body><!--正方体--><div class=\"box\"><div class=\"box_1 box1\">1</div><div class=\"box_1 box2\">2</div><div class=\"box_1 box3\">3</div><div class=\"box_1 box4\">4</div><div class=\"box_1 box5\">5</div><div class=\"box_1 box6\">6</div></div></body>
三、css3里面的动画
<head lang=\"en\"><meta charset=\"UTF-8\"><title></title><style>.box {width: 200px;height: 200px;border: 1px solid #000;text-align: center;line-height: 200px;/*加入元素的动画动画简写：动画名称 持续时间 运动曲线 播放次数 是否反向 动画结束或起始状态必写：动画名称 持续时间简写中不包含：animation-play-state:paused;*/animation: boxanimate 4s 1s ease-in-out infinite alternate;/*设置延迟时间*//*animation-delay: 2s;/!*动画时间*!/animation-duration: 4s;/!*动画方式*!/animation-timing-function: linear;/!*动画名称*!/animation-name: boxanimate;/!*动画播放完 元素的位置forwards 停留到动画之后的位置*!/animation-fill-mode: forwards;/!*动画的播放次数 infinite 循环播放*!/animation-iteration-count: 3;/!*动画播放方式 alternate 奇数次正向播放 偶数次反向播放 reverse 反向播放*!/animation-direction:alternate;/!*动画的状态 running 运行 paused 暂停*!/animation-play-state: running;*/}.box:hover {animation-play-state: paused;}/*定义动画播放器*/@keyframes boxanimate {/*第一种方式*/from {transform: translatex(0px) rotatez(0deg);}to {transform: translatex(500px) rotatez(360deg);}}.boxr {position: absolute;top: 0;left: 50%;margin-left: -50px;width: 100px;height: 100px;background: radial-gradient(at 30px 30px, #fff 1%, #39a0ff, #1142ff);border-radius: 50%;animation:boxranimate 1s linear forwards;}@keyframes boxranimate {/*第二种方式*/0% {top: 0;}40%{top: 600px;}50%{top: 300px;}60%{top: 600px;}70%{top: 400px;}80%{top: 600px;}90% {top: 500px;}94%{top: 600px;}98%{top: 550px;}100% {top: 600px;}}</style></head><body><div class=\"box\">动画</div><div class=\"boxr\"></div></body>
四、css3里面的过渡
过渡动画:过渡的是css样式属性
<head lang=\"en\"><meta charset=\"UTF-8\"><title></title><style>.btn{width: 100px;height: 30px;line-height: 30px;outline: none;border-style: none;overflow: hidden;border-radius:0;box-shadow: 0 0 10px #000;/*在默认样式里面设置过渡一定要有过渡样式的默认样式*/transition: border-radius 1s .5s linear,box-shadow .5s linear;/*如果过渡的属性比较多 设置一样*//*transition: all .5s ease-in-out;*//*过渡延迟*/transition-delay: 0s;/*过渡时间*/transition-duration: .5s;/*过渡属性*/transition-property: width;/*过渡方式ease-in ease-in-out ease-out linear ease*/transition-timing-function: ease-in;}.btn:hover{border-radius: 15px;box-shadow:4px 3px 10px #000;}</style></head><body><button class=\"btn\">按钮</button></body>
