0
点赞
收藏
分享

微信扫一扫

2022-4-29 几种种常用的特效动画

全栈学习笔记 2022-05-01 阅读 21
动画webviewhtml

一、吃豆人

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        /* 定义动画 */

        @keyframes bean_roll1 {

            /* 定义关键帧 */

            from {

                transform: rotate(0);

            }

            to {

                transform: rotate(45deg);

            }

        }

@keyframes bean_roll2 {

  /* 定义关键帧 */

            from {

                transform: rotate(0);

            }

            to {

                transform: rotate(-45deg);

            }

        }

  @keyframes dou_move {

            0% {

                left: 200px;

                opacity: 1;

            }

            50% {

                left: 80px;

                opacity: 1;

            }

            50.1% {

                left: 80px;

                opacity: 0;

            }

            100% {

                left: 80px;

                opacity: 0;

            }

        }

  .bean {

            width: 200px;

            height: 200px;

            background-color: #333;

            position: relative;

        }

.bean .cdr {

            width: 0;

            height: 0;

            border: 50px solid gold;

            border-right-color: transparent;

            border-radius: 50%;

            margin: 0 auto;

            position: absolute;

            left: 30px;

            top: 50px;

        }

 .cdr:nth-of-type(1) {

            /* animation:动画名称 动画执行时间 【延迟时间 动画曲线 执行次数 是否反向执行 是否保留最后一帧】 */

            animation: bean_roll1 1s linear infinite alternate;

        }

.cdr:nth-of-type(2) {

  animation: bean_roll2 1s linear infinite alternate;

  }

 .eye {

            width: 20px;

            height: 20px;

            border-radius: 50%;

            background-color: #333;

            position: absolute;

            left: 80px;

            top: 60px;

        }

.dou {

            width: 16px;

            height: 16px;

            background-color: gold;

            position: absolute;

            border-radius: 50%;

            left: 200px;

            top: 92px;

            animation: dou_move 2s linear infinite;

        }

    </style>

</head>

<body>

    <div class="bean">

        <div class="cdr"></div>

        <div class="cdr"></div>

        <div class="eye"></div>

        <div class="dou"></div>

    </div>

</body>

</html>

效果：

