详细教程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. 2-了解DBMS

    1.DB,DBS,DBMS的区别是什么?     1.1 DB 就是数据库,数据库是存储数据的集合,可理解为多个数据表     1.2 DBS 数据库系统,包括数据库,数据库管理系统和数据库管理人员D ...

  2. 什么情况用ArrayList or LinkedList呢?

    ArrayList 和 LinkedList 是 Java 集合框架中用来存储对象引用列表的两个类.ArrayList 和 LinkedList 都实现 List 接口.先对List做一个简单的了解: ...

  3. 3. 彤哥说netty系列之Java BIO NIO AIO进化史

    你好,我是彤哥,本篇是netty系列的第三篇. 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识. 简介 上一章我们介绍了IO的五种模型,实际上Java只支持其中的三种,即BIO/NIO/ ...

  4. C语言|博客作业01

    2.1你对计算机科学与技术的了解是怎样? 一开始,我并不知道计科和软件的区别,甚至以为这是一种专业的两种叫法.进了大学之后,才一下子懂了,计科就是计科,它和软件虽有相同之处,但是终究是不一样的.计科涉 ...

  5. PHP-会话控制Cookie和Session

    会话控制:就是为了我们在访问页面和页面之间的跳转是,能够识别到你的登录状态,已经你的登录时长等 在php的会话控制当中,涉及到两个概念Cookie和Session Cookie 会话控制 原理:在登录 ...

  6. 编写自定义cmake配置文件FindXXX.cmake或者xxx-config.cmake | cmake with user defined entry

    本文首发于个人博客https://kezunlin.me/post/12ab5707/,欢迎阅读! cmake with user defined entry Guide FindXXX.cmake ...

  7. 16 Zabbix4.4.1系统告警“Zabbix agent is not available (for 3m)“

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 Zabbix4.4.1系统告警“Zabbix agent is not available (fo ...

  8. 使用zuul实现验证自定义请求头中的token

    路由:她会把外部所有对请求转发到具体的微服务实例上,是实现外部访问同一接口的基础 过滤: 就是权限的检查, 判断当前的请求是否有权限区访问那些服务集群 搭建后台网关: 导入eureka - clien ...

  9. java之初见

    1.Java语言的了解: Java语言最早是由SUN公司创造出来的,1991年,SUN公司的green项目,Oak,随后SUN公司和后来的甲骨文公司又先后发布了java1.0,1.1,1.2,1.3, ...

  10. linux终端操作

    ------------恢复内容开始------------ tab键自动补全 ls列出当前文件目录: 默认是当前目录 “.”代表当前目录 “..”代表父目录 -a显示所有,而隐藏文件的第一字符为点“ ...