Css进阶>>Css3让你玩的开心哦。(一)

简介: Css进阶>>Css3让你玩的开心哦。(一)

Css3的一些属性:

 <style type="text/css">
        *{
            text-align: center;
            /*这种方法自己参考*/
            /* background-image: linear-gradient(0deg,  white, whitesmoke);*/
            /*颜色写法的模式*/
            /*方法一color+颜色单词*/
            color: red;
            /*方法二color+#后六的字符*/
            color: #FF0000;
            /*方法三定义RGB模式*/
            color: rgb(64,423,154);
            color: rgb(24%,123%,67%);
            /*背景色的定义方法一*/
            background-color: rgba(223,124,67,0.6);
            /*背景色的定义方法二*/
            background-color: rgba(40%,30%,67%,0.6);
        }
        /*自定义字体内容学习模块*/
        @font-face {
            /*字体的名称为F*/
            font-family: f;
            /*src: url('STCAIYUN.TTF');*/
            /*引入字体模块*/
            src: url('YUGOTHB.TTC');
        }
        h1{
            /*字体名称*/
            font-family: f;
        }
    </style>

上面代码是一些基础操作(色彩的设置,字体的定义,背景色彩的设置)

请看下面效果图

进入第一步部分:自定义的字体设置,如何自定一个字体呢?

 <style>
 /*自定义字体内容学习模块*/
        @font-face {
            /*字体的名称为F*/
            font-family: f;
            /*src: url('STCAIYUN.TTF');*/
            /*引入字体模块*/
            src: url('YUGOTHM.TTC');
        }
        h1{
            /*字体名称*/
            font-family: f;
        }
</style>

上面的代码是自定义的字体的方式:

重点在你用的@font-face与你要设置的对象名称一致


思考用什么样的方式实现上面代码的效果呢!


思考用什么样的方式实现上面代码的效果呢!


思考用什么样的方式实现上面代码的效果呢!

下面我来说明一下答案:书可以读厚度在于你自己的理解哦。

Css3动画的:《位移》《放大缩小》《旋转》

!--Css学习内容二动画效果-->
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background: pink;
            animation-name: k;
            animation-duration: 15s;
            /*动画运行运动曲线*/
            animation-timing-function: ease;
            animation-timing-function: ease-in-out;
            animation-timing-function: ease-out;
            /*动画播放次数*/
            animation-iteration-count: 3;
            /*动画是否反向*/
            animation-direction: alternate;
            animation-direction: alternate-reverse;
            /*动画初始*/
            animation-fill-mode: backwards;
            animation-fill-mode: forwards;
            animation-fill-mode: both;
            /*连写*/
            /*animation: move 4s ease 2s infinite alternate forwards;*/
        }
        div:hover{
            animation-play-state: paused;
        }
        /*动画的效果图*/
        @keyframes k{
            15%{
                transform: translate(2200px,0);
                background: lavender;
                font-size: 50px;
                height: 300px;
            }
            20%{
                transform: translate(2200px,500px);
                width: 200px;
                background: royalblue;
            }
            35%{
                transform: translate(0px,500px);
               background-color: #FF0000;
            }
            45%{
                transform: translate(1000px,0);
                height: 200px;
                background: lavender;
                font-size: 50px;
            }
            55%{
                transform: translate(1000px,500px);
                width: 10px;
                background: royalblue;
                height: 20px;
            }
            65%{
                transform: translate(0px,500px);
                height: 20px;
                background: peachpuff;
                font-size: 20px;
            }
            75%{
                transform: translate(0px,500px);
                height: 20px;
                background: yellow;
                font-size: 20px;
            }
            85%{
                transform: translate(0px,500px);
                height: 20px;
                background: palevioletred;
                font-size: 20px;
            }
            95%{
                transform: translate(0px,500px);
                height: 20px;
                background: pink;
                font-size: 20px;
            }
            100%{
                transform: translate(0px,0px);
            }
        }
    </style>

上面代码是css的样式

<body>
<div style="background: gray; float: left;" >1</div>
<div style="background: red; float:right;">2</div>
<div style="background: khaki; float: initial;" >3</div>
<div style="background: crimson; float: left;" >1</div>
<div style="background: #1E90FF; float:right;">2</div>
<div style="background: khaki; float: initial;" >3</div>
<div style="background: salmon; float: right;">4</div>
<div style="background: mediumpurple;">5</div>
<div style="background: skyblue;">6</div>
<div style="background: salmon; float: right;">4</div>
<div style="background: mediumpurple;">5</div>
<div style="background: lightblue;">6</div>
<div style="background: gray; float: left;" >1</div>
<div style="background: red; float:right;">2</div>
<div style="background: khaki; float: initial;" >3</div>
<div style="background: crimson; float: left;" >1</div>
<div style="background: #1E90FF; float:right;">2</div>
<div style="background: khaki; float: initial;" >3</div>
<div style="background: salmon; float: right;">4</div>
<div style="background: mediumpurple;">5</div>
<div style="background: skyblue;">6</div>
<div style="background: salmon; float: right;">4</div>
<div style="background: mediumpurple;">5</div>
<div style="background: lightblue;">6</div>
</body>


