当前位置：首页 > news >正文

179-183动画

news 2025/8/30 5:30:33

CSS3-2D变换

举例

.box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}

10.2. 2D缩放

10.3. 2D旋转

10.5. 多重变换

10.6. 变换原点

举例

<head lang="en"><meta charset="UTF-8"><title></title><style>.box {margin: 250px auto;width: 200px;height: 200px;border: 1px solid #000;transform-origin: 50% 50%;transform: rotatez(45deg) translatex(100px);}</style>
</head><body><div class="box"></div>
</body>

结果

CSS3-3D变换

举例

<head lang="en"><meta charset="UTF-8"><title></title><style>*{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;}.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>.btn{width: 100px;height: 30px;line-height: 30px;outline: none;border-style: none;overflow: hidden;border-radius:0;box-shadow: 0 0 10px #a37373;transition: border-radius 1s .5s linear,box-shadow .5s linear;/*过渡延迟*/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 #8c6969;}</style>
</head>
<body>
<button class="btn">按钮</button>
</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: boxanimate 4s 1s ease-in-out infinite alternate;.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>

结果