css动画（一）

最新推荐文章于 2024-06-28 14:02:41 发布
最新推荐文章于 2024-06-28 14:02:41 发布
阅读量135 收藏
点赞数
分类专栏： css动画 文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43844392/article/details/104014520
版权

推荐动画一：

不说废话先上效果图：
在这里插入图片描述

html代码

<!DOCTYPE >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/zzsc.css">
</head>
<body>
<div class="wrapper">
	<div class="row cf">
		<div class="span">
			<div class="timer"></div>
		</div>
		<div class="span">
			<div class="typing_loader"></div>
		</div>
		<div class="span">
			<div class="location_indicator"></div>
		</div>
		<div class="span">
			<div class="dashboard"></div>
		</div>
	</div>

	<div class="row cf">
		<div class="span">
			<div class="battery"></div>
		</div>
		<div class="span">
			<div class="magnifier"></div>
		</div>
		<div class="span">
			<div class="help"></div>
		</div>
		<div class="span">
			<div class="cloud"></div>
		</div>
	</div>

	<div class="row cf">
		<div class="span">
			<div class="eye"></div>
		</div>
		<div class="span">
			<div class="coffee_cup"></div>
		</div>
		<div class="span">
			<div class="square"></div>
		</div>
		<div class="span">
			<div class="circle"></div>
		</div>
	</div>
</div>
</body>
</html>

css代码

*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
html{
    color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    background-color: #59488b;
}
h1,h2{
    color: rgba(255,255,255,0.5);
    font-size: 40px;
    font-weight: 200;
    text-align: center;
    margin: 40px 0 0 0;
}
h2{
    font-size: 18px;
    margin: 0;
    padding: 0;
    margin: 10px 0;
}
h1 span{
    font-size: 30px;
}

a{
    text-decoration: none;
}
a:hover{
    transition: all linear 0.2s;
}
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}
::selection {
    background: #b3d4fc;
    text-shadow: none;
}


.wrapper{
    width: 700px;
    margin: 0 auto;
}
.row{
    text-align: center;
    padding: 50px 0;
}
.span, .span_large{
    float: left;
    width: 100px;
    background-color: rgba(0,0,0, 0.02);
    height: 100px;
    vertical-align: middle;
    border-radius: 1px;
    margin-right: 100px;
}
.span:last-child{
    margin-right: 0px;
}

/* Timer*/
.timer{
    width: 24px;
    height: 24px;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px #fff;
    border-radius: 50%;
    position: relative;
    margin: 38px auto;/* Not necessary- its only for layouting*/    
 }
.timer:after, .timer:before{
    position: absolute;
    content:"";
    background-color: #fff;
}
.timer:after{
    width: 10px;
    height: 2px;
    top: 11px;
    left: 11px;
    -webkit-transform-origin: 1px 1px;
       -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    -webkit-animation: minhand 2s linear infinite;
       -moz-animation: minhand 2s linear infinite;
            animation: minhand 2s linear infinite;
}

.timer:before{
    width: 8px;
    height: 2px;
    top: 11px;
    left: 11px;
    -webkit-transform-origin: 1px 1px;
       -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    -webkit-animation: hrhand 8s linear infinite;
       -moz-animation: hrhand 8s linear infinite;
            animation: hrhand 8s linear infinite;
}

@-webkit-keyframes minhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

@-webkit-keyframes hrhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

/*Typing Loader*/
.typing_loader{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
       -moz-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
    margin: 46px auto; /* Not necessary- its only for layouting*/  
    position: relative;
    left: -12px;
}
@-webkit-keyframes typing{
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    /* 25%{ 
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,1);
      } */
}

@-moz-keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    /* 25%{ 
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    } */
    /* 75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,1);
      } */
}

@keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{ 
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}

/*Location indicator */
.location_indicator{
    margin: 30px auto;
    position: relative;
    left: -9px;
}

.location_indicator:before, .location_indicator:after{
    position: absolute;
    content: "";
}

.location_indicator:before{
    width: 20px;
    height: 20px;
    border-radius: 100% 100% 100% 0;
    box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
    -webkit-animation: mapping 1s linear infinite;
       -moz-animation: mapping 1s linear infinite;
            animation: mapping 1s linear infinite;
    -webkit-transform: rotate(-46deg);
       -moz-transform: rotate(-46deg);
            transform: rotate(-46deg);

}

.location_indicator:after{
    width: 30px;
    height: 10px;
    border-radius: 100%;
    left: 44px;
    background-color: rgba(255, 255, 255, 0.2);
    top: 24px;
    z-index: -1;
}