二、旋转的方块

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>case04</title>

    <style>

        @keyframes roll {

            from {

                transform: rotateX(0)

                           rotateY(0)

                           rotateZ(0);

            }

            to {

                transform: rotateX(360deg)

                           rotateY(720deg)

                           rotateZ(360deg);

            }

        }

        * {

            margin: 0;

            padding: 0;

        }

        body {

            background-color: #111;

        }

        div {

            width: 200px;

            height: 200px;

            position: absolute;

        }

        .wrap {

            margin: 200px;

            margin-left: 500px;

            animation: roll 4s linear infinite;

            /* 开启3d */

            transform-style: preserve-3d;

        }

        .wrap div {

            opacity: .5;

        }

        .wrap .small {

            width: 100px;

            height: 100px;

            margin: 50px;

        }

        /* 左右  */

        .wrap div:nth-of-type(1) {

            transform: rotateY(-90deg) translateZ(100px);

            background-color: hotpink;

        }

        .wrap div:nth-of-type(2) {

            transform: rotateY(90deg) translateZ(100px);

            background-color: deepskyblue;

        }

        /* 上下 */

        .wrap div:nth-of-type(3) {

            transform: rotateX(90deg) translateZ(100px);

            background-color: gold;

        }

        .wrap div:nth-of-type(4) {

            transform: rotateX(-90deg) translateZ(100px);

            background-color: greenyellow;

        }

        /* 前后 */

        .wrap div:nth-of-type(5) {

            transform: translateZ(100px);

            background-color: palevioletred;

        }

        .wrap div:nth-of-type(6) {

            transform: rotateX(180deg) translateZ(100px);

            background-color: rgb(255, 162, 0);

        }

        .wrap div:nth-of-type(7) {

            transform: rotateY(-90deg) translateZ(50px);

            background-color: hotpink;

        }

        .wrap div:nth-of-type(8) {

            transform: rotateY(90deg) translateZ(50px);

            background-color: deepskyblue;

        }

        .wrap div:nth-of-type(9) {

            transform: rotateX(90deg) translateZ(50px);

            background-color: gold;

        }

        .wrap div:nth-of-type(10) {

            transform: rotateX(-90deg) translateZ(50px);

            background-color: greenyellow;

        }

        .wrap div:nth-of-type(11) {

            transform: translateZ(50px);

            background-color: palevioletred;

        }

        .wrap div:nth-of-type(12) {

            transform: rotateX(180deg) translateZ(50px);

            background-color: rgb(255, 162, 0);

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div class="small"></div>

        <div class="small"></div>

        <div class="small"></div>

        <div class="small"></div>

        <div class="small"></div>

        <div class="small"></div>

    </div>

</body>

</html>

效果：

 三、轮播图

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>轮播图</title>

    <style>

        @keyframes move {

            0% {

                left: 0;

            }

            24% {

                left: 0;

            }

            26% {

                left: -400px;

            }

            49% {

                left: -400px;

            }

            51% {

                left: -800px;

            }

            74% {

                left: -800px;

            }

            76% {

                left: -1200px;

            }

            98% {

                left: -1200px;

            }

            100% {

                left: -1600px;

            }

        }

        @keyframes circle {

            0% {

                opacity: 1;

            }

            24% {

                opacity: 1;

            }

            25% {

                opacity: .7;

            }

            100% {

                opacity: .7;

            }

        }

        * {

            margin: 0;

            padding: 0;

        }

        .wrap {

            width: 400px;

            height: 300px;

            margin: 0 auto;

            overflow: hidden;

            position: relative;

        }

        .wrap .move {

            width: 2000px;

            height: 300px;

            position: absolute;

            animation: move 10s linear infinite;

        }

        .wrap .move img {

            width: 400px;

            height: 300px;

            float: left;

        }

        .wrap .circles {

            position: absolute;

            width: 160px;

            height: 16px;

            border-radius: 8px;

            background-color: rgba(0, 0, 0, .75);

            left: 120px;

            bottom: 16px;

            display: flex;

            justify-content: space-around;

            align-items: center;

        }

        .wrap .circles .circle {

            width: 10px;

            height: 10px;

            background-color: #fff;

            opacity: .7;

            border-radius: 50%;

            animation: circle 10s linear infinite;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div class="move">

            <img src="./1 (1).jpeg" alt="">

            <img src="./1 (2).jpeg" alt="">

            <img src="./1 (3).jpeg" alt="">

            <img src="./1 (4).jpeg" alt="">

            <img src="./1 (1).jpeg" alt="">

        </div>

        <div class="circles">

            <div class="circle"></div>

            <div style="animation-delay:2s;"  class="circle"></div>

            <div style="animation-delay:4s;"  class="circle"></div>

            <div style="animation-delay:6s;"  class="circle"></div>

        </div>

    </div>

</body>

</html>

效果：

四、

 代码：

@keyframes jump {
0% {
top: 80px;
transform: rotate(0deg);
}
12.5% {
top: 100px;
border-bottom-right-radius: 50px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
25% {
top: 80px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
37.5% {
top: 100px;
border-bottom-right-radius: 10px;
border-top-right-radius: 50px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
50% {
top: 80px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
62.5% {
top: 100px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 50px;
border-bottom-left-radius: 10px;
}
75% {
top: 80px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
87.5% {
top: 100px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 50px;
}
100% {
top: 80px;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
transform: rotate(360deg);
}
}
@keyframes scaleShadow{
from{
transform: scaleX(1);
}
to{
transform:scaleX(1.2);
}
}
.bg{
width: 300px;
height: 300px;
background-color:skyblue;
position: relative;
}
.jump{
width: 100px;
height: 100px;
background-color:#fff;
position: absolute;
left:100px;
top:80px;
border-radius:10px;
animation:jump 2s linear infinite;
}
.shadow{
width: 80px;
height: 20px;
background-color: #666;
position: absolute;
left:110px;
top:190px;
border-radius:50%;
animation:scaleShadow 0.25s linear infinite alternate;
}
</style>
</head>
<body>
<div class="bg">
<div class="shadow"></div>
<div class="jump"></div>
</div>
</body>

五、钟表

 代码：

<style>
@keyframes roll{
from{
transform:rotate(0);
}
to{
transform: rotate(360deg);
}
}
*{
margin: 0;
padding: 0;
}
.bg{
width: 200px;
height: 200px;
background-color: gold;
position: relative;
}
.clock{
width: 100px;
height: 100px;
box-sizing: border-box;
border:4px solid #fff;
position: absolute;
left:50px;
top:50px;
border-radius:50%;
}
.z1,.z2{
position: absolute;
width: 8px;
height: 50px;
background-color:#fff;
left:96px;
top:50px;
/* 修改旋转点 */
transform-origin:center bottom;
}
.z1{
animation:roll 2s linear infinite;
}
.z2{
height: 30px;
top:70px;
animation:roll 10s linear infinite;
}
</style>
</head>
<body>
<div class="bg">
<div class="clock"></div>
<div class="z1"></div>
<div class="z2"></div>
</div>
</body>

六、简易充电效果

 代码：

<style>
@keyframes cc {
from {
filter: hue-rotate(0);
}
to {
filter: hue-rotate(360deg);
}
}
@keyframes roll {
from {
transform: rotate(0);
top: -10px;
}
to {
transform: rotate(360deg);
top: -140px;
}
}
.bg {
width: 300px;
height: 300px;
background-color: #ccc;
position: relative;
}
.water {
position: absolute;
width: 100px;
height: 200px;
background-color: skyblue;
left: 100px;
top: 50px;
overflow: hidden;
animation: cc 2s linear infinite;
}
.water div {
position: absolute;
width: 150px;
height: 150px;
background-color: white;
top: -10px;
left: -25px;
animation: roll 4s linear infinite;
}
.water div:nth-of-type(1) {
left: -35px;
border-radius: 50px 58px 64px 70px;
}
.water div:nth-of-type(2) {
left: -15px;
border-radius: 40px 48px 74px 62px;
}
.water div:nth-of-type(3) {
border-radius: 75px 52px 68px 46px;
}
.top {
width: 40px;
height: 20px;
background-color: #fff;
position: absolute;
left: 130px;
top: 26px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
</style>
</head>
<body>
<div class="bg">
<div class="top"></div>
<div class="water">
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>

七、浮杆

 代码：

<style>
@keyframes roll{
0%{
transform:rotate(0);
}
45%{
transform:rotate(70deg);
}
50%{
transform: rotate(0deg);
}
100%{
transform: rotate(-70deg);
}
}
*{
margin: 0;
padding: 0;
}
.wrap{
width: 300px;
height: 300px;
background-color:purple;
position: relative;
}
.wrap .circle{
width: 100px;
height: 100px;
box-sizing: border-box;
border:4px solid #fff;
border-radius:50%;
position: absolute;
top:100px;
left:100px;
overflow: hidden;
}
.wrap .circle .water{
width: 100px;
height: 30px;
background-color: #fff;
position: absolute;
top:65px;
}
.gun{
width: 5px;
height:50px;
background-color: #fff;
position: absolute;
top:140px;
left:145px;
animation:roll 5s linear infinite;
}
</style>
</head>
<body>
<div class="wrap">
<div class="circle">
<div class="water"></div>
</div>
<div class="gun"></div>
</div>
</body>

 八、

 代码：

<style>
@keyframes tran{
from{
transform: translateY(0);
opacity:0;
}
to{
transform: translateY(-93px);
opacity:1;
}
}
@keyframes move{
0%{
left:75px;
top:75px;
}
25%{
left:205px;
top:75px;
}
50%{
left:205px;
top:205px;
}
75%{
left:75px;
top:205px;
}
100%{
left:75px;
top:75px;
}
}
*{
margin: 0;
padding: 0;
}
.wrap{
width: 300px;
height: 300px;
background-color: purple;
position: relative;
}
.wrap div{
position: absolute;
}
.wrap .bk{
width: 100px;
height: 100px;
box-sizing: border-box;
border:4px solid #fff;
top:100px;
left:100px;
overflow: hidden;
}
.white{
width: 92px;
height: 92px;
background-color: #fff;
top:92px;
opacity: 0;
animation:tran 5s linear infinite;
}
.square{
width: 20px;
height: 20px;
background-color: #fff;
position: absolute;
animation:move 1s linear infinite;
}
</style>
</head>
<body>
<div class="wrap">
<div class="bk">
<div class="white"></div>
</div>
<div class="square"></div>
</div>
</body>
举报

相关推荐

Flutter常用的几种动画

ideci显式dartflutterAndroid移动开发

【2022/4/29】CCF202203-1

c++ccf

Vue 中的动画特效

htmlvue.js过渡动画JavaScript前端开发

几种CSS3常用动画效果和样式

css3csssass

jQuery动画与特效--jQuery基础知识点(4)

jqueryjquery动画jquery特效ide动画效果JavaScript前端开发

河面上的月亮倒影动画特效

i++html2d

CSS的常用动画

css动画css3

带渐变色动画特效的登录页面

matlabpython计算机视觉机器学习人工智能

bash shell 杂记（4）-shell常用的几种逻辑判断与运算

服务器网络前端

几种常用的命名法

javascript
0 条评论