可穿插PC端浏览器任何位置的爱心分割
生活随笔
收集整理的這篇文章主要介紹了
可穿插PC端浏览器任何位置的爱心分割
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
先看效果：
會(huì)跳躍的哦。gif麻煩我就沒弄。?
完整代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>完整的?心?</title> </head><body><style>.herart_box {width: 100%;height: 30vh;margin: 0px 0px 0px 0px;border: 1px solid blanchedalmond;}.box {width: 33.3%;height: 30vh;background-color: blanchedalmond;margin: 0px;padding: 0px;position: relative;left: 33.3%;}.BigShowDiv {width: 40%;height: 20vh;background-color: blanchedalmond;margin: 0px;padding: 0px;position: relative;top: 10%;left: 20%;vertical-align: middle;animation: BigShow 1.5s infinite;}.heart_left,.heart_right {width: 35%;height: 80%;background-color: red;float: left;position: relative;top: 10%;}.heart_left {background: linear-gradient(red, hotpink, pink);transform: rotate(45deg);-ms-transform: rotate(45deg);/* IE 9 */-moz-transform: rotate(45deg);/* Firefox */-webkit-transform: rotate(45deg);/* Safari 和 Chrome */-o-transform: rotate(45deg);/* Opera */position: relative;left: 66%;border-radius: 45px 60px 5px 15px;will-change: rotate;/*陰影部分*/box-shadow: 2px 0px 3px #7e7e7e, 0px -1px 3px pink;}.heart_right {background: linear-gradient(red, hotpink, pink);transform: rotate(-45deg);-ms-transform: rotate(-45deg);/* IE 9 */-moz-transform: rotate(-45deg);/* Firefox */-webkit-transform: rotate(-45deg);/* Safari 和 Chrome */-o-transform: rotate(-45deg);/* Opera */position: relative;left: 15%;border-radius: 60px 45px 15px 5px;will-change: rotate;}@keyframes BigShow {90% {transform-origin: center;transform: scale(1.1, 1.1);}70% {transform-origin: center;transform: scale(1.2, 1.2);}}</style><div style="clear: both;"></div><div class="herart_box"><div class='box'><div class="BigShowDiv"><div class="heart_left"></div><div class="heart_right"></div></div></div></div><div style="clear: both;"></div> </body></html>總結(jié)
以上是生活随笔為你收集整理的可穿插PC端浏览器任何位置的爱心分割的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 开工啦，开工啦，2022开工了
- 下一篇： 2017年html5行业报告,云适配发布