C3常用属性

最新推荐文章于 2022-12-22 23:43:29 发布
最新推荐文章于 2022-12-22 23:43:29 发布
阅读量2.2k 收藏
点赞数
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38263015/article/details/72453032
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #dv {
            border: 2px solid red;
            padding: 10px 40px;
            /*圆角化*/
            border-radius: 25px;
            -moz-border-radius: 25px;
        }
        #dv2 {
            width: 400px;
            height: 200px;
            margin-top: 10px;
            background-color: orange;
            /*基于原图 
            第一个值向右偏离为正值
            第二个值向下偏离为正值
            第三个值为边框阴影的模糊程度
            第四个值为边框阴影颜色     
            */
            -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
            box-shadow: 10px 10px 5px #888888
        }

        #dv3 {
            border:15px solid transparent;
            width:300px;
            margin-top: 10px;
            padding:10px 20px;

            -moz-border-image:url(images/border.png) 30 30 stretch; /* Old Firefox */
            -webkit-border-image:url(images/border.png) 30 30 stretch;  /* Safari and Chrome */
            -o-border-image:url(images/border.png) 30 30 stretch;   /* Opera */
            border-image:url(images/border.png) 30 30 stretch;
        }
        #dv4{
            border:15px solid transparent;
            width:300px;
            margin-top: 10px;
            padding:10px 20px;

            -moz-border-image:url(images/border.png) 30 30 round;   /* Old Firefox */
            -webkit-border-image:url(images/border.png) 30 30 round;    /* Safari and Chrome */
            -o-border-image:url(images/border.png) 30 30 round; /* Opera */
            border-image:url(images/border.png) 30 30 round;
        }

        #dv5{
            margin-top: 10px;
            color：red;
            text-shadow: 5px 5px 5px #888888;
        }

        /*使用自己自定义的字体*/
        /* @font-face
            {
            font-family: myFirstFont;
            src: url('Sansation_Light.ttf'),
                 url('Sansation_Light.eot'); IE9+
            }

            div
            {
            font-family:myFirstFont;
            } */

        /*2d转换*/
        #dv6 {
            width: 200px;
            height: 200px;
            margin-top: 10px;
            background-color: red;
            transform: translate(50px,50px) rotate(30deg) scale(2,1) skew(30deg,40deg);
        }

        /*3d转换*/
        #dv7 {
            width: 200px;
            height: 200px;
            margin-top: 100px;
            background-color: blue;


            transition: all 6s liner 1s;
            -moz-transition: all 6s liner 1s;
            -webkit-transition: all 6s liner 1s;
            -o-transition: all 6s liner 1s;

        }
        #dv7:hover {

            width: 400px;
            height: 400px;
            background-color: deeppink;

            /*transform: translate(50px,50px) rotate(40deg) scale(1,1) skew(30deg,40deg);*/
        }



        /*动画*/
        #dv8{
            width: 400px;
            height: 400px;
            animation:myfirst 5s;
            -moz-animation:myfirst 5s; /* Firefox */
            -webkit-animation:myfirst 5s; /* Safari and Chrome */
            -o-animation:myfirst 5s; /* Opera */


            -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/ 
            -webkit-animation-duration: 10s;/*动画持续时间*/ 
            -webkit-animation-timing-function: ease-in-out; /*动画频率，1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

            2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

            3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

            4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

            5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
            */ 
            -webkit-animation-delay: 2s;/*动画延迟时间*/
            -webkit-animation-iteration-count: 10;/*定义循环次数，infinite为无限次*/ 
            -webkit-animation-direction: alternate;/*定义动画方式 animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。著作权归作者所有。*/
        }

             animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]

            @keyframes myfirst
            {
            0%   {background: red; left:0px; top:0px;}
            25%  {background: yellow; left:200px; top:0px;}
            50%  {background: blue; left:200px; top:200px;}
            75%  {background: green; left:0px; top:200px;}
            100% {background: red; left:0px; top:0px;}
            }

            @-moz-keyframes myfirst /* Firefox */
            {
            0%   {background: red; left:0px; top:0px;}
            25%  {background: yellow; left:200px; top:0px;}
            50%  {background: blue; left:200px; top:200px;}
            75%  {background: green; left:0px; top:200px;}
            100% {background: red; left:0px; top:0px;}
            }

            @-webkit-keyframes myfirst /* Safari 和 Chrome */
            {
            0%   {background: red; left:0px; top:0px;}
            25%  {background: yellow; left:200px; top:0px;}
            50%  {background: blue; left:200px; top:200px;}
            75%  {background: green; left:0px; top:200px;}
            100% {background: red; left:0px; top:0px;}
            }

            @-o-keyframes myfirst /* Opera */
            {
            0%   {background: red; left:0px; top:0px;}
            25%  {background: yellow; left:200px; top:0px;}
            50%  {background: blue; left:200px; top:200px;}
            75%  {background: green; left:0px; top:200px;}
            100% {background: red; left:0px; top:0px;}
            }
    </style>
</head>
<body>


    <div id="dv"></div>
    <div id="dv2"></div>
    <div id="dv3"></div>
    <div id="dv4"></div>
    <div id="dv5">hello 世界</div>
    <div id="dv6"></div>

    <div id="dv7"></div>

    <div id="dv8"></div>
