🍅 作者主頁：Java李楊勇
🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝
效果演示： 文末獲取原始碼
代碼目錄：
主要代碼實作：
CSS樣式：
body {
display: grid;
justify-content: center;
height: 100vh;
font-family: sans-serif;
font-weight: 900;
color: darkred;
background: linear-gradient(to bottom right, tomato, darkred);
perspective: 50vw;
overflow: hidden;
}
div {
position: relative;
font-size: 15vw;
line-height: 100vh;
filter: drop-shadow(0 0 5px tomato);
animation: spin 5s linear infinite;
}
div:before {
content: '';
width: 15vw;
height: 25vw;
background: red;
position: absolute;
left: 50%;
top: 50%;
border-radius: 150px 150px 0 0;
transform: translate(-74%, -50%) rotate(-45deg);
z-index: -1;
}
div:after {
content: '';
width: 15vw;
height: 25vw;
background: red;
position: absolute;
left: 50%;
top: 50%;
border-radius: 125px 125px 0 0;
transform: translate(-26%, -50%) rotate(45deg);
z-index: -1;
}
@keyframes spin {
100% {
transform: rotateY(360deg);
}
}HTML代碼 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hugs & kisses</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>LOVE</div>
</body>
</html>原始碼獲取
大家可以點贊、收藏、關注、評論我啦 、查看博主主頁或下方微信公眾號獲取更多~！
打卡 文章 更新 47 / 100天
精彩推薦更新中：
HTML5大作業實戰案例《100套》
Java畢設專案精品實戰案例《100套》
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/299515.html
標籤：java