像360deg过渡效果,做专题的同学应该是经常做的.
 <!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>
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALYAAABhCAIAAAD0qczEAAAE+klEQVR4nO2dTU7bQBxHOQkLVpWqSvQK5SSRkLhNF0jZ9RBF3eUCodAFCxZmXRIgJZEgEYhIKF0ktsfz9Tf+Gid+P71VNJ5YnpeZsT0DeytCvNkLfQKk7UERIgRFiBAUIUJQhAhBESJEUOTi+a0XTQ8v7/eHYwjO4eV9L5oOn96akWMdnyI/xouD8/DXBTQOzsent/Pwivx6fP36h86jpXy+uDt7fAmsyMnNLPiFAA8nN7PAihxdTYJfBfBwdDUJrEjwSwAiKAICKAICKAICKAICKAICKAICKAICKAICKAIC26NI9PqQPfZ6ZC05Gyyz5RZza4XHs/dsuWXfVqy/kKvabUq2fc6UVMRo9STL12OvRkm5fr4Ks9rZimnf2AGkxq0mpRTJ/I7NpL9st0mZYmb/oUaRabSpbu1NctTDrFtvp71Xv7KUUGSUNrv6E1e8eR9E4/2h2oUozZx+GBdTTFIqTD9MDIi/Iq4tqapjw0355s+T4ookKpgzj/4i2+3HTaj9yo0aYhu0ISNx0WUAitSZworMr9flcs0A4sLSWJD2QB+ZWHhk3W1qckJLaUXy/XBtkwzbfYptVutreKV81/xovSIf79tdc1u9aUeOma31i9TC3NHUk+YU8Rhg6wDSsSmNOBfpmCVVCCCn9EDjeK6Vh7Rf8XuWWuX8rmQg69RwU5MTWmq7o1GaMy6Z3NwmZOe8sQrmlNZdA4rUnuqfi6gzU+3RltYN6Pcvrrln+kVrRSw3U6JDO0m5ps+bZp6u2iYWSoxnYo7ETiTFNgcyF6kztb2j0eYNrvuUlTYR8cikVmgt1q0uZFsUGe8PS7zpdTSq+RDF+sAt0+V0rP/YNkUgECgCAigCAigCAigCAigCAigCAigCAigCAigCAluiyGjZnq0Jjve9s8HSssGiPae9y4qsm6Q919qiyOb9EYoUTwXrRVp8rZMXh8WXxrWZJgRBka2mCUEKK2Ku/XmYzdT1YP3khX68HEQ/xLpMZPl6nFkLojetXkl2DUBmoLHst1j2h06ztRUI2noGtWb1HMKug3S1XbWpRxEl16Oxc+VR2sDulURpGbGSwoo4alYkdi+HC7mOyXVO1abagcax6y67S1tpkuT6KopsGib5xNgYHLecudvbmK7aBhrjtN31pJ2EosimKn1xJIp8UBFh7Dfa0nKgvqg9x1aJQopYd57qH1qW+7dgI3GB9i6QehTxLBPMLGI1FFEONPY9uEaxcoo4piZaVe7baRSpSBHHWP4hRVx/xyZtNhSpI00oYu6scQ40fkWGWsPH0YcDFKkyDShiaadyioz1r9OnkPXNRVBESQ2KxNdX312XSxHLX6sydlgVu6Mx703cdzQookQ+xezMQHt05hpotOhTUV8v4trW5ZmLaHOg8s9FUERJrrNUb08Wc890NWOJWlJ7CiINNP6/t2l706s2//sgcr83sN9qoQjrRbYZFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAEBFAGBwIp8u5oEvwTg4ehqEliRXjQNfhXAQy+aBlbk7PHly+V98AsBVj79vvv57yWwIqvV6vS2W/9ffYv4/ve5GT8ERVar1fDprRdND+lO2sHh5X0vmg6f3pqRYx1BEUJQhAhBESIERYgQFCFCUIQIQREiBEWIEBQhQlCECPkPsT5qeaUIMFsAAAAASUVORK5CYII=" alt="" />
其实触发过渡效果有很多种方式,今天总结一下:
1.最常见的hover触发过渡效果
 <!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>
比如直接修改style属性来触发
 <!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>
aaarticlea/png;base64,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" alt="" />
如果上面要模拟开关,需要把主要的样式都放在input的兄弟元素上.