</body>
</html>
懂鹏辉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于h5/c3/新特性的总结
weixin_49204513的博客
08-31 409
常用新标签 - header：定义文档的页眉 头部 - nav：定义导航链接的部分 - footer：定义文档或节的页脚 底部 - article：定义文章。 - section：定义文档中的节（section、区段） - aside：定义其所处内容之外的内容 侧边 - datalist 标签定义选项列表。请与 input 元素配合使用该元素 <input type="text" value="输入明星" list="star"/> <!-- input里面用 list --
C3之text属性的补充
qq_46179838的博客
12-06 190
text属性一、text-shadow 文本阴影 一、text-shadow 文本阴影
c3新特性
热门推荐
babyrita的博客
08-07 1万+
1.文本阴影text-shadow text-shadow:偏移量x 偏移量y  模糊度  颜色； 注意： 水平偏移量： 正值向右，负值向左 垂直偏移量：  正值向下，负值向上 模糊度不能为负数 可设置多个text-shadow，每个用逗号分隔 例子:text-shadow:1px  2px  3px  red,2px  3px  4px  pink; 2.边框圆角 bor
c3 新特性
weixin_30788731的博客
01-29 106
　　　　　　　　渐变 线性渐变 .line { height: 100px; /*线性渐变语法*/ background-image: linear-gradient( to right,/* 渐变的方向 ： to + 方位名称(left| right| top| bottom) */ red,/* 设置渐变的开始颜色 */ /* 可以设置多个...
C3常用的Api软件
01-28
以下是一些C#中常用API的详细说明： 1. `DateTime` 类：这个类用于处理日期和时间。`System.DateTime currentTime = new System.DateTime();` 创建一个日期时间对象。`DateTime.Now` 属性返回当前系统时间，你可以...
C3P0jar包.rar
05-16
C3P0jar包是Java开发中常用的数据库连接池组件，它提供了强大的数据库连接管理功能，使得在多线程环境中可以高效、稳定地管理和复用数据库连接。这个RAR压缩包包含了两个重要的JAR文件，分别是c3p0-0.9.5.2.jar和...
c3p0.jar文件
12-23
总的来说，c3p0.jar文件是Java开发中常用的数据库连接池实现之一，它提供了强大的连接管理和资源优化功能，对于提高Java应用程序的性能和稳定性具有显著作用。正确配置和使用c3p0，能够有效地提升系统的整体运行效率...
c3p0连接池插件
07-01
以下是一些常用的c3p0配置参数： - `minPoolSize`：最小连接池大小。 - `maxPoolSize`：最大连接池大小。 - `acquireIncrement`：当连接池需要更多连接时，一次获取的数量。 - `maxIdleTime`：连接的最大空闲时间，...
CSS3的新特性整理
weixin_30339457的博客
10-15 117
animation IE10 animation的六大属性 animation-name规定需要绑定选择器的keyframe名称 animation-duration规定完成动画所花费的时间 s ms object.style.animationDuration="3s" animation-timing-function动画的速度曲线默认值ease object.style.ani...
黑马H5C3笔记——CSS字体属性
naonao0213的博客
11-12 187
目录 1.字体系列 注意事项 2.字体大小 注意事项 3.字体粗细 注意事项 4.字体样式 5.font复合属性写法 注意事项 1.字体系列 CSS使用font-family定义文字的字体系列 <style> p { /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */ font-family: 'Times New Roman',...
c3新增特性
cmhahaha的博客
08-04 1568
css3的新增特性 文字效果 ① word-wrap CSS3中，word-wrap会检索当前行超过指定容器的边界的单词并对其进行拆分。所有主流浏览器都支持 word-wrap 属性。p { word-wrap:break-word; } ② text-overflow text-overflow作用是规定如果当前行超过指定容器的边界时怎样显示。它与word-wrap协同工作，对于“text-overflow”属性，有“clip”和“ellipsis”两种可供选择。 clip : 　不显示...
C3的新特性.你都知道了吗？？？
最新发布
weixin_65692463的博客
12-22 675
5.背景 background-size background-origin backgrounde -clip。3.圆角边框 border-radius 边框阴影 border-shadow。6.渐变 linear-gradient，radial-gradient。1.新增颜色RGBA,HSLA模式。4.盒子模型box-sizing。7.过渡 transition。8.自定义动画@keyfrom。12.字体图标iconfont。9.媒体查询@media。13.弹性布局flex。11.2d/3d转换。
C3新增特性总结
wind的博客
08-27 335
来源
H5C3新特性
zaoxi6240的博客
12-02 1918
兼容性：支持ie9以上 1.H5 新增标签 nav(定义导航链接部分)  header（定义文档的头部）  footer（定义文档的页脚底部） article（定义文章） section（定义文档的节，相当于div）aside（定义其所处之外的内容，边） 手机移动端不需要考虑兼容性的问题，经常用到 2.新增属性 datalist 与input 搭配，下拉搜索框。 3.新增表单 colo...
H5、C3新特性
weixin_55690518的博客
08-15 1250
H5、C3新特性： 一、HTML5的新特性 1、拖拽释放：拖拽是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中， 2、自定义属性data-id 3、语义化更好的标签（header, nav，footer，aside，article ，section） 4、音频、视频（audio、video）如果浏览器不支持自动播放的时候，在属性中添加autoplay 5、画布Canvas 6、地理（Geolocation） 7、本地离线存储（localStorage）长期储存数据，浏览器关闭后
H5 和 C3 的新特性
qq_54281798的博客
03-21 2201
H5 新增新特性 1、拖拽释放 拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 种，拖放是标准的一部分，任何元素都能够拖放 2、自定义属性 如：data-id 3、语义化标签 如：header、nav、footer、aside、article、section等 4、音频（audio）、视频（video） 如果浏览器不支持自动播放怎么办？在属性中添加 autoplay 5、画布（Canvas） getContext() 方法返回一个用于画布上的绘图的环境 Canvas.get
Spring数据源配置：c3p0与DBCP实战解析
本文主要介绍了如何在Spring框架中配置两种常用的数据源——c3p0和dbcp。这两种数据源都是为了管理数据库连接池，提高应用程序的性能和效率。 Spring框架允许开发者通过XML配置文件来设定数据源。数据源是应用程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值