css如何调整红心样式_CSS3跳动的红心

margin: 0;

padding: 0;

}

.heart{

position:absolute;

left: 50%;

top:50%;

margin-left: -150px;

margin-top: -135px;

width: 300px;

height:270px;

background: transparent;

/*box-shadow: 2px 2px 5px #000;*/

filter:drop-shadow(0px 0px 20px rgb(255,20,20));//阴影实现:filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

animation: test 1s linear infinite;

}

.heart:before,

.heart:after{

content: "";

position: absolute;

left: 150px;

width: 150px;

height: 240px;

background: rgb(255,0,0);

border-radius: 150px 150px 0 0;

transform:rotate(-45deg);

transform-origin: 0 100%;

}

.heart:after{

left: 0;

transform:rotate(45deg);

transform-origin: 100% 100%;

}

@keyframes test{

0%{

transform: scale(0.8,0.8);

opacity: 1;

}

25%{

transform: scale(1,1);

opacity: 0.8;

}

100%{

transform: scale(0.8,0.8);

opacity: 1;

}

css如何调整红心样式_CSS3跳动的红心相关推荐

css如何调整红心样式_css3实现的红心跳动效果
[HTML] 纯文本查看复制代码蚂蚁部落 .box { width: 180px; height: 160px; margin: 200px auto; position: relative; a ...
HTML+CSS制作七夕跳动的红心动画效果
HTML+CSS制作七夕跳动的红心动画效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">< ...
javafx css样式_使用CSS设置JavaFX饼图样式
javafx css样式渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在2 ...
使用CSS设置JavaFX饼图样式
渲染图表时, JavaFX默认提供某些颜色. 但是,在某些情况下,您想自定义这些颜色. 在此博客文章中,我将使用一个示例来更改JavaFX饼图的颜色,该示例打算在今天下午在RMOUG Training ...
css 默认显示滚动条,css控制默认滚动条样式
针对webkit内核的浏览器,使用伪类来改变滚动条的默认样式,详情如下: 滚动条组成部分 1. ::-webkit-scrollbar 滚动条整体部分 2. ::-webkit-scrollbar-t ...
css改火狐滚动条样式_css布局系列1——盒模型布局
明确基本概念网页的布局类似于在一个大盒子中摆放各不相同的小盒子.在布局之前,首先要明确几个概念: 1. 块元素:在页面中独占一行,高度默认被内容(子元素)撑开,宽度默认为父元素的100%,也即aut ...
html中怎么把字体向上调,css怎么调整字体？
css怎么调整字体?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么调整字体? 在CSS中可以使用字体(font)属性来调整字体.CSS字体属性 ...
html字体加粗字号为2,【css】文字基本样式（颜色、倾斜、加粗、字号、行高、字体）...
一.字体基本样式首先我们先放置一些文字,基本所有的标签都可以设置字体样式的,这里就使用标签和来做示范啦. O泡时间到! 给我O泡给我O泡,O泡果奶OOO! 图1 基本文字效果注意,文字属性都是 ...
css 好困难字体样式_帮助阅读困难者的字体和浏览器扩展
css 好困难字体样式 G-Stock Studio/Shutterstock G-Stock Studio / Shutterstock Dyslexia is a learning conditi ...

css如何调整红心样式_CSS3跳动的红心

css如何调整红心样式_CSS3跳动的红心相关推荐

最新文章

热门文章