css3动画特效代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 400px;
background: pink;
}
.txt1{
background: red;
color: #fff;
font-size: 20px;
font-weight: bold;
transform: translateY(20px);
transition: 1s;
}
.txt2{
background: red;
color: skyblue;
font-weight: bold;
transform: translateY(300px);
transition: 1s;
}
.box:hover .txt1{
transform: translateY(60px);
}
.box:hover .txt2{
transform: translateY(200px);
}
</style>
</head>
<body>
<div class="box">
<p class="txt1">哈哈哈哈哈哈哈呵呵</p>
<p class="txt2">哈哈哈哈哈哈哈呵呵</p>
</div>
</body>
</html>
css3动画特效代码的更多相关文章
- css3动画特效:上下晃动的div
css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...
- Magic CSS3 一款独特的CSS3动画特效包
插件描述: Magic CSS3 Animations 动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件: magic.css 或者压缩版本 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- 分享7款顶级的CSS3动画特效
1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...
- css3动画特效:纯css3制作win8加载动画特效
Windows 8 完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下: css特效代码: <style type="text/css"> ...
- 基于css3炫酷页面加载动画特效代码
基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- CSS3动画特效——transform详解
transform让css3可以做很优质的特效,transform的意思是:改变,使-变形,转换. 在css3中transform的作用也是改变,让元素倾斜,旋转,缩放,位移. 下面来一一分解tran ...
- css3动画特效集合
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
随机推荐
- Kubernetes学习笔记(四):服务
服务介绍 服务是一种为一组相同功能的pod提供单一不变接入点的资源.当服务存在时,他的IP和端口不会改变.客户端通过IP和端口建立连接,这些连接会被路由到任何一个pod上.如此,客户端不需要知道每个单 ...
- SpringCloud(二)- Consul介绍、安装、使用
唯能极于情,故能极于剑有问题或错误请及时联系小编或关注小编公众号 “CodeCow”,小编一定及时回复和改正,期待和大家一起学习交流 此文由四部分组成(Consul简介.安装.实操.总结),别着急,慢 ...
- web自动化之键盘操作
简单介绍下web自动化怎么触发键盘操作 按键操作 需要导入的类from selenium.webdriver.common.keys import Keys 组合键Keys.CONTROL 也就是我们 ...
- scikit-learn中文文档
http://sklearn.apachecn.org/cn/0.19.0/tutorial/statistical_inference/supervised_learning.html
- 五、Java - 集合
一.集合 Java 中的集合类存放于 java.util 包中,是一个存放对象的容器. 集合存放的是对对象的引用,对象本身还是存在于 JVM 堆内存中. 存放的是对象,即引用数据类型,对于基本数据类型 ...
- Spring Cloud 系列之 Apollo 配置中心(一)
背景 随着程序功能的日益复杂,程序的配置日益增多:各种功能的开关.参数的配置.服务器的地址等等. 对程序配置的期望值也越来越高:配置修改后实时生效,灰度发布,分环境.分集群管理配置,完善的权限.审核机 ...
- Alpha冲刺——总结随笔
这个作业属于哪个课程 软件工程 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 Alpha冲刺 作业正文 正文 github链接 项目地址 其他参考文献 无 一.项目预期计划: ...
- Rocket - util - Counters
https://mp.weixin.qq.com/s/q7R2Dn9p9cch_ABN4raReQ 介绍几种计数器的实现,以及其中的一点小细节. 1. ZCounter ...
- Java实现 蓝桥杯 算法训练 Airport Configuration
试题 算法训练 Airport Configuration 问题描述 ACM机场是一个本地机场,对于大多数人来说,机场不是他们的终点或起点,而是中转站.机场有一个规划图.到达的大门在机场的北边(相当于 ...
- Java实现 蓝桥杯 算法提高 文本加密
算法提高 9-2 文本加密 时间限制:1.0s 内存限制:256.0MB 提交此题 问题描述 先编写函数EncryptChar,按照下述规则将给定的字符c转化(加密)为新的字符:"A&quo ...