CSS3 过渡效果触发时机的问题的更多相关文章

  1. 第八十二节，CSS3过渡效果

    CSS3过渡效果 学习要点: 1.过渡简介 2.transition-property 3.transition-duration 4.transition-timing-function 5.tra ...

  2. CSS3过渡效果实现菜单划出效果

    下载地址 这是大体上的原理,当然案例比这个多 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. css雪碧（CSS Sprite）和css3过渡效果综合应用

    在网页中我们经常可以看到,有些图片在鼠标经过的时候,有一个上下或左右的滑动效果,很实用页很方便,今天正好用到,拿来和大家分享一下,有什么不对或意见欢迎指正. html部分如下,这里本来打算用jq来着, ...

  4. Spring 高级特性之二：Processor——Bean生命周期关键触发时机

    任何对象都有生命周期,那么Spring Bean对象创建.管理.销毁的整个生命周期个关键触发时机如何体现呢?先说结论,后续案例验证结论. 根据上图可知,实际bean对象涉及生命周期的主要是一个构造器和 ...

  5. 一文聊透 Netty IO 事件的编排利器 pipeline | 详解所有 IO 事件的触发时机以及传播路径

    欢迎关注公众号:bin的技术小屋,本文图片加载不出来的话可查看公众号原文 本系列Netty源码解析文章基于 4.1.56.Final版本 1. 前文回顾 在前边的系列文章中,笔者为大家详细剖析了 Re ...

  6. 第 25 章 CSS3 过渡效果

    学习要点: 1.过渡简介 2.transition-property 3.transition-duration 4.transition-timing-function 5.transition-d ...

  7. Linux用户抢占和内核抢占详解(概念, 实现和触发时机)--Linux进程的管理与调度(二十）

    1 非抢占式和可抢占式内核 为了简化问题,我使用嵌入式实时系统uC/OS作为例子 首先要指出的是,uC/OS只有内核态,没有用户态,这和Linux不一样 多任务系统中, 内核负责管理各个任务, 或者说 ...

  8. CSS3 动画触发事件

    @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blu ...

  9. layoutSubview触发时机

    layoutSubviews在以下情况下会被调用: 1.init初始化不会触发layoutSubviews 2.addSubview会触发layoutSubviews 3.设置view的Frame会触 ...

随机推荐

  1. 常用前端UI框架

  2. 深圳Uber司机本周（7.13-7.19凌晨4：00）的奖励政策

    本周(7.13-7.19凌晨4:00)的奖励政策为: 佣金返还: 车费的20%适用于所有产品(不包括Tesla)无获取条件 翻倍补贴: 每周一到周四07:00-10:00/17:00-22:00:车费 ...

  3. 03-JVM内存模型：堆与方法区

    一.堆(Heap) 1.1.什么是堆 堆是用于存放对象的内存区域.因此,它是垃圾收集器(GC)管理的主要目标.其具有以下特点: 堆在逻辑上划分为“新生代”和“老年代”.由于JAVA中的对象大部分是朝生 ...

  4. PAT - L2-001. 紧急救援( Dijstra )

    - PAT - L2-001. 紧急救援 题目链接 作为一个城市的应急救援队伍的负责人,你有一张特殊的全国地图.在地图上显示有多个分散的城市和一些连接城市的快速道路.每个城市的救援队数量和每一条连接两 ...

  5. 为什么说session依赖cookie，以及cookie的常用知识

    session的用法 session在Flask中通常用做设置某些页面的权限,比如某些页面必须要登录才可以看到,登录的信息或标志就放到session中.它的使用过程如下: 在整个flask工程的启动文 ...

  6. （原）HUD绘画贴图解析

    @小道:临时存放       1\主过程 说明: a\调用DrawTextureSimple时,会将UTexure封装成CavarsItem, 若是正交投射函数执行双,最后CavarsItem.Dra ...

  7. 《Effective C++》读书笔记 条款02 尽量以const，enum，inline替换#define

    Effective C++在此条款中总结出两个结论 1.对于单纯常量,最好以const对象或enum替换#define 2.对于形似函数的宏,最好改用inline函数替换#define 接下来我们进行 ...

  8. Halcon和visionPro的比较

    很多朋友会问到visionpro和halcon这两款机器视觉软件,到底学哪个好呢,今天重码网就给大家讲一讲: 首先比较下两者的优缺点: halcon: 提供的图像算法要比Visionpro多,也就是说 ...

  9. parity注记词和地址

    remix skilled curled cobweb tactics koala bartender precinct energize exes ridden cohesive 0x00EeC52 ...

  10. Python3 数据类型-字符串

    字符串是 Python 中最常用的数据类型,是一个个字符组成的有序的序列,是字符的集合. 一 字符串定义 创建字符串很简单,可以使用引号('或"或""")来创建 ...