色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3Logo動畫

張明哲1年前9瀏覽0評論

CSS3Logo動畫是一種運用了CSS3動畫技術制作的一個具有動態(tài)效果的Logo形式。這種Logo形式具有生動活潑、形象鮮明等優(yōu)點,在各種網(wǎng)絡營銷與品牌宣傳中被廣泛應用。

代碼示例:
<div class="logo">
<span class="css3">CSS3</span>
<span class="logo">Logo</span>
</div>
CSS代碼示例:
.logo{
width: 150px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-family: Helvetica,sans-serif;
font-size:1.5em;
font-weight: bold;
color:#fff;
background-color:#f69e3c;
border-radius:10px;
cursor:pointer;
box-shadow:inset 0 -8px 0 0 #d36024;
transition:0.15s cubic-bezier(.47,1.64,.41,.8);
}
.logo:hover{
box-shadow:inset 0 -2px 0 0 #d36024;
background-color:#e65c00; 
}
.css3{
color:#007cb0;
}
.css3:before{
content:"";
width:28px;
height:28px;
display:inline-block;
background-image:url(https://res.cloudinary.com/duf5dxfdz/image/upload/v1527667109/css-logo.png);
background-position: center;
background-size: cover;
position:relative;
top:7px;
right:7px;
animation-name:spin;
animation-duration:2s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
@keyframes spin{
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(360deg);
}
}
.logo:hover .css3:before{
animation:unset;
}

在這個示例中,利用CSS3技術實現(xiàn)的CSS3Logo動畫,制作了這個生動而鮮明的Logo。具體來說,我們首先構(gòu)建了一個 div 標簽,對其進行了樣式設定,使它呈現(xiàn)圓角邊框、具有相應的字體、大小和顏色等特點。接著,我們在原始 div 中嵌套了兩個不同的 span 標簽,其中一個用于顯示“CSS3”,另一個用于顯示“Logo”,并對它們進行了相應的樣式調(diào)整。

在CSS3Logo動畫中,我們還使用了CSS3的動畫技術,利用了動態(tài)的旋轉(zhuǎn)效果來展現(xiàn)Logo的特點,同時在鼠標懸停時進行了一些額外的變換,使Logo更加生動。總之,CSS3Logo動畫是一種十分優(yōu)秀的Logo制作方式,即使對于初學者來說,也可以較為輕松地學會如何制作這樣的動態(tài)Logo。