@-webkit-keyframes mapping{
    0% {top: 0;}
    50%{top: -5px;}
    100% {top:0; }
}
@-moz-keyframes mapping{
    0% {top: 0;}
    50%{top: -5px;}
    100% {top:0; }
}
@-keyframes mapping{
    0% {top: 0;}
    50%{top: -5px;}
    100% {top:0; }
}

/* go in*/
.dashboard{
    width: 32px;
    height: 32px;
    margin: 30px auto;
    border: 2px rgba(255,255,255,1) solid;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.dashboard:after, .dashboard:before{
    position: absolute;
    content: "";
}
.dashboard:after{
    width:14px;
    height: 2px;
    top: 20px;
    -webkit-transform-origin: 1px 1px;
       -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    background-color: rgba(255,255,255,1);
    -webkit-animation: dashboard_hand 2s linear infinite alternate;
       -moz-animation: dashboard_hand 2s linear infinite alternate;
            animation: dashboard_hand 2s linear infinite alternate;
}
.dashboard:before{
    width: 32px;
    height: 10px;
    background-color: rgba(255,255,255,1);
    top:20px;
    left: -2px;
}
@-webkit-keyframes dashboard_hand{
    0%{ -webkit-transform: rotate(-160deg);}
    100%{ -webkit-transform: rotate(-20deg);}
}
@-moz-keyframes dashboard_hand{
    0%{ -moz-transform: rotate(-160deg);}
    100%{ -moz-transform: rotate(-20deg);}
}
@keyframes dashboard_hand{
    0%{ transform: rotate(-160deg);}
    100%{ transform: rotate(-20deg);}
}

/*Battery*/
.battery{
    width: 28px;
    height: 14px;
    border: 1px #fff solid;
    border-radius: 2px;
    position: relative;
    -webkit-animation: charge 5s linear infinite;
       -moz-animation: charge 5s linear infinite;
            animation: charge 5s linear infinite;
    top: 40px;
    margin: 0 auto;
}
.battery:after{
    width: 2px;
    height: 7px;
    background-color: #fff;
    border-radius: 0px 1px 1px 0px;
    position: absolute;
    content: "";
    top: 2px;
    right: -4px;
}
@-webkit-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
@-moz-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
@keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}

