css3效果大杂烩
来源:互联网 发布:淘宝买家改评价怎么改 编辑:程序博客网 时间:2024/05/30 23:38
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>菜鸟教程(runoob.com)</title>
- <style>
- div
- {
- /*颜色渐变的相关知识*/
- background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
- background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
- background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
- background: linear-gradient(green, #f32394); /*颜色的渐变 标准的语法(必须放在最后) */
- background: linear-gradient(to bottom right, red , blue); /*颜色对角的渐变 标准的语法 */
- background: linear-gradient(90deg, red, blue); /* 以某些角度来渐变标准的语法 */
- background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*颜色渐变有透明度:标准的语法 */
- /* 径向的颜色渐变*/
- background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
- background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
- background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
- background: radial-gradient(yellow, green, blue); /* 标准的语法(必须放在最后) */
- background: repeating-radial-gradient(red, yellow 10%, green 15%);/*重复的径向渐变*/
- width:400px;
- height:75px;
- background-color:red;
- border:1px solid black;
- }
- div#div2
- {
- /*背景图片的相关属性:图片所在位置、是否平铺等等*/
- background-image: url(img_flwr.gif), url(paper.gif);
- background-size:80px 60px;/*设置图片大小:也可以是百分比:50% 50% */
- background-position: right bottom, left top;
- background-repeat: no-repeat, repeat;
- background-origin:content-box;/*图片的以哪个元素进行定位*/
- background-clip: content-box; /*图片的以哪个元素进行裁剪,有边界*/
- /*边框的属性:角度、背景、圆角、阴影效果*/
- border:2px solid #a1a1a1;/*边界宽度/颜色*/
- border-radius:25px;/*边界的角度*/
- background-color:yellow;/*背景颜色*/
- box-shadow: 10px 10px 5px #888888;/*阴影效果*/
- transform:rotate(10deg);/* 旋转60度*/
- -ms-transform:rotate(10deg); /* IE 9 */
- -webkit-transform:rotate(10deg); /* Safari and Chrome
- -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
- -o-border-image:url(border.png) 30 30 round; /* Opera */
- border-image:url(border.png) 30 30 round;/*边界图片修饰*/
- width:200px;
- }
- span#div3
- {
- /*文字效果设置*/
- text-shadow: 5px 5px 5px #FF0000;/*文字阴影效果*/
- word-wrap:break-word;/*换行*/
- word-break:break-all;
- -webkit-transition:width 2s; /* Safari */
- width:500px;
- margin:300px;
- }
- /*鼠标放在上面会有宽度变化的过度效果*/
- div
- {
- width:100px;
- height:100px;
- /*鼠标悬浮,有颜色变化的动画效果*/
- background:red;
- animation:myfirst 5s;
- -webkit-animation:myfirst 5s; /* Safari and Chrome */
- background:red;
- transition:width 2s;/*宽度的变化*/
- -webkit-transition:width 2s; /* Safari */
- transition: width 2s, height 2s, transform 2s;/*多个效果的组合*/
- -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
- }
- div:hover
- {
- width:300px;
- height: 200px;
- transform: rotate(180deg);
- }
- /*鼠标悬浮,有颜色变化的动画效果*/
- @keyframes myfirst
- {
- from {background:red;}
- to {background:yellow;}
- }
- /*鼠标悬浮,有颜色变化的动画效果*/
- @-webkit-keyframes myfirst /* Safari and Chrome */
- {
- from {background:red;}
- to {background:yellow;}
- }
- </style>
- </head>
- <body>
- <div>css3的所有效果总结</div>
- <div id="div2">你好。这是一个 DIV 元素。</div>
- <span id="div3">文字相关的效果,是否支持换行的呢,我来测测看,看看是否会换行the word will turn around</span>
- <p>鼠标移动到 div 元素上,查看过渡效果。</p>
- </body>
- </html>
0 0
- css3效果大杂烩
- css3 js 移动大杂烩
- css3效果
- CSS3效果
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 大杂烩
- 计算机网络(七)--TCP的可靠传输原理及实现(二)
- 先序中序重建二叉树
- 文件夹查找操作 CFileFind类的IsDots()和IsDictionary()函数
- Android Service与Activity之间通信的几种方式
- LeetCode 338. Counting Bits
- css3效果大杂烩
- DynamicCocoa:滴滴 iOS 动态化方案的诞生与起航
- TCP/IP-IP
- C# AspriseOCR 验证码识别(第一讲)
- 非广州户籍在校研究生办理港澳通行证和护照心得
- editview点击焦点如何被其他空间夺走
- leetcode-107. Binary Tree Level Order Traversal II
- Quartz从不了解到了解一点点
- JavaScript中清空数组的三种方式