Mlldxe's Blog Https://mlldxe.cn Dog's nest Fri, 22 May 2020 03:00:38 +0000 Zh-CN Hourly One Https://wordpress.org/? V=5.0.9 1000 days to achieve Https://mlldxe.cn/archives/646 Https://mlldxe.cn/archives/646#respond Tue, 31 Mar 2020 13:28:00 +0000 Https://mlldxe.cn/? P=646 The blog is just 1000 days old.

> >
Https://mlldxe.cn/archives/646/feed Zero
3D rotating magic cube Https://mlldxe.cn/archives/641 Https://mlldxe.cn/archives/641#comments Sun, 08 Mar 2020 03:00:14 +0000 Https://mlldxe.cn/? P=641 We can realize the cube rotation by CSS animation, and change the key frame definition (@keyframes) in CSS code to change the way of the cube's rotation.

The results are as follows:


The label properties we may use are as follows:

Label describe
Transform Elements can be converted to 2D or 3D.
Transform-style How to display the specified elements in 3D space.
Animation You can animate elements.
@keyframes animation name {from {}to Set animation from start to finish.
TranslateX ( X ) Define 3D transformation, using only values for X axis.
TranslateY ( Y ) Define 3D transformation, using only values for Y axis.
TranslateZ ( Z ) Define 3D transformation, using only values for Z axis.
Translate3d (x, y, z) Define 3D transformation.
ScaleX ( X ) Define the 3D zoom transformation by passing the value of a given X axis.
ScaleY ( Y ) Define the 3D zoom transformation by passing the value of a given Y axis.
ScaleZ ( Z ) Define the 3D zoom transformation by passing the value of a given Z axis.
RotateX ( Angle ) Define the 3D rotation along the X axis.
RotateY ( Angle ) Define the 3D rotation along the Y axis.
RotateZ ( Angle ) Define the 3D rotation along the Z axis.
Rotate3d ( X , Y , Z , Angle ) Define 3D rotation.

We have the following ideas for implementation.

1, first put the six sides of the cube together.

2, then rotate each surface to make it form a cube.

3, then let it rotate.

The first step is to define the six sides of a cube.

 / * the outermost container styles are */
.wrap {
width: 100px; 
height: 100px; 
margin: 150px; 
position: relative;}} /} / * wrap all container styles * / 100px / * set transform-style: preserve-3d, so that its child elements appear in the space of 
margin:; 
transform: rotateX (-30deg) rotateY (-80deg); 
animation: rotate linear 20s infinite; 
}
@-webkit-keyframes infinite; (2); (E); 
opacity: 0.8; 
transition: all.4s;}}} / * define all image styles */
.pic {
width: 200px; 
height: 200px;}}} / * * define small cube style */
.cube span span; Pic {
width: 100px; 
height: 100px;

The second step: rotate the faces and turn them into 3D cubes.

Here, we divide it into three parts.

1, translateZ: translate two faces to form two sides of the cube.

2, rotateX (90DEG): inverting two sides to form two sides of the cube.

3, rotateY (90DEG): inverting two sides to form two sides of the cube.

 / * define the large cube six face rotation style */
.cube.Out_ Front {
transform: rotateY (0DEG) translateZ (100px); 
}

.cube.Out_ Back {
transform: translateZ (-100px) rotateY (180DEG); 
}

.cube.Out_ Left {
transform: rotateY (-90deg) translateZ (100px); 
}

.cube.Out_ Right {
transform: rotateY (90DEG) translateZ (100px); 
}

.cube.Out_ Top {
transform: rotateX (90DEG) translateZ (100px); 
}

.cube.Out_ Bottom {
transform: rotateX (-90deg) translateZ (100px);}}}, rotateX, * define small cubes, six face rotation styles */
.cube.In_ Front {
transform: rotateY (0DEG) translateZ (50px); 
}

