详细教程CSS3

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

		body{

			background-color: #ffa5a5;

		}

			.cen{

				width: 200px;

				height:200px;

				background-color: #d5093c;

				/*阴影效果：   水平方向的偏移，垂直方向的偏移，模糊度，颜色*/

				box-shadow: 10px -10px 70px #D5093C;

				animation: 1s aj infinite;

			}

			/*倒圆角指令*/

			.lef{

				border-radius: 100px;

				position: absolute;

				top: 200px;

				left: 180px;

			}

			.rig{

				border-radius: 100px;

				position: absolute;

				top: 200px;

				left: 320px;

			}

			/*旋转角度*/

			.c{

				transform: rotate(45deg);

				position: absolute;

				top: 270px;

				left: 250px;

			}

			/*div:hover{*/

				/*放大原有图形*/

				/*transform: scale(1.3);*/

				/*2d旋转 如果只有一个数据，那么x和y相同角度，给俩个数据就是先x 后y*/

				/*transform: skew(45deg);*/

				/*移动 显示水平位移，然后是垂直位移  （负数就是向上）*/

				/*transform: translate(0px,-5px);*/

			/*}*/

			/*动画标签*/

			@-webkit-keyframes aj{

				0%{transform: scale(1) rotate(45deg);}

				50%{transform: scale(1.2) rotate(45deg);}

				100%{transform: scale(1.) rotate(45deg);}

			}

		</style>

	</head>

	<body>

		<div class="cen lef"></div>

		<div class="cen c"></div>

		<div class="cen rig"></div>

	</body>

</html>

用到CSS3的标签 :

/*阴影效果：   水平方向的偏移，垂直方向的偏移，模糊度，颜色*/

box-shadow: 10px -10px 70px #D5093C;

 /*倒圆角指令*/

border-radius: 100px;

/*旋转角度 deg就是角度的意思*/

transform: rotate(45deg);

/*放大原有图形*/

transform: scale(1.3);

/*动画标签*/

@-webkit-keyframes aj{

				0%{transform: scale(1) rotate(45deg);}

				50%{transform: scale(1.2) rotate(45deg);}

				100%{transform: scale(1.) rotate(45deg);}

			}

/*调用动画的方法*/

animation: 1s aj infinite;

针对不同的浏览器CSS3有不同的方法：

@keyframes myfirst

{

from {background: red;}

to {background: yellow;}

}

@-moz-keyframes myfirst /* Firefox */

{

from {background: red;}

to {background: yellow;}

}

@-webkit-keyframes myfirst /* Safari 和 Chrome */

{

from {background: red;}

to {background: yellow;}

}

@-o-keyframes myfirst /* Opera */

{

from {background: red;}

to {background: yellow;}

}

CSS_跳动的心的更多相关文章

  1. [WPF,XAML] 跳动的心

    原文:[WPF,XAML] 跳动的心 没什么艺术细胞,原谅,原谅! <Canvas Width="0" Height="0"> <Canvas ...

  2. 使用transform属性和animation属性制作跳动的心

    transform属性允许我们对元素进行旋转.缩放.移动和倾斜: animation属性允许我们对元素实现一些动画效果: 跳动的心源码 <!DOCTYPE html> <html l ...

  3. TurnipBit-MicroPython开发板：跟孩子一起DIY跳动的心

    天是越来越热了,小心脏也是越跳越快啊,为了表达现在激动的心情,必须做个激动的心开始跳动.紧接着就开始带领大家做个激动的心. 首先说说要借助的平台,这次仅仅需要借助一块TurnipBit开发板. Tur ...

  4. 【ShaderToy】跳动的心❤️

    写在前面 注:如果你还不了解ShaderToy,请看开篇. 作为ShaderToy系列的第一篇,我们先来点简单的.下面是效果: (CSDN目前不能传gif文件了,暂时空缺,可以看下面的原shader效 ...

  5. 纯CSS制作“跳动的心”demo

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  6. html跳动的心实现代码

    <style>         .box{             width: 200px;             height: 400px;             positio ...

  7. CSS3学习笔记（2）—左右跳动的红心

    还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈,今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gi ...

  8. 用C++画心（转）

    原地址https://www.zhihu.com/topic/19613730/top-answers 首先上一个动态的心 代码如下: #include <stdio.h> #includ ...

  9. Android开发权威指南（第2版）新书发布

    <Android 开发权威指南(第二版)>是畅销书<Android开发权威指南>的升级版,内容更新超过80%,是一本全面介绍Android应用开发的专著,拥有45 章精彩内容供 ...

随机推荐

  1. （十七）golang--闭包（简单明了）

    所谓闭包:就是一个函数和其相关的引用环境组合的一个整体: 首先,有如下一个小例子,最终的输出结果是什么呢?是输出11,12吗? 对上述代码说明:(1)addUpper是一个函数,返回的是func(in ...

  2. k8s部署高可用Ingress

    部署高可用Ingress 官网地址https://kubernetes.github.io/ingress-nginx/deploy/ 获取ingress的编排文件 wget https://raw. ...

  3. 本地通知-UILocalNotification

    第一步:创建本地推送 本地通知 UILocalNotification // 创建⼀一个本地推送 UILocalNotification * notification = [[UILocalNotif ...

  4. 深入理解 DNS

    深入理解 DNS 简介 DNS(Domain Name System)域名系统,它是一个将域名和 IP 地址相互映射的一个分布式数据库,把容易记忆的主机名转换成主机 IP 地址. DNS使用 TCP ...

  5. 怎样在PaaS平台上搭建一个会自动关闭的会议室

    首相得解释一下,什么叫做会自动关闭的会议室.我们的会议室是存在一个会议预定系统的,一般情况下,我们需要开会的时候,需要先抢占会议室.等待要开会的时候,去会议室里边开会,如果里边有别人,我们可以告诉他们 ...

  6. 启动Spring Tool Suite 4时出现 could not find tools.jar spring boot live hovers....弹窗

    第一步:检查一下STS启动时的加载环境 Help  —› About Spring Tool Suite 4 —› Installation Details —› Configuration 本人已经 ...

  7. PHP+Swoole并发编程的魅力

    PHP语言是一个短生命周期的Web编程语言,很多PHPer已经形成了fpm下编程的思维定势.实际上在Swoole出现之后,这种串行化编程的模式早已被打破.使用Swoole完全可以轻易实现更灵活的并发编 ...

  8. shell中tar加密打包

    tar 打包是一个很常见的操作,但是当打了一个包却又不想让别人看到里面的小秘密的时候就可以使用加密的方法进行打包. 以下是一个脚本实现的加密打包和解密的shell脚本: cat tar_passwor ...

  9. hdu 5495 LCS (置换群)

    Sample Input231 2 33 2 161 5 3 2 6 43 6 2 4 5 1  Sample Output24 C/C++: #include <map> #includ ...

  10. nmap中的详细命令

    nmap全部参数详解-A 综合性扫描端口:80http 443https 53dns 25smtp 22ssh 23telnet20.21ftp 110pop3 119nntp 143imap 179 ...