动画及阴影

0. 什么时候该用什么布局
<!-- 定位布局: 以下两种布局不易解决的问题, 盒子需要脱离文档流处理 -->
<!-- 浮动布局: 一般有block特性的盒子,水平排列显示 -->
<!-- 盒模型布局: 在父级水平居中显示, 在其他布局基础上微调 -->
<!-- 流式布局思想 --> 一.拼接网页 将区域整体划分起名 => 对其他区域布局不产生影响
提出公共css => reset操作
当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级
一定需要最外层,且最外层做自身布局时,不要做过多布局操作 二.过渡 (动画) transition属性 transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier()) 过渡属性具体设置给初始状态还是第二状态 根据具体需求 /*过渡的持续时间*/
transition-duration: 2s;
/*延迟时间*/
transition-delay: 50ms;
/*过渡属性*/
/*单一属性 | 属性1, ..., 属性n | all*/
transition-property: all;
/*过渡曲线*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34); /*结论:*/
/*1.尽量悬浮静止的盒子, 控制运动的盒子*/
/*2.不能确定区间范围的属性值, 不会产生动画效果*/
/*display 不能做动画 | opacity 可以做动画*/ 三.阴影 /*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/
box-shadow: 0 0 10px 10px black; /*一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black; 四.伪类实现边框 /*自身需要定位*/
.box {
position: relative;
}
/*伪类通过定位来完成图层的布局*/
.box:before {
content: "";
/*完成布局*/
position: absolute;
top: 10px;
left: 0;
/*构建图层*/
width: 1px;
height: 100px; }
.box:after {
content: "";
position: absolute;
width: 100px;
height: 1px; top: 0;
left: 10px;
}

Python-ccs动画及阴影的更多相关文章

  1. 玩转树莓派《二》——用python实现动画与多媒体

    环境:树莓派,系统raspbian,系统自带两个版本的python以及pygame. 1.画板 程序如下: !/home/pi/game_1.py import pygame width = 640 ...

  2. web开发:动画及阴影

    一.小米拼接 二.过渡动画 三.过度案例 四.盒子阴影 五.伪类设计边框 一.小米拼接 将区域整体划分起名 => 对其他区域布局不产生影响提出公共css => reset操作当有区域发送显 ...

  3. canvas实现画板功能(渐变、动画、阴影...)

    刚刚在博客园落户了,希望能在这认识更多大神,希望能和大家交好朋友. 闲来无事,把以前用canvas写的画板代码改进了一番,用Html5提供的表单标签给其 加了一个选择颜色的功能,因此发现了该标签的一个 ...

  4. python+tkinter+动画图片+爬虫(查询天气)的GUI图形界面设计

    1.完整代码: import time import urllib.request #发送网络请求,获取数据 import gzip #压缩和解压缩模块 import json #解析获得的数据 fr ...

  5. 汉诺塔的python 动画演示

    1.简介 古代有一座汉诺塔,塔内有3个座A.B.C,A座上有n个盘子,盘子大小不等,大的在下,小的在上,如图所示.有一个和尚想把这n个盘子从A座移到C座,但每次只能移动一个盘子,并且自移动过程中,3个 ...

  6. 【CSS3动画】transform对文字及图片的旋转、缩放、倾斜和移动

    前言:之前我有写过CSS3的transform这一这特性,对于它的用法,还不是很透彻,今天补充补充,呵呵 你懂的,小司机准备开车了. a)再提一提transform的四个属性 ①旋转--->ro ...

  7. 让Qt的无边框窗口支持拖拽、Aero Snap、窗口阴影等特性

    环境:Desktop Qt 5.4.1 MSVC2013 32bit 需要的库:dwmapi.lib .user32.lib 需要头文件:<dwmapi.h> .<windowsx. ...

  8. CSS3-loading动画(五)

    CSS3-loading加载动画 在线示例demo:http://liyunpei.xyz/loading.html 之前发了四篇,二十二个效果,今天再分享六个效果,总计二十八个效果. 二十三.效果二 ...

  9. Core Animation 文档翻译 (第八篇)—提高动画的性能

    前言 核心动画是提高基于APP动画帧率的好方式,但是核心动画的使用不代表性能的提升的保证.尤其在OSX,当使用核心动画时,我们仍需选择最有效的方式.和所有的性能相关的问题一样,我们应该使用工具时时的评 ...

随机推荐

  1. ACCESS与SQL Server下SQL Like 查询的不同

    在ACCESS中LIKE的用法Access里like的通配符用法是这样: “?”表示任何单一字符: “*”表示零个或多个字符: “#”表示任何一个数字 所以应该是: select * from dat ...

  2. Hadoop+HBase+Spark+Hive环境搭建

    杨赟快跑 简书作者 2018-09-24 10:24 打开App 摘要:大数据门槛较高,仅仅环境的搭建可能就要耗费我们大量的精力,本文总结了作者是如何搭建大数据环境的(单机版和集群版),希望能帮助学弟 ...

  3. [持续更新] 文章列表 Last Update: 8/21/2017

    1.前端 HTML5快速学习二 Canvas@20141125 HTML5快速学习一@20141122 2.ASP.NET(MVC) MVC5+EF6 完整教程17--升级到EFCore2.0@201 ...

  4. MYCAT全局序列

    1.本地文件方式 sequnceHandlerType = 0 /root/data/program/mycat/conf/server.xml   <property name="s ...

  5. 什么是cap

    cap理论是分布式系统中非常重要的一个理念 什么是cap理论: Consistency一致性 Availability可用性 Partition-tolerance分区容忍性 CP: 高一致性C和分区 ...

  6. vue项目 打包部署上线

    1. npm run dev:本地开发的时候做调试用的. 2. npm run build:打包部署上线,生成一个 dist 文件夹. 注意:用 npm run build 时,常遇到因引用路径不对导 ...

  7. Linux记录-普通用户下执行sudo xxx 找不到命令解决方案

    chmod 777 /etc/sudoers vim /etc/sudoers 1.可以使用 secure_path 指令修改 sudoers 中默认的 PATH为你想要的路径.这个指令指定当用户执行 ...

  8. Hbase记录-HBase增删改查

    HBase创建数据   本章将介绍如何在HBase表中创建的数据.要在HBase表中创建的数据,可以下面的命令和方法: put 命令, add() - Put类的方法 put() - HTable 类 ...

  9. PHP 进行支付宝开发中return_url和notify_url的区别分析

    在支付宝处理业务中return_url,notify_url是返回些什么状态呢,我们要根据它来做一些处理就必须了解return_url,notify_url的区别,下面我就来给大家介绍; 一.问题描述 ...

  10. python 的正则表达式指北

    正则表达式用来拆分字符串 >>> s = 'one1two2three3four4' >>> pattern = re.compile(r'\d+') >&g ...