css动画

最新推荐文章于 2023-10-30 09:34:17 发布

沉碎.

最新推荐文章于 2023-10-30 09:34:17 发布

阅读量123

点赞数

文章标签： css

本文链接：https://blog.csdn.net/CrtLife/article/details/118928684

版权

animation 动画

动画属性	值
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

复合属性：animation: name duration timing-function delay iteration-count direction;

<!DOCTYPE html>
<html>
<head>
<style> 
 /* 
  animation: 动画名称  时间  方式  延时   动画次数 动画方向
  animation: donghua   3s  linear  0.5s infinite reverse;
   */
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

</style>
</head>
<body>

<div></div>

</body>
</html>

transition 过度

过度属性	值
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果所需的时间
transition-timing-function	规定过渡所需的速度曲线
transition-delay	定义过渡何时开始

实战

案例一

旋转菜单源码

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .boy{
            width: 1000px;
            
            margin-top: 5%;
            margin-left: 3%;
            
        }
        ul li{
            list-style: none;
            color: white;
            background-image: linear-gradient(to bottom,#373737,#616161);
        }
        div>ul{
            display: flex;
            justify-content: space-around;
            text-align: center;

        }
        div>ul>li{
            float: left;
            width:200px ;
            height: 90px;
            line-height: 90px;
        }
        a{
            color: white;
            text-decoration: none;
            font-size: 30px;
        }
        .boy>ul>li:hover>a{
            color: red;
        }
        .xj{
            height: 450px;
            margin-top: -6px;
            font-size: 30px;
            
        }
        
        .boy>ul>li>.xj>li{
            visibility: hidden;
            transform: rotateY(90deg);
			opacity: 0;
        }
        .boy>ul>li:hover>.xj li{
            visibility: visible;
			transform: rotateY(0deg);
			opacity:1;
			transition: all 0.5s;
        }
        .boy>ul>li:hover>.xj{
            perspective: 500px;
        }
        
        .boy>ul>li:hover>.xj li:nth-child(1){
            transition-delay: 0ms;
        }
        .boy>ul>li:hover>.xj li:nth-child(2){
            transition-delay: 100ms;
        }
        .boy>ul>li:hover>.xj li:nth-child(3){
            transition-delay: 200ms;
        }
        .boy>ul>li:hover>.xj li:nth-child(4){
            transition-delay: 300ms;
        }
        .boy>ul>li:hover>.xj li:nth-child(5){
            transition-delay: 400ms;
        }
		
    </style>
</head>
<body>
    <div class="boy">
        <ul>
            <li>
                <a href="">首页</a>
                   
            </li>
            <li>
                <a href="">html</a>
                <ul class="xj">
                    <li>html</li>
                    <li>html</li>
                    <li>html</li>
                    <li>html</li>
                    <li>html</li>
                </ul>
            </li>
            <li>
                <a href="">css</a>
                <ul class="xj">
                    <li>css</li>
                    <li>css</li>
                    <li>css</li>
                    <li>css</li>
                    <li>css</li>
                </ul>
            </li>
            <li>
                <a href="">javascript</a>
                <ul class="xj">
                    <li>javascript</li>
                    <li>javascript</li>
                    <li>javascript</li>
                    <li>javascript</li>
                    <li>javascript</li>
                </ul>
            </li>
            <li>
                <a href="">jquery</a>
                <ul class="xj">
                    <li>jquery</li>
                    <li>jquery</li>
                    <li>jquery</li>
                    <li>jquery</li>
                    <li>jquery</li>
                </ul>
            </li>
        </ul>
    </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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .d1 {
            width: 100px;
            height: 168px;
            background-color: red;
            border-top-left-radius: 60%;
            border-top-right-radius: 60%;
            margin-left: 100%;
            margin-top: 5%;
        }

        .d2 {
            transform: rotate(-45deg);
            transform-origin: 0% 100%; 
            animation: fra1 .4s linear .1s infinite alternate;
        }

        .d3 {
            transform: rotate(45deg);
            margin-left: -189px;
            transform-origin: 100%  100%; 
            animation: fra2 .4s linear .1s infinite alternate;
        }

        .body {
            display: flex;
            width: 200px;
        }
         

        @keyframes fra1 {
            to {
                transform: scale(0.5) rotate(-45deg);
            }
        }

        @keyframes fra2 {
            to {
                transform: scale(0.5) rotate(45deg);
            
            }
        }
    </style>
</head>

<body>
    <div class="body">
        <div class="d1 d2"></div>
        <div class="d1 d3"></div>
    </div>

</body>

</html>

沉碎.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css动画

animation 动画动画属性值animation-name规定需要绑定到选择器的 keyframe 名称animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count规定动画应该播放的次数。animation-direction规定是否应该轮流反向播放动
复制链接

扫一扫