.magnifier{
    width: 20px;
    height: 20px;
    box-shadow: 0px 0px 0px 1px #fff;
    border-radius: 50%;
    position: relative;
    margin: 34px auto;
    -webkit-animation: magnify 1s linear infinite alternate;
       -moz-animation: magnify 1s linear infinite alternate;
            animation: magnify 1s linear infinite alternate;
}
.magnifier:after, .magnifier:before{
    position: absolute;
    content: "";
}
.magnifier:before{
    content: "me";
    font-size: 12px;
    left: 2px;
    text-align: center;
    top: 2px;
}
.magnifier:after{
    width: 2px;
    height: 8px;
    background-color: #fff;
    bottom: -6px;
    left: 20px;
    border-radius: 2px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

@-webkit-keyframes magnify{
    0%{-webkit-transform: scale(1); }
    100%{-webkit-transform: scale(1.5);}
}
@-moz-keyframes magnify{
    0%{-moz-transform: scale(1); }
    100%{-moz-transform: scale(1.5);}
}
@keyframes magnify{
    0%{transform: scale(1); }
    100%{transform: scale(1.5);}
}

/*help ��ͷ�� www.datouwang.com */
.help{
    width: 30px;
    height: 30px;
    border: 1px #fff solid;
    border-radius: 50%;
    -webkit-animation: rotation 1s ease-in-out infinite;
       -moz-animation: rotation 1s ease-in-out infinite;
            animation: rotation 1s ease-in-out infinite;
    margin: 30px auto;
}
.help:after{
    width: 5px;
    height: 5px;
    background-color: rgba(255,255,255,1);
    border-radius: 100%;
    position: absolute;
    content: "";
}
@-webkit-keyframes rotation{
    0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation{
    0%{-moz-transform: rotate(0deg);}
    100%{-moz-transform: rotate(360deg);}
}
@keyframes rotation{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

/*eye ball*/
.eye{
    width: 20px;
    height: 20px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 50%;
    box-shadow: 30px 0px 0px 0px rgba(255,255,255,0.8);
    position: relative;
    margin: 36px 26px;
}

.eye:after{
    background-color: #59488b;
    width: 10px;
    height: 10px;
    box-shadow: 30px 0px 0px 0px #59488b;
    border-radius: 50%;
    left: 9px;
    top: 8px;
    position: absolute;
    content: "";
    -webkit-animation: eyeball 2s linear infinite alternate;
       -moz-animation: eyeball 2s linear infinite alternate;
            animation: eyeball 2s linear infinite alternate;
}
@-webkit-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@-moz-keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}
@keyframes eyeball{
    0%{left: 9px;}
    100%{left: 1px;}
}

/*coffee cup*/
.coffee_cup{
    width: 20px;
    height: 24px;
    border: 1px rgba(255,255,255,1) solid;
    border-radius: 0px 0px 5px 5px;
    position: relative;
    margin: 36px auto;
}
.coffee_cup:after, .coffee_cup:before{
    position: absolute;
    content: "";
}
.coffee_cup:after{
    width: 5px;
    height: 12px;
    border: 1px #fff solid;
    border-left: none;
    border-radius: 0px 20px 20px 0px;
    left: 20px;
}
.coffee_cup:before{
    width: 1px;
    height: 6px;
    background-color: rgba(255,255,255,1);
    top: -10px;
    left: 4px;
    box-shadow: 5px 0px 0px 0px rgba(255,255,255,1),
                5px -5px 0px 0px rgba(255,255,255,1),
                10px 0px 0px 0px rgba(255,255,255,1);
    -webkit-animation: steam 1s linear infinite alternate;
       -moz-animation: steam 1s linear infinite alternate;
            animation: steam 1s linear infinite alternate;
}

@-webkit-keyframes steam{
    0%{height: 0px;}
    100%{height: 6px;}            
}
@-moz-keyframes steam{
    0%{height: 0px}
    100%{height: 6px;}            
}
@keyframes steam{
    0%{height: 0px}
    100%{height: 6px;}            
}

/*square*/
.square{
    width: 20px;
    height: 20px;
    border:1px  rgba(255,255,255,1) solid;
    margin: 36px auto;
    position: relative;
    -webkit-animation: fill_color 5s linear infinite;
       -moz-animation: fill_color 5s linear infinite;
            animation: fill_color 5s linear infinite;
}
.square:after{
    width: 4px;
    height: 4px;
    position: absolute;
    content: "";
    background-color: rgba(255,255,255,1);
    top: -8px;
    left: 0px;
    -webkit-animation: square_check 1s ease-in-out infinite;
       -moz-animation: square_check 1s ease-in-out infinite;
            animation: square_check 1s ease-in-out infinite;
}

@-webkit-keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@-moz-keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@keyframes square_check{
    25%{ left: 22px; top: -8px;}
    50%{ left: 22px; top: 22px;}
    75%{ left: -9px; top: 22px;}
    100%{ left: -9px; top: -7px;}
}
@-webkit-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
@-moz-keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
@keyframes fill_color{
    0%{ box-shadow: inset 0px 0px 0px 0px rgba(255,255,255,0.1);}
    100%{ box-shadow: inset 0px -20px 0px 0px rgba(255,255,255,1);}
}
/*circle classick*/
.circle{
    margin: 40px auto;
    position: relative;
    width: 8px;
    height: 8px;
    background-color: rgba(255,255,255,.5);;
    box-shadow: -14px 0px 0px rgba(255,255,255,1);
    border-radius: 50%;
    -webkit-animation: circle_classic 1s ease-in-out infinite alternate;
       -moz-animation: circle_classic 1s ease-in-out infinite alternate;
            animation: circle_classic 1s ease-in-out infinite alternate;
}

@-webkit-keyframes circle_classic{
    0%{ opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; -webkit-transform: rotate(360deg) scale(1.2);}   
}
@-moz-keyframes circle_classic{
    0%{ opacity: 0.1; -moz-transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; -moz-transform: rotate(360deg) scale(1.2);}   
}
@keyframes circle_classic{
    0%{ opacity: 0.1; transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; transform: rotate(360deg) scale(1.2);}   
}

/*cloud*/

.cloud{
    margin: 42px 30px;
    width: 4px;
    height: 10px;
    opacity: 0.5;
    position: relative;
    box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
                12px 0px 0px 0px rgba(255,255,255,1),
                18px 0px 0px 0px rgba(255,255,255,1),
                24px 0px 0px 0px rgba(255,255,255,1),
                30px 0px 0px 0px rgba(255,255,255,1),
                36px 0px 0px 0px rgba(255,255,255,1);
    
    -webkit-animation: rain 1s linear infinite alternate;
       -moz-animation: rain 1s linear infinite alternate;
            animation: rain 1s linear infinite alternate;
}
.cloud:after{
    width: 40px;
    height: 10px;
    position: absolute;
    content: "";
    background-color: rgba(255,255,255,1);
    top: 0px;
    opacity: 1;
    -webkit-animation: line_flow 2s linear infinite reverse;
       -moz-animation: line_flow 2s linear infinite reverse;
            animation: line_flow 2s linear infinite reverse;
}

@-webkit-keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
                12px 0px 0px 0px rgba(255,255,255,0.9),
                18px 0px 0px 0px rgba(255,255,255,0.7),
                24px 0px 0px 0px rgba(255,255,255,0.6),
                30px 0px 0px 0px rgba(255,255,255,0.3),
                36px 0px 0px 0px rgba(255,255,255,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
                12px 0px 0px 0px rgba(255,255,255,0.3),
                18px 0px 0px 0px rgba(255,255,255,0.6),
                24px 0px 0px 0px rgba(255,255,255,0.7),
                30px 0px 0px 0px rgba(255,255,255,0.9),
                36px 0px 0px 0px rgba(255,255,255,1);
        opacity: 1;
    }
}
@-moz-keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
                12px 0px 0px 0px rgba(255,255,255,0.9),
                18px 0px 0px 0px rgba(255,255,255,0.7),
                24px 0px 0px 0px rgba(255,255,255,0.6),
                30px 0px 0px 0px rgba(255,255,255,0.3),
                36px 0px 0px 0px rgba(255,255,255,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
                12px 0px 0px 0px rgba(255,255,255,0.3),
                18px 0px 0px 0px rgba(255,255,255,0.6),
                24px 0px 0px 0px rgba(255,255,255,0.7),
                30px 0px 0px 0px rgba(255,255,255,0.9),
                36px 0px 0px 0px rgba(255,255,255,1);
        opacity: 1;
    }
}
@keyframes rain{
    0%{
     box-shadow: 6px 0px 0px 0px rgba(255,255,255,1),
                12px 0px 0px 0px rgba(255,255,255,0.9),
                18px 0px 0px 0px rgba(255,255,255,0.7),
                24px 0px 0px 0px rgba(255,255,255,0.6),
                30px 0px 0px 0px rgba(255,255,255,0.3),
                36px 0px 0px 0px rgba(255,255,255,0.2);
    }
    100%{
    box-shadow: 6px 0px 0px 0px rgba(255,255,255,0.2),
                12px 0px 0px 0px rgba(255,255,255,0.3),
                18px 0px 0px 0px rgba(255,255,255,0.6),
                24px 0px 0px 0px rgba(255,255,255,0.7),
                30px 0px 0px 0px rgba(255,255,255,0.9),
                36px 0px 0px 0px rgba(255,255,255,1);
        opacity: 1;
    }
}

