CSS之过渡简单应用—日落西山

代码:

<!DOCTYPE html>
<html>
<head>
<title>日落西山</title>
<meta charset="utf-8">
<style type="text/css">
.BK{height: 800px;border: 1px solid black; position: relative;overflow: hidden;animation: bj 10s linear infinite}
.sun{height: 300px;width: 300px;border-radius: 100%;background-color: red; position: absolute; top: 800px;animation: light 10s linear infinite;}
@keyframes light{
0%{box-shadow:0px 0px 100px white;transform: translate(0px,0px)}
20%{box-shadow:0px 0px 200px white;transform: translate(200px,-200px)}
40%{box-shadow:0px 0px 200px yellow;transform: translate(400px,-400px)}
50%{box-shadow:0px 0px 200px yellow;transform: translate(500px,-500px)}
60%{box-shadow:0px 0px 100px yellow;transform: translate(600px,-400px)}
80%{box-shadow:0px 0px 100px yellow;transform: translate(800px,-200px)}
100%{box-shadow: 0px 0px 200px white;transform: translate(1000px,0px)}
}
@keyframes bj{
0%{background-color: black;}
20%{background-color: #C4C2C7;}
50%{background-color: white;}
80%{background-color: #C4C2C7;}
100%{background-color: black;}
}
</style>
</head>
<body>
<div class="BK">
<div class="sun"></div>
</div>
</body>
</html>

时间: 2024-11-09 00:04:35

CSS之过渡简单应用—日落西山的相关文章

css基本语法简单介绍

css基本语法简单介绍:本章节介绍一下css的基本语法,比较适合于初学者阅读,对于稍有经验的人员来说,几乎没有太多帮助,可以略过.使用css的方式主要以下三种: 1.行内样式 2.内嵌样式 3.外联样式 当然可能不同的教材中的名称有所不同,不过实质都是一样的,不必太过纠结.下面分别介绍一下上面三种方式的使用.一.行内样式:所谓的行内样式就是通过标签的style属性,将css代码写在标签之内,代码如下: <div style="color:blue">softwhy.com&

css transition过渡

css过渡效果 transition设置过渡,transition的属性包括如下图: 属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性. transition-property 规定应用过渡的 CSS 属性的名称. transition-duration 定义过渡效果花费的时间.默认是 0. transition-timing-function 规定过渡效果的时间曲线.默认是 "ease". transition-delay 规定过渡效果何时开始.默认是 0

CSS 3 过渡-transition

CSS 3 过渡 ===================================================================================== 过渡---一个元素在不同状态之间进行平滑的转换,CSS 3 中使用transition属性实现过渡效果. transition :过渡属性  执行时间  时间函数 延时时间: 时间函数---设置元素运动的速度 (1)贝塞尔曲线  cubic-bezier(p1(x,y),p2(x,y)) 预定义贝塞尔曲线:

css制作最简单导航栏

css制作最简单导航栏 (1)先建一个列表: <ol> <li><a href="#">网易</a></li> <li><a href="#">搜狐</a></li> <li><a href="#">新浪</a></li> <li><a href="#"&

用CSS写一个简单的幻灯片效果页面

这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [用CSS写一个简单的幻灯片效果页面] 1.背景介绍CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation. transform属性向元素应用2D或3D转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. transition是令一个或多个可以用数值表示的css属性值

用CSS实现一个简单的幻灯片效果页面

用CSS实现一个简单的幻灯片效果页面,第一反应是利用CSS3的animation.不过为了兼容浏览器,记得加各浏览器前缀("chrome和safira:-webkit-"."firefox:-moz-"."opera:-o-"),我最开始写的时候忘记加浏览器前缀,在chrome中一直没有任何显示.下面说说用到的animation各属性.animation-name(动画名字,需用引号包裹)animation-duration(动画持续时间,如:2

【CSS】过渡、动画和变换

1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> <style type="text/cs

CSS transition 过渡 详解

transition 过渡 IE10.Firefox.Chrome.Opera 支持 transition 属性. Safari 需要前缀 -webkit-. Chrome 25 以及更早版本需要前缀 -webkit-. IE9 以及更早版本不支持 transition 属性. 过渡属性 transition-property:规定应用过渡效果的 CSS 属性的名称(当指定的CSS属性改变时,过渡效果开始),其默认值为 all . transition-duration:规定完成过渡效果需要的时

笔记:css之过渡和动画

一.什么是过渡transition? 1.能够在一定时间内使CSS属性平滑的变化; 2.过渡效果的执行需要一个触发.\ 常用的过渡属性. 1.主要包含: transition:none/all/indent(默认只执行一个为默认属性); 2.transition-duration:过渡持续的时间,默认为0; 3 .transition-timing-function;允许根据时间改变属性变化的速率; 值:(1).ease 逐渐变慢, (2).linear 匀速, (3).ease-in  加速,