當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html css3模拟心的跳动

發布時間：2023/12/2 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 html css3模拟心的跳动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!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>

總結

以上是生活随笔為你收集整理的html css3模拟心的跳动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html