.cube.In_ Back {
transform: translateZ (-50px) rotateY (180DEG); 
}

.cube.In_ Left {
transform: rotateY (-90deg) translateZ (50px); 
}

.cube.In_ Right {
transform: rotateY (90DEG) translateZ (50px); 
}

.cube.In_ Top {
transform: rotateX (90DEG) translateZ (50px); 
}

.cube.In_ Bottom {
transform: rotateX (-90deg) translateZ (50px); X}} Cube:hover.Out_ Front {
transform: rotateY (0DEG) translateZ (200px); Cube:hover.Out_ Back {
transform: translateZ (-200px) rotateY (180DEG); Cube:hover.Out_ Left {
transform: rotateY (-90deg) translateZ (200px); Cube:hover.Out_ Right {
transform: rotateY (90DEG) translateZ (200px); Cube:hover.Out_ Top {
transform: rotateX (90DEG) translateZ (200px); Cube:hover.Out_ Bottom {
transform: rotateX (-90deg) translateZ (200px);

The third step: by rotation. Div To achieve rotation function.

 <! DOCTYPE html>
<html>
<head>
 <meta charset= "UTF-8" / > 
</head>
<body>
 <! -- the largest outer container -- > class= <div class= "wrap" > < < <!! > - all containers of all elements -- > <div <div class= "<div" > < <! "- front picture > Front "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 1.jpg "alt=", "class=" pic "/ > </div>
"! "- the picture behind: > <div <div class= out_. Back "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 2.jpg "alt=", "class=" pic "/ > </div>
"! "- left picture > > <div <div" out_ " Left "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 3.jpg "alt=", "class=" pic "/ > </div>
"! "- right picture - > out_ <div class= out_. Right "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 4.jpg "alt=", "class=" pic "/ > </div>
"! "- picture above: > <div <div class= out_. Top "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 5.jpg "alt=", "class=" pic "/ > </div>
"! "- the following picture: > <div <div class= out_. Bottom "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 6.jpg "alt=", "class=" pic "/ > </div>

"! "- small cube - > <span <span class= in_. Front "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 7.jpg "alt=", "class=" in_ Pic "/ > </span>
 <span class=" in_ Back "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 8.jpg "alt=", "class=" in_ Pic "/ > </span>
 <span class=" in_ Left "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 9.jpg "alt=", "class=" in_ Pic "/ > </span>
 <span class=" in_ Right "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 10.jpg "alt=", "class=" in_ Pic "/ > </span>
 <span class=" in_ Top "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 11.jpg "alt=", "class=" in_ Pic "/ > </span>
 <span class=" in_ Bottom "> <img src=" Https://mlldxe.cn/wp-content/themes/kratos-pjax/magic_ Square/magic/magic_ 12.jpg "alt=", "class=" in_ PIC / / > </span>
 </div>
 </div>
</body>
</html>

Place in the corresponding place CSS You can place the 3D magic cube in the sidebar. Add mode: enter your blog Garden > settings, add the above HTML code to the blog side sidebar bulletin.

END: effect demonstration 3D rotating magic cube

The following are the pictures used:



















> >
Https://mlldxe.cn/archives/641/feed One
Happy birthday to me A kind of Https://mlldxe.cn/archives/640 Https://mlldxe.cn/archives/640#comments Sat, 07 Mar 2020 13:32:35 +0000 Https://mlldxe.cn/? P=640 Happy birthday to me Chinese style

> >
Https://mlldxe.cn/archives/640/feed Two
Using custom HTML gadget to achieve countdown Https://mlldxe.cn/archives/636 Https://mlldxe.cn/archives/636#respond Sat, 07 Mar 2020 03:30:29 +0000 Https://mlldxe.cn/? P=636

Preface

It feels like an interesting thing. You can record some information remaining time, such as domain name, server, etc., mainly to see what they like to record, no restrictions, add is also very simple, very good, recommend to everyone.

Front end display effect

 Count down

Implementation steps

1. save the following code as Countdownjs.js Save in the JS of the current theme:

 / *! 
*Template Name: custom HTML countdown 
*Blog: Https://mlldxe.cn/
 *author: Dog's
*url: Https://mlldxe.cn/archives/636
 * * * * The Final Countdown for jQuery v2.2.0 ( Http://hilios.github.io/jQuery.countdown/ * * * * Copyright (c) 2016 Edson Hilios
*
* Permission is hereby granted, free of charge, of, and it is also referred to as "free". Software without restriction, including without limitation the rights to
* use, copy, modify, t, C, R, R, R, D, R, D, R, D, R, D, R, D, R, D, R, D, R, D, R, D, R, D, etc. Subject to the following conditions:
* The, above copyright notice and this, notice, China, Japan, China, Japan, China, China, China, China, China, Macao, China. FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL, NO, ",", " OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE, THE, "("), "{", "{"; " Define.amd {
define ([jQuery]], factory); else} {
factory (jQuery);}}}} (function ($) {} use strict; 
var instances = []. Matchers = [], defaultOptions = {
precision: 100, 
elapse: false, 
defer: false
}; Matchers.push (/^[0-9]*$/.source); Matchers.push (/ ([0-9]{1,2}\/) {2}[0-9]{4} ([0-9]{1,2} ([0-9]{2}) {2}) /.source) Matchers.push (/[0-9]{4} ([\/\-][0-9]{1,2}) {2} ([0-9]{1,2} ([0-9]{2}) {2}) /.source); 
matchers = new RegExp ( Matchers.join (
function) (parseDateString); dateString {
if (dateString instanceof Date) {
return dateString; 
}
if (String (dateString) (())) ((()) (()) (()) (=); }
if (String (dateString).Match (/ / /)) {
dateString = String (dateString).Replace (/\-/g, "/"); 
}
return new Date; KEY_ MAP = {
Y: "years", 
m: "months", 
n: "daysToMonth", 
w: "weeks", 
d: "daysToWeek", "
d:", "" "," "" "," "" "," "" "", "" "", "" "" "," "" "};" Var sanitize = Str.toString ().Replace (/ [(*] + $($)] (/g) (\\$1); 
return new RegExp (sanitize); 
}
function strftime (offsetObject) {
return {
return (()) Format.match (/% (?!!)? [A-Z]{1} ((^; + +); /gi); 
if (directives) {
for (VaR I = 0, Len = Directives.length ; I < len; ++i) {
var directive = directives[i].match (/% (-)!! ([a-zA-Z]{1}) ((^; + +); /), regexp = escapedRegExp (directive[0]), modifier = directive[0] "", "= =" KEY_ MAP.hasOwnProperty (Directive)) {
value = DIRECTIVE_ KEY_ MAP[directive]; 
value = Number (offsetObject[value]); 
}
if (value = = null) {
if (modifier = = = "!") {
value = pluralize (modifier, V); ((= = = = ")" { If (value < 10) {
value = "0" + Value.toString (); 
}
}
format = Format.replace (regexp, Value.toString ()); 
}
}
}
format = Format.replace (% /%,%); 
return format; 
}
function}; 
}
function pluralize (format, count) {
var plural = "s", singular = ""; 
if (s) = = Format.replace ((/: (|\s; /gi), "" ".Split (/ / /); 
if ( Format.length = = 1) {
plural = format[0]; else} else = Format[0]; 
plural = format[1]; 
}
}
if ( Math.abs (count) = = = 1) {
return singular;}} else {
return plural; 
}
}
var Countdown = function (EL, finalDate, function) {} This.el = El; 
this.$el = $(EL); This.interval = null;     This.offset = {} This.options = $.extend ({}, defaultOptions) This.instanceNumber = Instances.length ; Instances.push (this); 
this.$ El.data ("countdown-instance", This.instanceNumber ); 
if (options) {
if (typeof options = = = "function") {
this.$ El.on (" Update.countdown " Options); 
this.$ El.on (" Stoped.countdown "Options"; 
this.$ El.on (" Finish.countdown "Options"; {} else {}. This.options = $.extend ({}, defaultOptions, options); This.setFinalDate (finalDate); 
if ( This.options.defer = = false) { This.start 
$.extend; Countdown.prototype {
start: function () {
if ( This.interval = = null) {
clearInterval ( This.interval ) 
}
var self = this; This.update (); This.interval = SetInterval (function ()) { Self.update.call (self); This.options.precision 
stop: function () {
clearInterval ( This.interval ) This.interval = null; This.dispatchEvent ("stoped"); 
toggle: function () {
if ( This.interval {               This.stop (); {} else {}. This.start 
pause: function () {} This.stop (
resume:) function}. This.start (
remove:) function}. This.stop.call (this); 
instances[ This.instanceNumber = null; 
delete this.$ El.data (.CountdownInstance); 
setFinalDate: function (value) {}. This.finalDate = parseDateString (value); 
update:}, 
update: function () {
if (this.$) El.closest ("HTML").Length = = = 0) { This.remove (); Return; 
}
var hasEventsAttached = $. Data ( This.el , "events") = = undefined, now = new Date (), newTotalSecsLeft; 
newTotalSecsLeft = This.finalDate.getTime () - Now.getTime (); 
newTotalSecsLeft = Math.ceil (newTotalSecsLeft / 1E3); 
newTotalSecsLeft =! This.options.elapse & newTotalSecsLeft < 0? 0: Math.abs (newTotalSecsLeft); 
if ( This.totalSecsLeft = = newTotalSecsLeft hasEventsAttached, {
return; else} { This.totalSecsLeft = newTotalSecsLeft; This.elapsed = now > = This.finalDate ; This.offset = {
seconds: This.totalSecsLeft % 60 Minutes: Math.floor ( This.totalSecsLeft / 60)% 60, 
hours: Math.floor ( This.totalSecsLeft / 60 / 60)% 24, 
days: Math.floor ( This.totalSecsLeft / 60 / 60 / 24)% 7, 
daysToWeek: Math.floor ( This.totalSecsLeft / 60 / 60 / 24)% 7 
daysToMonth: Math.floor ( This.totalSecsLeft / 60 / 60 / 24% 30.4368), 
weeks: Math.floor ( This.totalSecsLeft / 60 / 60 / 24 / 7), 
months: Math.floor ( This.totalSecsLeft / 60 / 60 / 24 / 30.4368), 
years: Math.abs ( This.finalDate.getFullYear () - Now.getFullYear ()) 
totalDays: Math.floor ( This.totalSecsLeft / 60 / 60 / 24), 
totalHours: Math.floor ( This.totalSecsLeft / 60 / 60), 
totalMinutes: Math.floor ( This.totalSecsLeft / 60), 
totalSeconds: This.totalSecsLeft
 } 
if ()! This.options.elapse & & This.totalSecsLeft = = 0) This.stop (); This.dispatchEvent ("finish"); {} else {}. This.dispatchEvent ("update"); 
dispatchEvent: function (eventName) {
var event = $.Event (eventName + ".Countdown"); Wei Event.finalDate = This.finalDate ; Event.elapsed = This.elapsed ; Event.offset = $.extend ({}, This.offset ) Event.strftime = strftime ( This.offset ); 
this.$ El.trigger (event); $10. Fn.countdown = function () {
var argumentsArray = Array.prototype.slice .call (arguments, 0); 
return This.each (function () {
var instanceNumber = $(this).Data ("countdown-instance"); 
if (instanceNumber = = undefined) {
var instance = instances[instanceNumber]. Method = argumentsArray[0]; 
if ( Countdown.prototype.hasOwnProperty (method)) {
instance[method].apply (instance). ArgumentsArray.slice (1)) else if (String (method).Match (/^[$A-Z_). ][0-9A-Z_ $]*$/i) = = = null) { Instance.setFinalDate.call (instance, method) Instance.start (); else {
$.error ("Method%s does not exist on") JQuery.countdown ".replace (/\%s/gi, method)"; else}} else {
new Countdown (this). ArgumentsArray[0], argumentsArray[1]);

2. add a custom HTML gadget to your sidebar, add the following code:

 <style type= "text/css" >
.zzsc-content{
padding- Left:10%; }
#clock{
font-family:'Days One', "Microsoft YaHei", Arial, sans-serif; 
font-size: 2em; 
}
</style>
<div class= "zzsc-content bgcolor-8" >
<span id= "clock" ></span>
</div>

<script type= "text/javascript" src= " Https://blog.mlldxe.cn/countdownjs.js "></script>
<script type=" text/javascript > > $$(function ()) {$text/javascript ('#clock').Countdown ('2018/6/7', function (event) {$$(this).Html). Event.strftime ('%D days%H:%M:%S'); 
</script>)

Four $('#clock').Countdown ('2018/6/7', function (event)) Change to the date you want.


Two Zero Two One year - new year inverted meter Time



In addition, CSS can beautify itself. Stop:

> >
Https://mlldxe.cn/archives/636/feed Zero
WP Mail SMTP failed to send using QQ mailbox. Https://mlldxe.cn/archives/627 Https://mlldxe.cn/archives/627#respond Wed, 04 Mar 2020 13:47:04 +0000 Https://mlldxe.cn/? P=627

Preface

After the blog opens HTTPS, change the Kratos theme, use the WP Mail SMTP plug-in to push the failure with QQ mailbox configuration? What the f**k Huaji21:

1.QQ mailbox to turn on IMAP/SMTP service

In the settings of the QQ mailbox.

2. port setup

In WP Mail SMTP plug-in settings, STMP Host fills in Stmp.qq.com STMP Port fill in 465

3. accounts and passwords

The Username (user name) is filled with the QQ mailbox. The password is filled. It is not the password of the mailbox, but the generated authorization code.


Finally, send out my setup page.

> >
Https://mlldxe.cn/archives/627/feed Zero
Blog enable HTTPS (SSL) Https://mlldxe.cn/archives/620 Https://mlldxe.cn/archives/620#respond Mon, 02 Mar 2020 12:50:30 +0000 Https://mlldxe.cn/? P=620 I heard that SSL world is beautiful, and it has spent two days. Blog has opened HTTPS.

> >
Https://mlldxe.cn/archives/620/feed Zero
A dynamic proof that I'm alive. Https://mlldxe.cn/archives/616 Https://mlldxe.cn/archives/616#comments Fri, 28 Feb 2020 09:17:02 +0000 Http://mlldxe.cn/? P=616 A dynamic proof that I am still alive. Cleaned up a wave of friends chain.

> >
Https://mlldxe.cn/archives/616/feed Two
Remote support and remote access TeamViewer [V14.4.2669] Https://mlldxe.cn/archives/559 Https://mlldxe.cn/archives/559#comments Sat, 17 Aug 2019 07:58:40 +0000 Http://mlldxe.cn/? P=559 TeamViewer is a simple and fast solution for remote control applications, desktop sharing and file transfer, which can be used for remote control in the backstage of any firewall and NAT agent. In order to connect to another computer, you only need to run TeamViewer on two computers at the same time without installation. The software first started to automatically generate partner ID on two computers. Just input your partner's ID to TeamViewer, and then establish a connection immediately.
 TeamViewer
 TeamViewer
 TeamViewer

Official download address

TeamViewer_ Setup.exe
TeamViewerQS.exe (quick support version)
TeamViewerPortable.zip (portable version)
TeamViewer.dmg (Mac version)

> >
Https://mlldxe.cn/archives/559/feed Six
I can no longer be a salted fish. Https://mlldxe.cn/archives/554 Https://mlldxe.cn/archives/554#comments Sat, 03 Aug 2019 07:38:36 +0000 Http://mlldxe.cn/? P=554 Do not want to live up to too many people's expectations.
But I never learn to stick to it.
Watching others step by step from me to be stronger than me.
Everyone is making progress.
I am the only one standing there.
I always make excuses for myself.
I want to change
But I can't keep up.
You can't even beat yourself.
Every time you see someone else doing something easily,
I really feel bad.
Am I really bad?

Holding pen and thinking a thousand words and thousands of words
But I can not write my pride.
Finally, only doubts and problems remain.

Drink a bowl of soup that is pleasant to the past.
Warm and empty, full of sorrow.
Let's face the reality.
How many cold and warm can only know oneself.
And hit the walls of youth.
Only to discover that courage is not against time.
Wandering in a changing city
How many times have you been there?
If everything is worth it, it's worth it.
Why some success can make people feel lost?
In the end, the heart is more open than the distance.
It's used to being alone.

When tears do not hide with smiles
When it is misunderstood, it will no longer be explained.
I understand that happiness is your own perception.
I understand that life is one's own.
The universe is so big.
The world is vast.
It is not impossible to get better in the future.

I want to work hard
Worthy of one's ambition

-- to the future self

 

First year

Everything begins when you are not ready.
When you're ready, it's over.

Sorry, only. Sign in And you can read the hidden content before you comment on any article in this station.

Enquiries: Http://www.gdkszx.com.cn/score/construct_ B2019.asp? From=groupmessage&isappinstalled=0

> >
Https://mlldxe.cn/archives/554/feed Three
Simple and easy to use GIF production tool -- ScreenToGif Https://mlldxe.cn/archives/546 Https://mlldxe.cn/archives/546#respond Fri, 26 Jul 2019 02:40:16 +0000 Http://mlldxe.cn/? P=546

Preface

In daily life, you may encounter some situations of displaying some operation process or some dynamic effects to others. Screenshots are sometimes hard to say clearly, and video recording is not convenient. At that time, a software that can directly generate GIF diagrams is needed to solve this problem. If you know the software of Screen ToGif, this problem can be solved.

Screen ToGif is a free, open source, no advertising screen to GIF software. You can record the content you need through 3 ways: screen, webcam and sketchpad. At the same time, it supports editing and recording, editing GIF from other sources. After decompression, the software size is only 2.2M, and most importantly, support Chinese!
The GIF in this article is made by Screen ToGif.

There are seven options in menu interface.

  • Application: the main function settings of software
  • Interface settings: background and theme settings for the editor
  • Language: interface language setup, default follow system.
  • Temporary files: where temporary files are stored, the software is saved by default for GIF five days.
  • Extra: there is no localization here, and additional functions should be added.
  • Donation: emmmm... You know.
  • About: author's contact method

There are seven options in the editor menu.

  1. File: save items and add other media files.
  2. Home page: copy, paste, revoke the previous operation, adjust the size of the window, etc.
  3. play
  4. Edit: delete and adjust frames
  5. Image: adding watermark, subtitle, blurred object, etc.
  6. Transition: transition animation adjustment, sub sliding and fade out two styles.
  7. Statistics: GIF file information, frames, time and so on.

Edible method

The operation is very simple. After double click the software running, click the video recorder to enter the recording interface. It can adjust the recording scope freely, modify the frames per second, and start recording after setting up. After the recording is finished, the editing operation is carried out above the interface. It can choose to delete frames, add watermark, and modify transitional animation.
For more specific use, see GitHub (English): Https://github.com/NickeManarin/ScreenToGif/wiki/help

download

Official website: Http://www.screentogif.com/

> >
Https://mlldxe.cn/archives/546/feed Zero