- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我使用纯 CSS 完成了简单的心脏。它由两 block 组成,所以一 block 有白色 box-shadow
,另一 block 有红色。
可在此处找到示例:JsFiddle (它有一个没有渐变的简化样式,所以它可能看起来不漂亮:)
那么,问题是:如何创建动画阴影?我所需要的只是让白色和红色的阴影脉动以产生心跳的效果。
我已经完成了一些类似的问题,但不幸的是,它们不起作用,只是因为在我的例子中我使用了 :after
和 :before
伪类,不能通过 jQuery 操作。
最佳答案
我将它设置为无限,这样它就会不停地跳动(这是一件好事,所以心脏不会死,对吧?)但是你可以将它更改为 n
次数代替。此外,您可以明显地将 5 秒更改为更长或更短。如果您不希望框阴影变为 0,您可以随时将其更改为 10px 或其他值。
#b:before {
animation: heartbeat 5s infinite;
}
@keyframes heartbeat {
0% { box-shadow: 0 0 50px #fff; }
25% { box-shadow: 0 0 0 #fff; }
50% { box-shadow: 0 0 50px #fff; }
75% { box-shadow: 0 0 0 #fff; }
100% { box-shadow: 0 0 50px #fff; }
}
body {
width:100%;
margin:0;
background: #000;
}
#b {
position:relative;
width:500px;
height:90px;
margin: 100px auto;
font-size: 12px;
}
#b:before {
position: absolute;
content:"";
left: 208px;
top: 10px;
width: 208px;
height: 320px;
background: red;
border-radius: 200px 200px 0 0;
box-shadow: 0 0 50px #fff;
animation: heartbeat 5s infinite;
}
#b:before {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#b:after {
position:absolute;
content:"BlaBla!";
color: #fff;
left:0;
top:10px;
width:208px;
height:320px;
background: red;
border-radius:200px 200px 0 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
box-shadow: 10px 10px 100px #6d0019;
}
@keyframes heartbeat {
0% { box-shadow: 0 0 50px #fff; }
25% { box-shadow: 0 0 0 #fff; }
50% { box-shadow: 0 0 50px #fff; }
75% { box-shadow: 0 0 0 #fff; }
100% { box-shadow: 0 0 50px #fff; }
}
<div class="a">
<div id="b"></div>
</div>
关于javascript - jQuery + CSS : Creating a pulsating heart,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21766128/
我正在使用 onfocusout 函数检查表单中输入的值是否已存在于数据库中。如果存在,我将输入脉冲 5 次,如下所示; cell.pulsate({ //cell is my selector
这是我见过的最奇怪的事情。 我有一个具有背景图像的 div 类,定义如下: background-image: url("circle.png") background-size: contain 您
我在页面上动态创建了元素。我希望使用 $(element).pulsate() 对这些元素进行脉动 问题是它不起作用,因为它们是我们在运行页面加载后创建的。我注意到有一个 jquery .live()
我使用纯 CSS 完成了简单的心脏。它由两 block 组成,所以一 block 有白色 box-shadow,另一 block 有红色。 可在此处找到示例:JsFiddle (它有一个没有渐变的简化
我有以下代码(类似于此): $(Auditorium.CometService).on('bid.new', function(event, data){ $('#feedback').tex
我遇到过由于某种原因无法使用 Jquery UI 的情况。我正在尝试在不使用 Jquery UI 的情况下获得 Jquery UI Pulsate Effect。类似这个链接,http://docs.
这是我正在使用的material-ui的版本: "@mui/icons-material": "^5.5.1", "@mui/material": "^5.5.1", 这就是我导入 Button
这是我正在使用的material-ui的版本: "@mui/icons-material": "^5.5.1", "@mui/material": "^5.5.1", 这就是我导入 Button
我是一名优秀的程序员,十分优秀!