简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > html教程 > 正文

过渡_html/css_WEB-ITnose

WBOY
发布： 2016-06-24 11:22:38
原创
936 人浏览过

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style>  5 div 6 { 7 width:100px; 8 height:100px; 9 background:yellow;10 transition:width 2s;11 -moz-transition:width 2s; /* Firefox 4 */12 -webkit-transition:width 2s; /* Safari and Chrome */13 -o-transition:width 2s; /* Opera */14 }15 16 div:hover17 {18 width:300px;19 }20 </style>21 </head>22 <body>23 24 <div></div>25 26 <p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p>27 28 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>29 30 </body>31 </html>
登录后复制

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style>  5 div 6 { 7 width:100px; 8 height:100px; 9 background:yellow;10 transition:width 2s, height 2s;11 -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */12 -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */13 -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */14 }15 16 div:hover17 {18 width:200px;19 height:200px;20 transform:rotate(180deg);21 -moz-transform:rotate(180deg); /* Firefox 4 */22 -webkit-transform:rotate(180deg); /* Safari and Chrome */23 -o-transform:rotate(180deg); /* Opera */24 }25 </style>26 </head>27 <body>28 29 <div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div>30 31 <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>32 33 </body>34 </html>
登录后复制

 

transition-timing-function

 

相关标签：
过渡
来源：php.cn
上一篇：CSS中常见的6种文本样式_html/css_WEB-ITnose 下一篇：CSS秘密花园： 连体字母_html/css_WEB-ITnose
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
来自于 2024-04-06 22:01:35
0
3
816
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
来自于 2024-04-06 21:58:04
0
1
800
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
来自于 2024-04-06 21:28:37
0
1
2257
使用网格创建此特定设计：分步指南 我正在尝试创建一个类似于此图像的布局，我尝试过使用此网格但无法实现。<ulclass="container"><liclass="f...
来自于 2024-04-06 20:29:08
0
2
492
如何在 livewire 惰性占位符中使用 laravel 组件 我想在livewire3占位符内添加我的laravel组件的骨架到目前为止我已经尝试过：通过包含Laravel组件来实现Livewire类：publicfunctionplaceh...
来自于 2024-04-06 20:02:10
0
2
543
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！