@-webkit-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@-moz-keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}
@keyframes line_flow{
    0%{ width: 0px;}
    100%{width: 40px;}
}

/* Me */

.aboutme{
    width: 700px;
    padding: 50px 0;
    border-top: 2px rgba(255,255,255,0.03) solid;
}

.viduthalai{
    background: url(../img/viduthalai.png) no-repeat;
    width: 100px;
    height: 100px;
    border-radius: 0 2px 2px 0;
    float: left;
    opacity: 0.5;
}
.viduthalai:hover{
    opacity: 1;
}
.intro{
    float: left;
    width: 400px;
    padding-left: 20px;
    color: rgba(255,255,255,0.5);
}
.intro a{
    color: rgba(255,255,255,0.5);
}
.intro a:hover{
    color: rgba(255,255,255,1);
}

.intro span, p{
    font-size: 15px;
    font-weight: 200;
}
.intro h3{
    font-size: 20px;
    font-weight: 200;
    margin: 0px;
}
.git{
    color: rgba(255,255,255,0.5);
    float: right;
    text-align: right;
    padding: 10px 20px;
    border-radius: 2px;
    background-color: rgba(0,0,0,0.3);
    font-weight: 200;
}
.git:hover{
     background-color: rgba(0,0,0,0.2);
}
weixin_43844392
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS动画和JS动画对比
weixin_36106791的博客
08-31 1993
在工作中，经常会写点动画效果，常用的方式有CSS动画还有JS动画，根据项目的需求，采用的方案各不相同，但是两者实现的性能分析没有进行对比。总结网上相关资料，在这里简单整理下 本文主要讲以下这些内容 1、浏览器渲染流程 2、回流和重绘 3、CSS 动画 4、JS 动画 两者对比 ???? 1. 浏览器的渲染流程 渲染流程主要有4个步骤 解析 HTML 生成DOM 树 解析 CSS 样式生成 CSSOM 树，CSSOM 树与 DOM 树结合生成 Render tree 布局 Render Tree 对每个节点进
CSS 动画
12-13
CSS 动画 定义和用法 一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。 动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。 浏览器支持 表格中的数字表示支持该...
css 圆形扩散特效 水波
笔记库
10-16 2070
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=...
纯CSS: hover特效
笔记
12-03 1144
//样式++ <style> /*animation: name duration timing-function delay iteration-count direction; animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒...
CSS动画
LiHang1234567777的博客
07-21 4707
今天简单了解一下css动画一、css动画是什么？CSS中的动画类似于flash中的逐帧动画，表现细腻并且非常灵活，使用CSS中的动画可以取代许多网页中的动态图像、Flash动画或者JavaScript实现的特殊效果。二、使用步骤1.主要样式指定动画名称动画持续时间动画填充模式forwards;/*forwards把动画停在最后一个*/动画延迟时间animation-delay/*当值为负数时动画已经开始了多长时间*/2.读入数据...
css的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
CSS过渡动画
热门推荐
weixin_70815247的博客
07-21 1万+
transition是css3新增的⼀个功能，可以实现元素不同状态间的平滑过渡（当元素从⼀个状态进⼊到另⼀个状态时），经常⽤来制作⼀些动画效果。之前元素->元素hover状态直接切换，从开始状态到结束状态，瞬间完成，中间过程⼏乎不可⻅。过渡从开始状态到结束状态的中间过程可以查看格式transition过渡的属性完成时间(s)运动曲线延迟时间transitiontransition包含以下四个属性transition-property过渡属性。...
CSS动画效果
weixin_53912712的博客
07-09 1894
过渡、动画】变形平移、旋转
CSS动画-Animation
温情
10-16 5456
动画是css3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制的效果。创建动画的原理是，将一套 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 样式。以百分比来规定改变发生的时间，或者通过关键词 和 ，等价于 和 。 就是需要绑定的的名称 这就是定义了一个名称为的动画，被元素调用 规定动画完成一个周期所花费的时间 意思是指定元素的时间向右移动 规定动画的速率曲线，也就是动画执行过程的
css加载动画
weixin_41897680的博客
09-25 8189
前言 感觉css动画真的很有意思，奈何太菜，想不出来。下面的这些例子都是从网上找的，我自己手敲的。教程来源也会进行标注。 加载动画 动画1 教程：点此查看 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
CSS系列之动画
老__L的博客
02-27 6672
本文主要介绍CSS的animation、animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timing-function、@keyframes属性。 动画是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
Css Hover动画文件
08-12
你想要什么hover效果？你想要什么动画？十万行不同动画效果，可单独复制出来几行使用，极简轻量！Css 奇淫技巧还在等待什么，99+种功能，总能满足你的要求，快来一键三连抱走吧
html+css翻页动画效果
01-27
【html+css】翻页动画效果，64行代码实现翻页动画效果
CSS动画 3D反转Tab
01-29
纯css、动画、3d、关键帧.....
css动画类库
08-03
CSS动画类库是一种用于在网页上创建动态效果的工具，它们极大地简化了开发者实现复杂动画的过程，无需深入学习底层的CSS动画语法。本篇将详细探讨CSS动画类库的重要概念、工作原理以及常见库的使用方法。 一、CSS...
CSS中的display属性：布局控制的关键
一起coding，一起嗨。
06-25 766
CSS中的display属性：布局控制的关键
html5+css简易实现图书网联系我们页面
爱吃Java的羊的博客
06-25 275
html5+css简易实现图书网联系我们页面。
CSS实现文字颜色渐变
最新发布
weixin_40348267的博客
06-28 294
【代码】CSS实现文字颜色渐变。
前端 CSS 经典：保持元素宽高比
weixin_64684095的博客
06-25 202
在很多网站，不管页面宽度的变化，都需要里面的图片或者视频，宽高比不变。有两种实现方式。
css 动画 执行一次
11-15
CSS3提供了animation属性，可以实现动画效果。默认情况下，animation动画会一直循环执行，但是我们可以通过设置animation-iteration-count属性来控制动画执行的次数。将animation-iteration-count设置为1，就可以让动画只执行一次。例如： ```css div { animation: myanimation 2s; animation-iteration-count: 1; } @keyframes myanimation { from {background-color: red;} to {background-color: yellow;} } ``` 上述代码中，div元素会执行名为myanimation的动画，动画时长为2秒，并且只执行一次。动画效果是从红色背景色渐变到黄色背景色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值