순수 CSS를 사용하여 뛰는 심장을 그리는 방법은 무엇입니까?
- 青灯夜游원래의
- 2018-09-13 16:42:512579검색
이 장에서는 순수한 CSS를 사용하여 뛰는 심장을 그리는 방법을 보여줍니다. (코드 예)에는 특정 참고 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.
먼저 렌더링을 보여드리겠습니다.
구현 원리:
1 이 하트는 두 개의 직사각형으로 나눌 수 있습니다.
각각 테두리 반경을 설정하세요.
두 그래픽이 겹친 후 각각 변환: 회전()을 설정합니다. 설정된 회전() 값은 반대여야 합니다. 하나는 양수 값이고 다른 하나는 음수 값입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯css画一下心</title>
<style>
body{
height: 100%;
margin: 0;
}
.demo{
width: 1px;
height: 1px;
margin: 300px auto;
position: relative;
animation: tiaodong .8s linear infinite;
}
.demo::before,.demo::after{
content: '';
position: absolute;
width: 80px;
height: 120px;
background-color: red;
border-radius: 50px 50px 0 0;
}
.demo::after{
left: 28px;
transform: rotate(45deg);
}
.demo::before{
transform: rotate(-45deg);
box-shadow: -5px -5px 10px grey;
}
@keyframes tiaodong{
0%{
transform: scale(1);
}
50%{
transform: scale(1.05);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="demo"></div>
</body>
</html>는 호환성을 고려하지 않고 의사 요소 전후를 사용하여 구현되며 IE 10 이전에는 표시되지 않습니다.
After와 Before를 스팬 요소로 교체하면 문제가 해결될 수 있습니다.
추가 필요: -ms-transform.
span 요소를 사용하여 그리는 경우 오른쪽 블록에 Z-index 속성을 설정해야 합니다.
위 내용은 순수 CSS를 사용하여 뛰는 심장을 그리는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.