上面的代码是主体内容

解说:

@1 定义动画的名称。

animation-name: k;

@2 定义动画运行运动曲线

animation-timing-function: ease;

animation-timing-function: ease-in-out;

animation-timing-function: ease-out;

@3 动画播放次数

animation-iteration-count: 3;

@4动画是否反向

animation-direction: alternate;

animation-direction: alternate-reverse

@5/*动画初始*/

animation-fill-mode: backwards;

animation-fill-mode: forwards;

animation-fill-mode: both;

@6鼠标停在运动对象时的效果div:hover{ animation-play-state: paused;}

@7/*定义字体的步数*/

animation: move 10s steps(28)forwards;


相关文章
|
6月前
|
前端开发 JavaScript 开发者
CSS进阶-过渡与动画的事件监听
【6月更文挑战第16天】**CSS过渡和动画事件增强交互性,但监听与控制需谨慎。了解`transitionend`用于CSS过渡结束时的响应,避免过度使用JavaScript检测变化。示例代码展示如何绑定`transitionend`事件并在结束后执行操作。对于CSS动画,理解`animationstart`, `animationiteration`, `animationend`事件的生命周期至关重要,确保在动画结束后进行适当的清理。通过这些技巧,优化用户体验并提高代码效率。**
65 5
|
6月前
|
前端开发 JavaScript UED
CSS进阶 - CSS性能优化
【6月更文挑战第17天】**CSS性能优化关乎美观与速度。减少无用和重复样式,简化选择器,避免频繁重绘与回流,预加载关键CSS,以及模块化代码,能提升加载速度和用户体验。通过代码审查、工具辅助、选择器优化、使用transform和opacity、CSS预加载、以及文件拆分和模块化,开发者可应对复杂网页的性能挑战。**
98 2
|
6月前
|
前端开发 JavaScript 开发者
CSS进阶 - CSS Modules与预处理器简介
【6月更文挑战第17天】前端开发中,CSS Modules和预处理器(如Sass、Less)解决了大规模项目中CSS的管理难题,提升代码复用和维护性。CSS Modules提供局部作用域的类名,避免全局冲突,而预处理器扩展CSS功能,使代码更像编程语言。常见问题包括命名冲突和过度嵌套,可通过自动哈希、少嵌套、合理变量规划来解决。结合两者使用,遵循模块化和适度预处理原则,集成到构建工具中,能优化开发流程。这些技术是现代前端不可或缺的工具。
75 2
|
6月前
|
编解码 前端开发 UED
CSS进阶 - 响应式设计与媒体查询
【6月更文挑战第17天】响应式设计通过媒体查询适应不同设备,确保网页在桌面、平板、手机上提供优化体验。媒体查询是CSS核心技术,允许根据设备特性应用样式。常见问题包括忽视视口设置、硬编码断点和过度依赖查询。解决办法涉及设置正确的视口元标签、基于内容的断点和模块化设计。通过移动优先策略和灵活的断点管理,可创建高效、易维护的响应式网站。
47 1
|
2月前
|
前端开发
【CSS】纯css3螺旋状loading加载特效
【CSS】纯css3螺旋状loading加载特效
32 4
|
6月前
|
前端开发 开发者 容器
CSS进阶-Grid布局高级应用
【6月更文挑战第16天】**CSS Grid布局是CSS3的强大力量,用于复杂二维布局。然而,隐式网格、未命名Grid线和缺少响应式设计是常见问题。解决方法包括显式定义网格结构、命名Grid线和结合媒体查询实现响应式。高级技巧涉及自适应列宽、复杂区域布局和元素层叠对齐。代码示例展示了响应式Grid的用法。掌握这些能提升布局效率和设计灵活性。**
82 11
|
6月前
|
前端开发 容器
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
CSS3 新增背景属性 + 新增边框属性(如果想知道CSS3新增背景属性和新增边框属性的知识点,那么只看这一篇就够了!)
|
6月前
|
前端开发 开发者 容器
CSS进阶-Flexbox高级布局技巧
【6月更文挑战第16天】Flexbox是CSS3的布局模块,简化响应式设计和复杂多列布局。文章探讨了Flex容器与项目属性的区分、垂直居中、防止元素溢出等常见问题及解决方案。此外,还分享了等宽不同高列、圣杯布局和自适应间距等高级技巧。通过示例展示了如何创建垂直居中布局,强调实践和理解核心概念是掌握Flexbox的关键。
94 10
|
6月前
|
Web App开发 前端开发 编译器
CSS3私有前缀+新增盒模型相关属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)
CSS3私有前缀+新增盒模型相关属性(如果想知道CSS3私有前缀、新增盒模型相关属性的知识点,那么只看这一篇就足够了!)
|
6月前
|
前端开发 容器
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)
CSS3新增文本属性(如果想知道CSS3新增文本属性的知识点,那么只看这一篇就够了!)