1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > HTML+CSS+JS实现 ❤️爱心文字3D旋转动画特效❤️

HTML+CSS+JS实现 ❤️爱心文字3D旋转动画特效❤️

时间:2020-11-13 08:39:47

相关推荐

HTML+CSS+JS实现 ❤️爱心文字3D旋转动画特效❤️

🍅 作者主页: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 &amp; kisses</title><link rel="stylesheet" href="css/style.css"></head><body><div>LOVE</div></body></html>

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~!

打卡 文章 更新47/ 100天

精彩推荐更新中:

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。