CSS3 过渡效果触发时机的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360deg过渡效果</title>
<style type="text/css">
div{
cursor:pointer;
width:100px;
height:40px;
background:#92B901;
font-size:14px;
opacity:0.5;
transition-property:width,height,background,font-size,opacity,transform;
transition-duration:1s,1s,1s,1s,1s,1s;
border-radius:5px;
font-weight:bold;
color:#FFF;
padding:10px;
}
div:hover{
width:120px;
height:60px;
background:#1ec7e6;
font-size:20px;
opacity:1;
transform:rotate(360deg);
}
</style>
</head>
<body>
<div>CSS3 transition</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover过渡效果</title>
<style type="text/css">
div{cursor:pointer;width:100px;height:40px;background:#92b901;transition:width 0.5s;}
div:hover{width:200px;}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.js添加操作来触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js添加样式来触发过渡效果</title>
<style type="text/css">
div{width:100px;height:40px;background:#92b901;transition:width 0.5s;}
.change{width:200px;}
</style>
<script type="text/javascript">
setTimeout(function(){
var div = document.querySelector("div");
div.classList.add("change");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js直接修改style属性来触发过渡效果</title>
<style type="text/css">
div{width:100px;height:40px;background:#92b901;transition:width 0.5s;}
</style>
<script type="text/javascript">
setTimeout(function(){
var div = document.querySelector("div");
div.style.width="200px";
});
</script>
</head>
<body>
<div></div>
</body>
</html>
3.通过伪类触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js直接修改伪类属性来触发过渡效果</title>
<style type="text/css">
div{width:100px;height:40px;background:#92b901;transition:width 0.5s;}
input:focus ~ div{width:200px;}
</style>
</head>
<body>
<input>
<div></div>
</body>
</html>
利用input获得焦点,可以把一些相应提示信息显示出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input获得焦点,可以把一些相应提示信息显示出来</title>
<style type="text/css">
input:focus ~ p{width:200px;transform:scale(1);}
p{transform:scale(0);transition:transform 0.2s;}
</style>
</head>
<body>
<input>
<p>请输入数字</p>
</body>
</html>
通过active来触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>active来触发</title>
<style type="text/css">
button:active ~ p{width:200px;transform:scale(1);}
p{transform:scale(0);transition:transform 0.2s;}
</style>
</head>
<body>
<button>hold me</button>
<p>hahah</p>
</body>
</html>
开关按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
input{display:none;}
label{width:100px;height:50px;background:#ADC14E;display:block;border-radius:25px;}
div{width:50px;height:50px;border-radius:50%;background:#FFF;border:1px solid silver;position:relative;left:0;transition: left 0.5s;}
input:checked ~ div{left:50px;}
</style>
</head>
<body>
<label>
<input type="checkbox">
<div></div>
</label>
</body>
</html>
CSS3 过渡效果触发时机的问题的更多相关文章
- 第八十二节，CSS3过渡效果
CSS3过渡效果 学习要点: 1.过渡简介 2.transition-property 3.transition-duration 4.transition-timing-function 5.tra ...
- CSS3过渡效果实现菜单划出效果
下载地址 这是大体上的原理,当然案例比这个多 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
- css雪碧（CSS Sprite）和css3过渡效果综合应用
在网页中我们经常可以看到,有些图片在鼠标经过的时候,有一个上下或左右的滑动效果,很实用页很方便,今天正好用到,拿来和大家分享一下,有什么不对或意见欢迎指正. html部分如下,这里本来打算用jq来着, ...
- Spring 高级特性之二：Processor——Bean生命周期关键触发时机
任何对象都有生命周期,那么Spring Bean对象创建.管理.销毁的整个生命周期个关键触发时机如何体现呢?先说结论,后续案例验证结论. 根据上图可知,实际bean对象涉及生命周期的主要是一个构造器和 ...
- 一文聊透 Netty IO 事件的编排利器 pipeline | 详解所有 IO 事件的触发时机以及传播路径
欢迎关注公众号:bin的技术小屋,本文图片加载不出来的话可查看公众号原文 本系列Netty源码解析文章基于 4.1.56.Final版本 1. 前文回顾 在前边的系列文章中,笔者为大家详细剖析了 Re ...
- 第 25 章 CSS3 过渡效果
学习要点: 1.过渡简介 2.transition-property 3.transition-duration 4.transition-timing-function 5.transition-d ...
- Linux用户抢占和内核抢占详解(概念, 实现和触发时机)--Linux进程的管理与调度(二十）
1 非抢占式和可抢占式内核 为了简化问题,我使用嵌入式实时系统uC/OS作为例子 首先要指出的是,uC/OS只有内核态,没有用户态,这和Linux不一样 多任务系统中, 内核负责管理各个任务, 或者说 ...
- CSS3 动画触发事件
@keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blu ...
- layoutSubview触发时机
layoutSubviews在以下情况下会被调用: 1.init初始化不会触发layoutSubviews 2.addSubview会触发layoutSubviews 3.设置view的Frame会触 ...
随机推荐
- WPF 应用程序资源、内容和数据文件
MSDN相关介绍: http://msdn.microsoft.com/zh-cn/library/aa970494(v=vs.100).aspx 内容文件(Content Files)内容文件简单的 ...
- 【NAS】CIFS用户场景需求分析
1.everyone用户 1.1: 场景描述:共享目录为rule,所有用户都可以查看,但是不能修改: 解决方法:在smb.conf里配置read only = yes,具体示例如下: [rule] p ...
- E2E test protractor selenium
E2E Test和传统的Unit Test不同的是:(1)不涉及代码层面,不会去测试某段代码是否正确或者某行代码是否被覆盖(2)它是从用户的角度出发,用来测试一个应用的流程是否符合预期. 一 Sele ...
- 「日常训练」Alternative Thinking（Codeforces Round #334 Div.2 C）
题意与分析 (CodeForces - 603A) 这题真的做的我头疼的不得了,各种构造样例去分析性质... 题意是这样的:给出01字符串.可以在这个字符串中选择一个起点和一个终点使得这个连续区间内所 ...
- 汽车VIN码，车架号，移动端，服务器端OCR识别 技术公司
很多人在购买车辆的时候,只关注性能.外观.内饰等,其实真正的内行是首先看车辆的VIN码,也叫车架号码. VIN码(车架号码)是一辆车的唯一身份证明,一般在车辆的挡风玻璃处,有的在车辆防火墙上,或B柱铭 ...
- Selenium自动化测试第一天(下)
如有任何学习问题,可以添加作者微信:lockingfree 目录 Selenium自动化测试基础 Selenium自动化测试第一天(上) Selenium自动化测试第一天(下) Selenium自动化 ...
- 【MySQL解惑笔记】Centos7下卸载彻底MySQL数据库
彻底卸载Yum安装的MySQL数据库 在我第二章MySQL数据库基于Centos7.3-部署过程中,因为以前安装过其它的版本所以没有卸载干净影响后期安装 一.卸载Centos7自带的Maridb数据库 ...
- Laxcus大数据管理系统2.0（12）- 第十章 运行
第十章 运行 本章将介绍一些Laxcus集群基本运行.使用情况,结合图片和表格表示.地点是我们的大数据实验室,使用我们的实验集群.数据来自于我们的合作伙伴,软件平台混合了Windows和Fedora ...
- CTC (Connectionist Temporal Classification) 算法原理
(原创文章,转载请注明出处哦~) 简单介绍CTC算法 CTC是序列标注问题中的一种损失函数. 传统序列标注算法需要每一时刻输入与输出符号完全对齐.而CTC扩展了标签集合,添加空元素. 在使用扩展标签集 ...
- LeetCode 104——二叉树中的最大深度
1. 题目 2. 解答 如果根节点为空,直接返回 0.如果根节点非空,递归得到其左右子树的深度,树的深度就为左右子树深度的最大值加 1. /** * Definition for a binary t ...