|
導讀網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立... 網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于css如何實現水紋擴散的動畫效果(純代碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。<div class="main clearfix">
<!--3*70=210 2*50=100 310-->
<div class="circle">
<!--<div class="box"></div>-->
<div class="box-a"></div>
<div class="box-b"></div>
<div class="box-c"></div>
<div class="box-icon icon-a icon-a-1"></div>
</div>
<!--hr正常灰色 hr-x出錯 hr-r正確-->
<div class="hr hr-x"></div>
<div class="circle">
<!--<div class="box"></div>-->
<div class="box-a"></div>
<div class="box-b"></div>
<div class="box-c"></div>
<div class="box-icon icon-b icon-b-2"></div>
</div>
<div class="hr hr-r"></div>
<div class="circle">
<!--<div class="box"></div>-->
<div class="box-a"></div>
<div class="box-b"></div>
<div class="box-c"></div>
<div class="box-icon icon-c icon-c-3"></div>
</div>
</div>css: .main{
position: relative;
height:70px;
width: 310px;
margin: 0 auto;
background-color: #f34147;
}
.circle{
position: relative;
float: left;
height:70px;
width: 70px;
}
/*線*/
.hr{
position: relative;
float: left;
width: 50px;
height:70px;
background: url("../images/hr_1.png") no-repeat center center;
background-size: auto 18px;
}
.hr-x{
background: url("../images/hr_2.png") no-repeat center center;
background-size: auto 18px;
}
.hr-r{
background: url("../images/hr_3.png") no-repeat center center;
background-size: auto 18px;
}
/*按鈕 大:47 。39*/
.box-icon{
position: absolute;
z-index: 9999;
top:0;
right:0;
left:0;;
bottom: 0;
width: 70px;
height: 70px;
}
/*小 不亮*/
.icon-a{
background: url("../images/icon_a_3.png") no-repeat center center;
background-size:39px 39px;
}
.icon-b{
background: url("../images/icon_b_3.png") no-repeat center center;
background-size:39px 39px;
}
.icon-c{
background: url("../images/icon_c_3.png") no-repeat center center;
background-size:39px 39px;
}
/*小 亮*/
.icon-a-1{
background: url("../images/icon_a_2.png") no-repeat center center;
background-size:39px 39px;
}
.icon-b-1{
background: url("../images/icon_b_2.png") no-repeat center center;
background-size:39px 39px;
}
.icon-c-1{
background: url("../images/icon_c_2.png") no-repeat center center;
background-size:39px 39px;
}
/*大 亮*/
.icon-a-2{
background: url("../images/icon_a_1.png") no-repeat center center;
background-size:47px 47px;
}
.icon-b-2{
background: url("../images/icon_b_1.png") no-repeat center center;
background-size:47px 47px;
}
.icon-c-2{
background: url("../images/icon_c_1.png") no-repeat center center;
background-size:47px 47px;
}
/*動效*/
@keyframes warn {
0% {
transform: scale(0.6);
opacity: 0;
}
25% {
transform: scale(0.6);
opacity: 0.8;
}
/*50% {*/
/*transform: scale(0.8);*/
/*opacity: 0.4;*/
/*}*/
/*75% {*/
/*transform: scale(0.9);*/
/*opacity: 0.3;*/
/*}*/
100% {
transform: scale(1);
opacity: 0.1;
}
}
@-webkit-keyframes warn {
0% {
-webkit-transform: scale(0);
opacity: 0;
}
25% {
-webkit-transform: scale(0.6);
opacity: 0.8;
}
/*50% {*/
/*-webkit-transform: scale(0.1);*/
/*opacity: 0.3;*/
/*}*/
/*75% {*/
/*-webkit-transform: scale(0.5);*/
/*opacity: 0.5;*/
/*}*/
100% {
-webkit-transform: scale(1);
opacity: 0.1;
}
}
/* 70*70的容器*/
.box{
position: absolute;
width: 70px;
height: 70px;
border: 6px solid rgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius: 70px;
border-radius: 70px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 4s ease-out infinite;
-moz-animation: warn 4s ease-out infinite;
animation: warn 4s ease-out infinite;
}
.box-a{
position: absolute;
width: 70px;
height: 70px;
border: 6px solid rgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius: 70px;
border-radius: 70px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 4s ease-out infinite;
-moz-animation: warn 4s ease-out infinite;
animation: warn 4s ease-out infinite;
animation-delay:1s;
-webkit-animation-delay:1s; /* Safari 和 Chrome */
}
.box-b{
position: absolute;
width: 70px;
height: 70px;
border: 6px solid rgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius: 70px;
border-radius: 70px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 4s ease-out infinite;
-moz-animation: warn 4s ease-out infinite;
animation: warn 4s ease-out infinite;
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */
}
.box-c{
position: absolute;
width: 70px;
height: 70px;
border: 6px solid rgba(225,225,225,0.5);
-webkit-border-radius:70px;
-moz-border-radius: 70px;
border-radius: 70px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 4s ease-out infinite;
-moz-animation: warn 4s ease-out infinite;
animation: warn 4s ease-out infinite;
animation-delay:3s;
-webkit-animation-delay:3s; /* Safari 和 Chrome */
}相關推薦: 以上就是css如何實現水紋擴散的動畫效果(純代碼)的詳細內容,更多請關注php中文網其它相關文章! 網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。 |
溫馨提示:喜歡本站的話,請收藏一下本站!