html+css3模擬心的跳動_ZenDei技術網路在線

html+css3模擬心的跳動

-Advertisement-

模擬心的跳動 ...

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>模擬心的跳動</title>
</head>
<style type="text/css">
    * {
    margin: 0;
    padding: 0;
}
body {
    background-color: #D4CECE;
}
.big {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    animation: heartAnimation 0.7s linear 0s infinite;
}
.big #heart {
    margin: 5px 0;
    width: 100%;
    height: 100%;
    background-color: #FF0606;
    position: absolute;
}
.left,.right {
    border-radius: 100px 100px 0 0;  /*左上 右上 右下 左下*/
    box-shadow: 0px 0px 20px #FD0707;
}
.bottom {
    box-shadow: 0px 0px 20px #FD0707;
}
.left {
    transform: translate(-50px,150px) rotate(-45deg);  /*translate()位移 rotate() 旋轉角度*/
}
.right {
    transform: translate(50px,150px) rotate(45deg);
}
.bottom {
    transform: translate(0,214px) rotate(45deg) scale(.9,.9)  /*scale:定義 2D 縮放轉換。*/

}
/*動畫效果*/
@keyframes heartAnimation{
    form {
            transform: scale(0.9,0.9);
    }
    to {
            transform: scale(1.1,1.1);
    }
}
</style>
<body>
    <div class="big">
        <div id="heart" class="left"></div>
        <div id="heart" class="right"></div>
        <div id="heart" class="bottom"></div>
    </div>
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

javascript 利用FileReader和濾鏡上傳圖片預覽

FileReader 對象允許Web應用程式非同步讀取存儲在用戶電腦上的文件（或原始數據緩衝區）的內容，使用 File或 Blob對象指定要讀取的文件或數據。 1、FileReader介面的方法 FileReader介面有4個方法，其中3個用來讀取文件，另一個用來中斷讀取。無論讀取成功或失敗，方法並 ...
CSS知識點：IE瀏覽器的hasLayout，IE低版本的bug根源

什麼是hasLayout？ hasLayout是IE特有的一個屬性。很多的ie下的css bug都與其息息相關。在ie中，一個元素要麼自己對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。當一個元素的hasLayout屬性值為true時，它負責對自己和可能的子孫元素進行尺寸計算和 ...
基於JS的身份證驗證（完整版）

var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加權因數 var ValideCode = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ]; // 身份證驗證位值.10代表X f... ...
js if for 詳解獲取元素方式及一些js 基礎知識

##獲取元素的新方法## --document.querySelector('Css Selector{css選擇器}') 接收一個css選擇器（通配，群組，類，包含，id。。。。等）若這個選擇器對應的是一組元素，就找第0個，註意js從0開始計數。CSS計數從一開始。 ##判斷## 當同一種操作有 ...
【前端】前端筆試題 [1]

1. 請用div+css寫出文字水平垂直居中，圖片水平垂直居中的樣式及佈局。2. 請用div+css寫出左側固定(width：200px)，右側自適應的頁面佈局。3. 請寫出至少五種css瀏覽器相容性的寫法。4. jquery的綁定事件有幾種方式，請舉例說明其優缺點。5. 請寫出至少三種js瀏覽器 ...
【前端】CSS3的calc()使用

calc()對大家來說，或許很陌生，不太會相信calc()是css中的部分。因為看其外表像個函數，既然是函數為何又出現在CSS中呢？這一點也讓我百思不得其解，今天有一同事告訴我，說CSS3中有一個屬性能實現自適應的佈局，首先讓我想到的是box-sizing，但跟我說還可以計算，這讓我不得不想起cal ...
web前端面試題

與大家分享一下最近所接觸的面試題 1.對WEB標準以及W3C的理解與認識標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便，不需要 ...
獲取非行間樣式

//獲取非行間樣式的方法function getCss(obj,arr){ if(obj.currentStyle){ return obj.currentStyle[arr]; }else{ return getComputedStyle(obj,false)[arr]; }};//獲取class ...